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

by Yuichi Sugiyama

Slide 1

Slide 1 text

Accessibleͳ  ࣮૷ΛٻΊͨΒ  େมͩͬͨ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ΩʔϘʔυରԠ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • ΩʔϘʔυͰͲ͏ಈ͔ͤΔ΂͖͔ɺ  Λ͋Β͔͡Ί೺Ѳ͢Δ  https://www.w3.org/WAI/GL/wiki/ Using_ARIA_trees • ΑΓγϯϓϧͳUI͸ͳ͍͔ͷ௥ٻ

Slide 14

Slide 14 text

State ͱ Viewͷ࿈ಈ

Slide 15

Slide 15 text

State ͱ Viewͷ࿈ಈ

4UBUFʹ࿈ಈͯ͠7JFX༻ʹDMBTTΛ੾Γସ͑

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ಈ࡞֬ೝͷ೉͠͞ • ͏·͘ಈ͔ͳ͍࣌ʹԿͷ໰୊ͳͷ͔Θ͔Βͳ͍ • HTML͕ؒҧ͍ͬͯΔʁ • ϒϥ΢β͕ରԠ͍ͯ͠ͳ͍ʁ • ࢧԉٕज़͕ະରԠʁ • NVDA + ChromeͰಈ͚͘ͲVoiceOver + Safari  ͩͱಡΈ্͛ΒΕͳ͍ͱ͔͟Βʢٯ΋·ͨવΓʣ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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