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

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

F075c5dfe92334b5031d4da5dc0c9251?s=128

Yuichi Sugiyama

November 28, 2018
Tweet

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