グラフや図解の説明テキスト | Accessible & Usable
公開日 : 2018年8月4日 (2020年6月13日 更新) カテゴリー : アクセシビリティ ウェブコンテンツの中で、視覚的な情報提示としてグラフや図解を用いる場合、アクセシビリティ (特に視覚障害者に対する情報保障) はどのように両立したらよいでしょうか。主宰しているウェブアクセシビリティの勉強会で、質問が寄せられたので、考えてみました。 グラフも図解も「画像」なので、alt 属性で代替テキストを記述すれば...とまずは思うかもしれません。ただし、alt 属性内に要約をコンパクトにまとめられればよいのですが、多くの場合、グラフや図解は情報量が多いため、テキストに起こしてみると記述は説明的で長くなりがちです。また、alt 属性内のテキストはセマンティックに構造化することができず、長いテキストでも平坦な記述 (情報の優先度付けなどのない「べた書き」) にならざるを得ないため、スクリーンリ
Accessible SVGs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
D3.js – 円グラフのポイント | DevelopersIO
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
データを可視化する為のグラフ描画JavaScriptライブラリをまとめた・「JSGraphs」
http://www.designwalker.com/2010/07/chart-tool.html
