$30 off During Our Annual Pro Sale. View Details »

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

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

Yuichi Sugiyama
PRO

November 28, 2018
Tweet

More Decks by Yuichi Sugiyama

Other Decks in Technology

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