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

Transcript

1. SVG MANIAX Scalable Vector Graphics Vol. 3
2. দ ా ௚ थ CCO, Web Designer
3. SVGͷಛ௃ͬͯʁ
4. ը૾
   
   
   Ͱ͋Γɺ
   
   
   จॻ
   
   
   Ͱ͋Δ
5. 9.-จॻ͔ͩΒ
   ͢΂ͯͷਤܗ΍ը૾͸
   ཁૉ
   ͱͳΔ
6. path ཁૉ line ཁૉ rect ཁૉ circle ཁૉ ellipse ཁૉ polygon ཁૉ image ཁૉ text ཁૉ Lorem ipsum dolor
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. จॻͰ͋Δͱ͍͏͜ͱ͸
   ςΩετϊʔυΛؚΊΔ͜ͱ͕Ͱ͖Δ ϚγϯϦʔμϒϧ ΞΫηγϏϦςΟΛ֬อͰ͖Δ
9. HTML5 + inline SVG ʹ͓͚Δ
   ΞΫηγϏϦςΟ
10. SVGͷ࠷େͷར఺ʁ
11. ը૾ͷʮத਎ʯΛ
    ΞΫηγϒϧʹͰ͖Δ
12. ը૾ͱ͍͑͹ɺ୅ସςΩετ
13. +1&(
    ΍
    1/(
    ͷ୅ସςΩετ alt="ハンバーガー" longdesc="http:// example.com/desc1"
14. 47(
    ͷ୅ସʁςΩετ <svg viewBox="0 0 100 100"> <title> ハンバーガー </title> <desc> ハンバーガーのフラットな イラストアイコン </desc> … </svg>
15. 47(
    ͷ୅ସςΩετ title ཁૉ / desc ཁૉ ͦΕͧΕͷ
    ίϯςφཁૉ
    ΍
    άϥϑΟοΫεཁૉ
    ʹ͸ݸผʹɺ
    EFTD
    ཁૉ
    ·ͨ͸ςΩετͷΈͷઆ໌Λ༩͑Δ
    UJUMF
    ཁૉɼ
    ͋Δ͍͸ͦΕΒͷ྆ํΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δɻ
16. 47(಺ͷͦΕͧΕͷཁૉʹ΋࢖͑Δ <g> <title>ハンバーガー</title> <desc>…</desc> </g> <g> <title>ホットドッグ</title> <desc>…</desc> </g> <g> <title>ドーナッツ</title> <desc>…</desc> </g>
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>
19. Ͱ΋ɺUJUMF
    ཁૉͱ
    EFTDཁૉɺ
    εΫϦʔϯϦʔμʔ͕ಡΜͰ͘Εͳ͍
20. 47(
    ͷεΫϦʔϯϦʔμʔରԠ role ଐੑ / aria-* ଐੑ Λ࢖͍·͠ΐ͏ 8FCίϯςϯπ͓Αͼ8FCΞϓϦέʔγϣϯɺ
    ಛʹ3*"Λ
    ͋ΒΏΔϢʔβʹͱͬͯΑΓΞΫηγϒϧʹ͢Δ΋ͷ
21. 47(
    ͷεΫϦʔϯϦʔμʔରԠ role ଐੑ aria-* ଐੑ ཁૉͷʮ໾ׂʯΛ ఆٛ͢Δ ཁૉͷʮঢ়ଶʯΛ ఆٛ͢Δ
22. <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">ハンバーガー</title> <desc id="desc">ハンバーガーのフラットなイ ラストアイコン</desc> … </svg> SPMF
    ͱ
    BSJBMBCFMMFECZ
    ͰରԠ͠·͠ΐ͏
23. <svg viewBox="0 0 100 100" role="img" aria-labelledby="title desc"> <title id="title">ハンバーガー</title> <desc id="desc">トマトとレタス、チーズのハ ンバーガーのイラスト</desc> … </svg> 47(
    ͷεΫϦʔϯϦʔμʔରԠ ϋϯόʔΨʔɹτϚτͱϨλεɺνʔζͷϋϯόʔΨʔͷΠϥετɹΠϝʔδ
24. 47(
    ͷεΫϦʔϯϦʔμʔରԠ <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. 47(
    ͷεΫϦʔϯϦʔμʔରԠ <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. w 47(ͷUJUMFཁૉ͸ɺ࢓༷ॻͷͱ͓Γͩͱɺ IPWFSͰπʔϧνοϓදࣔ͞ΕΔ΂͖
 ʢ6"ʹΑΔ࣮૷ʣ
    w TWH
    ͱ͍͏୯ମͷ47(ϑΝΠϧͰ͸ɺ·ͬ ͨ͘εΫϦʔϯϦʔμʔͰಡ·Εͳ͍ খωλ
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. ಠཱͨ͠
    47(
    จॻͷ
    ࠷΋֎ଆͷ
    TWH
    ཁૉ
    ʹର͠
    ৗʹɺ
    UJUMF
    ཁૉΛࢠཁૉͱͯ͠༩͑Δ΂͖Ͱ͋Δ http://www.w3.org/TR/SVG/struct.html#DescriptionAndTitleElements Scalable Vector Graphics (SVG) 1.1 (Second Edition)
28. ৄࡉ͸ૣ઒͞Μͷϒϩάʹͯ http://blog.e-riverstyle.com/2014/12/svg.html
29. 47(ͷதͰ)5.-Λ࢖͏
30. 47(ͷதͰ
    ʮݟग़͠ʯతͳςΩετΛ࢖͍͍ͨ
31. 47(
    ͷதͰ)5.-Λ࢖͏ foreignObject ཁૉ + HTMLͷཁૉ ͕࢖͑Δ GPSFJHO0CKFDUཁૉ͸ɺάϥϑΟοΫͷඳըʹɺ
    47(ͱ͸ҟͳΔ໊લۭؒͷཁૉʢ)5.-ͳͲʣΛ
    ༻͍Δ͜ͱ͕Ͱ͖Δཁૉ
32. 0 30 60 90 120 150 ౉ล ాத ߴڮ ླ໦ ࠤ౻ ྫ͑͹ɺ͜Μͳάϥϑ
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. 0 30 60 90 120 150 ౉ล ాத ߴڮ ླ໦ ࠤ౻ ͜ͷ··ͩͱɺશ෦ಡΈ্͛ΒΕΔͷʹ
    ͕͔͔࣌ؒͬͯ͠·͏
35. 0 30 ߴڮ ླ໦ ࠤ౻ ͓ɺͳΜ͔͍ͭ͜ɺݟग़ͬ͠Ά͍
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. 0 30 60 90 120 ౉ล ాத ߴڮ ླ໦ ࠤ౻ 7PJDF0WFS౳ͷ
    ʮݟग़ؒ͠εΩοϓʯػೳ͕࢖͑Δ
38. DEMO
39. ΞΫηγϒϧʹͰ͖Δͷ͸෼͔͕ͬͨ
    ͲΜͳը૾ʹ޲͍͍ͯΔͷ͔ʁ
40. ͜ΜͳҰຕը૾·Ͱ΋͕ΞΫηγϒϧʹ
41. ஍ਤ΋ͦͷ··ΞΫηγϒϧʹ
42. ڽͬͨφϏήʔγϣϯ΋ΞΫηγϒϧʹ
43. ࠓޙͷϒϥ΢βରԠʹ΋ظ଴
44. SVG Accessibility API Mappings ૲Ҋެ։ http://www.w3.org/TR/2015/WD-svg-aam-1.0-20150226/
45. ը૾ͷʮத਎ʯΛ
    ΞΫηγϒϧʹͰ͖Δ͜ͱ SVGͷ࠷େͷར఺
46. দా௚थ ͋Γ͕ͱ͏͍͟͝·ͨ͠ SVG MANIAX Scalable Vector Graphics Vol. 3