Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SVG MANIAX
Scalable Vector Graphics
Vol. 3
松 田 直 樹
CCO, Web Designer
SVGの特徴って?
画像 であり、 文書 である
XML文書だから
すべての図形や画像は "要素" となる
path 要素 line 要素 rect 要素
circle 要素 ellipse 要素 polygon 要素 image 要素
text 要素
Lorem
ipsum
dolor
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
www.w3.org/1999/xlink" viewBox="0 0 100 100">
<path d="M0,42....
文書であるということは
テキストノードを含めることができる
マシンリーダブル
アクセシビリティを確保できる
HTML5 + inline SVG
における
アクセシビリティ
SVGの最大の利点?
画像の「中身」を
アクセシブルにできる
画像といえば、代替テキスト
JPEG や PNG の代替テキスト
alt="ハンバーガー"
longdesc="http://
example.com/desc1"
SVG の代替?テキスト
<svg viewBox="0 0 100 100">
<title>
ハンバーガー
</title>
<desc>
ハンバーガーのフラットな
イラストアイコン
</desc>
…
</svg>
SVG の代替テキスト
title 要素 / desc 要素
それぞれの コンテナ要素 や グラフィックス要素 には個別に、
desc 要素, またはテキストのみの説明を与える title 要素,
あるいはそれらの両方を指定することができる。
SVG内のそれぞれの要素にも使える
<g>
<title>ハンバーガー</title>
<desc>…</desc>
</g>
<g>
<title>ホットドッグ</title>
<desc>…</desc>
</g>
<g>
<title>ド...
<rect x="10" y="10"
width="20" height="20">
<title>すごく四角い</title>
<desc>…</desc>
</rect>
<g x="10" y="10">
<title>たくさん丸い</...
<svg viewBox="0 0 100 100">
<title>フードメニュー</title>
<desc>当店のフードメニューのイラストアイコン</desc>
<g>
<title>ハンバーガー</title>
<desc>人気No.1...
でも、title 要素と desc要素、
スクリーンリーダーが読んでくれない
SVG のスクリーンリーダー対応
role 属性 / aria-* 属性
を使いましょう
WebコンテンツおよびWebアプリケーション、
特にRIAを
あらゆるユーザにとってよりアクセシブルにするもの
SVG のスクリーンリーダー対応
role 属性 aria-* 属性
要素の「役割」を
定義する
要素の「状態」を
定義する
<svg viewBox="0 0 100 100"
role="img"
aria-labelledby="title desc">
<title id="title">ハンバーガー</title>
<desc id="desc">ハンバーガ...
<svg viewBox="0 0 100 100"
role="img"
aria-labelledby="title desc">
<title id="title">ハンバーガー</title>
<desc id="desc">トマトとレ...
SVG のスクリーンリーダー対応
<g role="img" aria-labelledby="title1 desc1">
<title id="title1">四角</title>
<desc id="desc1">黒い正方形</desc>...
SVG のスクリーンリーダー対応
<g role="img" aria-labelledby="title1 desc1">
<title id="title1">四角</title>
<desc id="desc1">黒い正方形</desc>...
• SVGのtitle要素は、仕様書のとおりだと、
hoverでツールチップ表示されるべき

(UAによる実装)
• ***.svg という単体のSVGファイルでは、
まったくスクリーンリーダーで読まれない
小ネタ
小ネタ
Authors should always provide a ‘title’ child element to the outermost svg
element within a stand-alone SVG document. ...
詳細は早川さんのブログにて
http://blog.e-riverstyle.com/2014/12/svg.html
SVGの中でHTMLを使う
SVGの中で
「見出し」的なテキストを使いたい
SVG の中でHTMLを使う
foreignObject 要素 + HTMLの要素
が使える
foreignObject要素は、グラフィックの描画に、
SVGとは異なる名前空間の要素(HTMLなど)を
用いることができる要素
0
30
60
90
120
150
渡辺田中高橋鈴木佐藤
例えば、こんなグラフ
0
30
60
90
渡辺田中高橋鈴木佐藤
<g>
<title id="point-sato"">230点</title>
<text x="450" y="370">佐藤</text>
<rect x="450" y="123" width...
0
30
60
90
120
150
渡辺田中高橋鈴木佐藤
このままだと、全部読み上げられるのに
時間がかかってしまう
0
30
高橋鈴木佐藤
お、なんかこいつ、見出しっぽい
0
30
渡辺田中高橋鈴木佐藤
<g>
<title id="point-sato">86点</title>
<foreignObject x="76" y="273" width="40" height="25">
<h3>佐藤</h3>
<...
0
30
60
90
120
渡辺田中高橋鈴木佐藤
VoiceOver等の
「見出し間スキップ」機能が使える
DEMO
アクセシブルにできるのは分かったが
どんな画像に向いているのか?
こんな一枚画像までもがアクセシブルに
地図もそのままアクセシブルに
凝ったナビゲーションもアクセシブルに
今後のブラウザ対応にも期待
SVG Accessibility API Mappings 草案公開
http://www.w3.org/TR/2015/WD-svg-aam-1.0-20150226/
画像の「中身」を
アクセシブルにできること
SVGの最大の利点
松田直樹
ありがとうございました
SVG MANIAX
Scalable Vector Graphics
Vol. 3
Upcoming SlideShare
Loading in …5
×

HTML5 と SVG で考える、これからの画像アクセシビリティ

26,449 views

Published on

HTML5とinline SVGで、画像の「中身」をアクセシブルにすることができます。

Published in: Design

HTML5 と SVG で考える、これからの画像アクセシビリティ

  1. 1. SVG MANIAX Scalable Vector Graphics Vol. 3
  2. 2. 松 田 直 樹 CCO, Web Designer
  3. 3. SVGの特徴って?
  4. 4. 画像 であり、 文書 である
  5. 5. XML文書だから すべての図形や画像は "要素" となる
  6. 6. path 要素 line 要素 rect 要素 circle 要素 ellipse 要素 polygon 要素 image 要素 text 要素 Lorem ipsum dolor
  7. 7. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" viewBox="0 0 100 100"> <path d="M0,42.197C0,18.892,18.892,0,42.197 ... "/> <rect x="0" y="20" width="10" height="10"/> <polygon points="81.098,61.017 88.796,76.614 ... "/> <text>Lorem ipsum dolor</text> </svg>
  8. 8. 文書であるということは テキストノードを含めることができる マシンリーダブル アクセシビリティを確保できる
  9. 9. HTML5 + inline SVG における アクセシビリティ
  10. 10. SVGの最大の利点?
  11. 11. 画像の「中身」を アクセシブルにできる
  12. 12. 画像といえば、代替テキスト
  13. 13. JPEG や PNG の代替テキスト alt="ハンバーガー" longdesc="http:// example.com/desc1"
  14. 14. SVG の代替?テキスト <svg viewBox="0 0 100 100"> <title> ハンバーガー </title> <desc> ハンバーガーのフラットな イラストアイコン </desc> … </svg>
  15. 15. SVG の代替テキスト title 要素 / desc 要素 それぞれの コンテナ要素 や グラフィックス要素 には個別に、 desc 要素, またはテキストのみの説明を与える title 要素, あるいはそれらの両方を指定することができる。
  16. 16. SVG内のそれぞれの要素にも使える <g> <title>ハンバーガー</title> <desc>…</desc> </g> <g> <title>ホットドッグ</title> <desc>…</desc> </g> <g> <title>ドーナッツ</title> <desc>…</desc> </g>
  17. 17. <rect x="10" y="10" width="20" height="20"> <title>すごく四角い</title> <desc>…</desc> </rect> <g x="10" y="10"> <title>たくさん丸い</title> <desc>…</desc> <path …> <circle …> <circle …> <circle …> </g> 図形などの要素にも グループなどのコンテナ要素にも グループ化
  18. 18. <svg viewBox="0 0 100 100"> <title>フードメニュー</title> <desc>当店のフードメニューのイラストアイコン</desc> <g> <title>ハンバーガー</title> <desc>人気No.1。オリジナルのパティとトマトソース…</desc> </g> <g> <title>ホットドッグ</title> <desc>カリッと焼いた粗挽きソーセージのホット…</desc> </g> <g> <title>ドーナッツ</title> <desc>外はカリッ。中はモチモチ。そこそこヘルシー…</desc> </g> … </svg>
  19. 19. でも、title 要素と desc要素、 スクリーンリーダーが読んでくれない
  20. 20. SVG のスクリーンリーダー対応 role 属性 / aria-* 属性 を使いましょう WebコンテンツおよびWebアプリケーション、 特にRIAを あらゆるユーザにとってよりアクセシブルにするもの
  21. 21. SVG のスクリーンリーダー対応 role 属性 aria-* 属性 要素の「役割」を 定義する 要素の「状態」を 定義する
  22. 22. <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">ハンバーガー</title> <desc id="desc">ハンバーガーのフラットなイ ラストアイコン</desc> … </svg> role と aria-labelledby で対応しましょう
  23. 23. <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">ハンバーガー</title> <desc id="desc">トマトとレタス、チーズのハ ンバーガーのイラスト</desc> … </svg> SVG のスクリーンリーダー対応 ハンバーガー トマトとレタス、チーズのハンバーガーのイラスト イメージ
  24. 24. SVG のスクリーンリーダー対応 <g role="img" aria-labelledby="title1 desc1"> <title id="title1">四角</title> <desc id="desc1">黒い正方形</desc> <rect width="100" height="100"/> </g> <g role="img" aria-labelledby="title2 desc2"> <title id="title2">丸</title> <desc id="desc2">黒い正円</desc> <circle cx="170" cy="50" r="50"/> </g> <g role="img" aria-labelledby="title3 desc3"> <title id="title3">三角</title> <desc id="desc3">黒い正三角形</desc> <polygon points="0,207 50,120 99.999,207 "/> </g> <g role="img" aria-labelledby="title4 desc4"> <title id="title4">星形</title> <desc id="desc4">黒い星</desc> <polygon points="169.987,112.12 185.438,143.427 219.987,148.447 194.987,172.816 200.889,207.226 169.987,190.98 139.086,207.226 144.987,172.816 119.987,148.447 154.536,143.427"/> </g>
  25. 25. SVG のスクリーンリーダー対応 <g role="img" aria-labelledby="title1 desc1"> <title id="title1">四角</title> <desc id="desc1">黒い正方形</desc> <rect width="100" height="100"/> </g> <g role="img" aria-labelledby="title2 desc2"> <title id="title2">丸</title> <desc id="desc2">黒い正円</desc> <circle cx="170" cy="50" r="50"/> </g> <g role="img" aria-labelledby="title3 desc3"> <title id="title3">三角</title> <desc id="desc3">黒い正三角形</desc> <polygon points="0,207 50,120 99.999,207 "/> </g> <g role="img" aria-labelledby="title4 desc4"> <title id="title4">星形</title> <desc id="desc4">黒い星形</desc> <polygon points="169.987,112.12 185.438,143.427 219.987,148.447 194.987,172.816 200.889,207.226 169.987,190.98 139.086,207.226 144.987,172.816 119.987,148.447 154.536,143.427"/> </g> 四角 黒い正方形 イメージ 丸 黒い正円 イメージ 三角 黒い正三角形 イメージ 星形 黒い星 イメージ
  26. 26. • SVGのtitle要素は、仕様書のとおりだと、 hoverでツールチップ表示されるべき
 (UAによる実装) • ***.svg という単体のSVGファイルでは、 まったくスクリーンリーダーで読まれない 小ネタ
  27. 27. 小ネタ Authors should always provide a ‘title’ child element to the outermost svg element within a stand-alone SVG document. The ‘title’ child element to an ‘svg’ element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. 独立した SVG 文書の 最も外側の svg 要素 に対し 常に、 title 要素を子要素として与えるべきである http://www.w3.org/TR/SVG/struct.html#DescriptionAndTitleElements Scalable Vector Graphics (SVG) 1.1 (Second Edition)
  28. 28. 詳細は早川さんのブログにて http://blog.e-riverstyle.com/2014/12/svg.html
  29. 29. SVGの中でHTMLを使う
  30. 30. SVGの中で 「見出し」的なテキストを使いたい
  31. 31. SVG の中でHTMLを使う foreignObject 要素 + HTMLの要素 が使える foreignObject要素は、グラフィックの描画に、 SVGとは異なる名前空間の要素(HTMLなど)を 用いることができる要素
  32. 32. 0 30 60 90 120 150 渡辺田中高橋鈴木佐藤 例えば、こんなグラフ
  33. 33. 0 30 60 90 渡辺田中高橋鈴木佐藤 <g> <title id="point-sato"">230点</title> <text x="450" y="370">佐藤</text> <rect x="450" y="123" width="70" height="230" role="img" aria-labelledby="point-sato"/> </g>
  34. 34. 0 30 60 90 120 150 渡辺田中高橋鈴木佐藤 このままだと、全部読み上げられるのに 時間がかかってしまう
  35. 35. 0 30 高橋鈴木佐藤 お、なんかこいつ、見出しっぽい
  36. 36. 0 30 渡辺田中高橋鈴木佐藤 <g> <title id="point-sato">86点</title> <foreignObject x="76" y="273" width="40" height="25"> <h3>佐藤</h3> </foreignObject> <rect x="67" y="116 width="55" height="130" role="img" aria-labelledby="point-sato"/> </g>
  37. 37. 0 30 60 90 120 渡辺田中高橋鈴木佐藤 VoiceOver等の 「見出し間スキップ」機能が使える
  38. 38. DEMO
  39. 39. アクセシブルにできるのは分かったが どんな画像に向いているのか?
  40. 40. こんな一枚画像までもがアクセシブルに
  41. 41. 地図もそのままアクセシブルに
  42. 42. 凝ったナビゲーションもアクセシブルに
  43. 43. 今後のブラウザ対応にも期待
  44. 44. SVG Accessibility API Mappings 草案公開 http://www.w3.org/TR/2015/WD-svg-aam-1.0-20150226/
  45. 45. 画像の「中身」を アクセシブルにできること SVGの最大の利点
  46. 46. 松田直樹 ありがとうございました SVG MANIAX Scalable Vector Graphics Vol. 3

×