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͸༻๏༻ྔΛकͬͯ࢖͏ • ΩʔϘʔυରԠ͸೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ