Accessible な実装を求めたら大変だった

Transcript

1. Accessibleͳ
 ࣮૷ΛٻΊͨΒ
 େมͩͬͨ
2. Who am I ‱ਿࢁ ༞Ұɹ@oogFranz ‱࢓ࣄ಺༰ •ϓϩάϥϚ •εΫϥϜϚελʔ •δϟζϕʔγετʢMASHݭָஂʣ
3. Who am I ‱ਿࢁ ༞Ұɹ@oogFranz ‱࢓ࣄ಺༰ •ϓϩάϥϚ •εΫϥϜϚελʔ •δϟζϕʔγετʢMASHݭָஂʣ
4. ϓϩάϥϚͷཱͪҐஔ • →HTMLͷ૊Έཱͯ͸σβΠφʔ • PG͸ԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮૷ / / A
5. • →HTMLͷ૊Έཱͯ͸σβΠφʔ • PG͸ԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮૷ A D G / I / ϓϩάϥϚͷཱͪҐஔ
6. PGͷཱͪҐஔ • →HTMLͷ૊Έཱͯ͸σβΠφʔ • PG͸ԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮૷ A D G / I / ૢ࡞ՄೳͰݎ࿚ͳ6*ͷ࣮૷Λ୲౰
7. ࣮ྫ • ఱؾ༧ใͰશࠃ130Ҏ্ͷ஍ҬΛબ΂ΔπϦʔ
8. ࣮ྫ • ఱؾ༧ใͰશࠃ130Ҏ্ͷ஍ҬΛબ΂Δπ Ϧʔ ΞΫηγϏϦςΟରԠͰ
   ૝ఆ޻਺ͷഒɺ࣮૷ʹ͔͔ͬͯ͠·ͬͨ
9. ͳʹʹ͕͔͔͔࣌ؒͬͨ • ΩʔϘʔυରԠ • State ͱ View ͷ࿈ಈ • ಈ࡞֬ೝͷ೉͠͞ ͜͏Ͱ͖ͯͨΒΑ͔ͬͨɺΛڞ༗͠·͢ʂ
10. ΩʔϘʔυରԠ
11. ΩʔϘʔυରԠ ಈ͖ΛҰͭҰ࣮ͭ૷
12. ΩʔϘʔυରԠ ಈ͖ΛҰͭҰ࣮ͭ૷ Ωʔ਺
    º
    ૢ࡞ύʔπ෼࣮૷
    ࣮૷ίετ͕Ұؾʹ;͘ΒΉɻɻɻ
13. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • ΩʔϘʔυͰͲ͏ಈ͔ͤΔ΂͖͔ɺ
 Λ͋Β͔͡Ί೺Ѳ͢Δ
 https://www.w3.org/WAI/GL/wiki/ Using_ARIA_trees • ΑΓγϯϓϧͳUI͸ͳ͍͔ͷ௥ٻ
14. State ͱ Viewͷ࿈ಈ <li id = "region_0" aria-label = "๺ւಓ" role = "treeitem" class = "icon_arrow_close" aria-expanded = "false" > <li id = "region_1" aria-label = "౦๺” role = "treeitem" class = "icon_arrow_open" aria-expanded = "true">
15. State ͱ Viewͷ࿈ಈ <li id = "region_0" aria-label = "๺ւಓ" role = "treeitem" class = "icon_arrow_close" aria-expanded = "false" > <li id = "region_1" aria-label = "౦๺” role = "treeitem" class = "icon_arrow_open" aria-expanded = "true"> 4UBUFʹ࿈ಈͯ͠7JFX༻ʹDMBTTΛ੾Γସ͑
16. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • State ͱ View = ϓϩάϥϚʔ ͱ σβΠφʔ • σβΠφʔͱ࣮૷Λҙࣝͨ͠Viewͷ࡞੒ • aria-expandedΛCSSηϨΫλʹ࢖͏
 ex.) li[aria-expanded=“true”]
17. ಈ࡞֬ೝͷ೉͠͞ • ͏·͘ಈ͔ͳ͍࣌ʹԿͷ໰୊ͳͷ͔Θ͔Βͳ͍ • HTML͕ؒҧ͍ͬͯΔʁ • ϒϥ΢β͕ରԠ͍ͯ͠ͳ͍ʁ • ࢧԉٕज़͕ະରԠʁ • NVDA + ChromeͰಈ͚͘ͲVoiceOver + Safari
 ͩͱಡΈ্͛ΒΕͳ͍ͱ͔͟Βʢٯ΋·ͨવΓʣ
18. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • W3Cͷ࣮૷ྫͰ·ͣಈ࡞νΣοΫ • ϒϥ΢β/ࢧԉٕज़ͷ໰୊Λ͸΍ΊʹΩϟον͢Δ • ΘΓ͖Γେࣄ
19. ·ͱΊ • ϦονͳUI͸༻๏༻ྔΛकͬͯ࢖͏ • ΩʔϘʔυରԠ͸೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ