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

Transcript

1. Accessibleͳ

   ࣮૷ΛٻΊͨΒ

   େมͩͬͨ
   

   View Slide

2. Who am I
   ‱ਿࢁ ༞Ұɹ@oogFranz
   ‱࢓ࣄ಺༰
   •ϓϩάϥϚ
   •εΫϥϜϚελʔ
   •δϟζϕʔγετʢMASHݭָஂʣ
   

   View Slide

3. Who am I
   ‱ਿࢁ ༞Ұɹ@oogFranz
   ‱࢓ࣄ಺༰
   •ϓϩάϥϚ
   •εΫϥϜϚελʔ
   •δϟζϕʔγετʢMASHݭָஂʣ
   

   View Slide

4. ϓϩάϥϚͷཱͪҐஔ
   • →HTMLͷ૊Έཱͯ͸σβΠφʔ
   • PG͸ԿΛ͢Δ͔ʁ
   • →Accessibleͳεςʔτͷ࣮૷
   / /
   A
   

   View Slide

5. • →HTMLͷ૊Έཱͯ͸σβΠφʔ
   • PG͸ԿΛ͢Δ͔ʁ
   • →Accessibleͳεςʔτͷ࣮૷
   A D G
   /
   I
   /
   ϓϩάϥϚͷཱͪҐஔ
   

   View Slide

6. PGͷཱͪҐஔ
   • →HTMLͷ૊Έཱͯ͸σβΠφʔ
   • PG͸ԿΛ͢Δ͔ʁ
   • →Accessibleͳεςʔτͷ࣮૷
   A D G
   /
   I
   /
   ૢ࡞ՄೳͰݎ࿚ͳ6*ͷ࣮૷Λ୲౰
   

   View Slide

7. ࣮ྫ
   • ఱؾ༧ใͰશࠃ130Ҏ্ͷ஍ҬΛબ΂ΔπϦʔ
   

   View Slide

8. ࣮ྫ
   • ఱؾ༧ใͰશࠃ130Ҏ্ͷ஍ҬΛબ΂Δπ
   Ϧʔ
   ΞΫηγϏϦςΟରԠͰ
   ૝ఆ޻਺ͷഒɺ࣮૷ʹ͔͔ͬͯ͠·ͬͨ
   

   View Slide

9. ͳʹʹ͕͔͔͔࣌ؒͬͨ
   • ΩʔϘʔυରԠ
   • State ͱ View ͷ࿈ಈ
   • ಈ࡞֬ೝͷ೉͠͞
   ͜͏Ͱ͖ͯͨΒΑ͔ͬͨɺΛڞ༗͠·͢ʂ
   

   View Slide

10. ΩʔϘʔυରԠ
    

    View Slide

11. ΩʔϘʔυରԠ
    ಈ͖ΛҰͭҰ࣮ͭ૷
    

    View Slide

12. ΩʔϘʔυରԠ
    ಈ͖ΛҰͭҰ࣮ͭ૷
    Ωʔ਺ºૢ࡞ύʔπ෼࣮૷
    ࣮૷ίετ͕Ұؾʹ;͘ΒΉɻɻɻ
    

    View Slide

13. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ
    • ΩʔϘʔυͰͲ͏ಈ͔ͤΔ΂͖͔ɺ

    Λ͋Β͔͡Ί೺Ѳ͢Δ

    https://www.w3.org/WAI/GL/wiki/
    Using_ARIA_trees
    • ΑΓγϯϓϧͳUI͸ͳ͍͔ͷ௥ٻ
    

    View Slide

14. State ͱ Viewͷ࿈ಈ
    id = "region_0"
    aria-label = "๺ւಓ"
    role = "treeitem"
    class = "icon_arrow_close"
    aria-expanded = "false" >
    id = "region_1"
    aria-label = "౦๺”
    role = "treeitem"
    class = "icon_arrow_open"
    aria-expanded = "true">
    

    View Slide

15. State ͱ Viewͷ࿈ಈ
    id = "region_0"
    aria-label = "๺ւಓ"
    role = "treeitem"
    class = "icon_arrow_close"
    aria-expanded = "false" >
    id = "region_1"
    aria-label = "౦๺”
    role = "treeitem"
    class = "icon_arrow_open"
    aria-expanded = "true">
    4UBUFʹ࿈ಈͯ͠7JFX༻ʹDMBTTΛ੾Γସ͑
    

    View Slide

16. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ
    • State ͱ View = ϓϩάϥϚʔ ͱ σβΠφʔ
    • σβΠφʔͱ࣮૷Λҙࣝͨ͠Viewͷ࡞੒
    • aria-expandedΛCSSηϨΫλʹ࢖͏

    ex.) li[aria-expanded=“true”]
    

    View Slide

17. ಈ࡞֬ೝͷ೉͠͞
    • ͏·͘ಈ͔ͳ͍࣌ʹԿͷ໰୊ͳͷ͔Θ͔Βͳ͍
    • HTML͕ؒҧ͍ͬͯΔʁ
    • ϒϥ΢β͕ରԠ͍ͯ͠ͳ͍ʁ
    • ࢧԉٕज़͕ະରԠʁ
    • NVDA + ChromeͰಈ͚͘ͲVoiceOver + Safari

    ͩͱಡΈ্͛ΒΕͳ͍ͱ͔͟Βʢٯ΋·ͨવΓʣ
    

    View Slide

18. ͜͏Ͱ͖ͯͨΒΑ͔ͬͨ
    • W3Cͷ࣮૷ྫͰ·ͣಈ࡞νΣοΫ
    • ϒϥ΢β/ࢧԉٕज़ͷ໰୊Λ͸΍ΊʹΩϟον͢Δ
    • ΘΓ͖Γେࣄ
    

    View Slide

19. ·ͱΊ
    • ϦονͳUI͸༻๏༻ྔΛकͬͯ࢖͏
    • ΩʔϘʔυରԠ͸೦ೖΓʹ
    • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠
    • ΘΓ͖Γେࣄ
    

    View Slide