Contenu connexe Similaire à HTML5 と SVG で考える、これからの画像アクセシビリティ (20) HTML5 と SVG で考える、これからの画像アクセシビリティ2. 松 田 直 樹
CCO, Web Designer
6. path 要素 line 要素 rect 要素
circle 要素 ellipse 要素 polygon 要素 image 要素
text 要素
Lorem
ipsum
dolor
13. JPEG や PNG の代替テキスト
alt="ハンバーガー"
longdesc="http://
example.com/desc1"
15. SVG の代替テキスト
title 要素 / desc 要素
それぞれの コンテナ要素 や グラフィックス要素 には個別に、
desc 要素, またはテキストのみの説明を与える title 要素,
あるいはそれらの両方を指定することができる。
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. <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>
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. <svg viewBox="0 0 100 100"
role="img"
aria-labelledby="title desc">
<title id="title">ハンバーガー</title>
<desc id="desc">トマトとレタス、チーズのハ
ンバーガーのイラスト</desc>
…
</svg>
SVG のスクリーンリーダー対応
ハンバーガー トマトとレタス、チーズのハンバーガーのイラスト イメージ
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. 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>
四角 黒い正方形 イメージ
丸 黒い正円 イメージ
三角 黒い正三角形 イメージ
星形 黒い星 イメージ
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)