Tweet
Tweet

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