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

Talk about having studied a11y.

jhcoder
October 29, 2022

Talk about having studied a11y.

This is a compilation of what jhcoder (the presenter) learned about a11y because he felt he had to learn about it. a11y has a wide range of knowledge, principles and guidelines, some of which are excerpted in this document.

jhcoder

October 29, 2022
Tweet

More Decks by jhcoder

Other Decks in Programming

Transcript

  1. Talk about having


    studied a11y
    jhcoder

    View Slide

  2. Index
    • ಋೖ


    • ΞΫηγϏϦςΟͷཱͪҐஔ


    • ΞΫηγϏϦςΟͱ͸


    • ΨΠυϥΠϯ


    • ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ

    View Slide

  3. ஫ҙɿa11yʹ͍ͭͯ


    ࠓճ͸jhcoderతʹֶΜͩ͜ͱͷൈਮͰ͢ɻ🙇

    View Slide

  4. Ͱ͸·ͣ….

    View Slide

  5. ΞΫηγϏϦςΟͬͯ஌ͬͯ·͔͢ʁ

    View Slide

  6. ͳΜͱͳ͘

    View Slide

  7. ΞΫηγϏϦςΟվળ ʹ ো֐ऀରԠ

    View Slide

  8. View Slide

  9. ͡Ό͋ΞΫηγϏϦςΟͬͯͳΜͧ΍ 🤔

    View Slide

  10. ͦͷલʹ…

    View Slide

  11. ʮΞΫηγϏϦςΟʯͷཱͪҐஔ
    ʮΞΫηγϏϦςΟʯʹࣅͨ֓೦ͷʮϢʔβϏϦςΟʯ΍ʮϢʔ
    βʔΤΫεϖϦΤϯεʢUXʣʯͱൺֱͯ͠ɺʮΞΫηγϏϦ
    ςΟʯͷཱͪҐஔΛߟ͑ͯΈΔɻ


    - UXϋχΧϜߏ଄


    - UXϐϥϛου

    View Slide

  12. UXϋχΧϜߏ଄
    UXͷߏ੒ཁૉͷଆ໘ʹ͓͍ͯ΋ɺʮΞΫηγϏϦςΟʯ͕ʮΞΫ
    ηε͠΍͢͞ʯͱͯ͠ཁૉͷ1ͭͱͯ͠ఆٛ͞Ε͍ͯΔ


    ʮUXΛߏ੒͢Δ7ͭͷཁૉʯͷߏ੒ਤ by Peter Morville

    View Slide

  13. UXϐϥϛου
    UXΛఏڙ͢ΔՁ஋ఏڙͷઃܭʹ͓͍ͯ׆༻͞ΕΔߏ଄


    ίϯςϯπʹʮՁ஋͕͋Δʯ ΑΓ΋·ͣ࠷ॳʹʮΞΫηε͠΍͢
    ͍ʯͱ͍͏͜ͱ͕ඞཁɻ


    by Abraham H. Maslow


    ref: https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html


    View Slide

  14. Ͱ͸վΊͯΞΫηγϏϦςΟͱ͸ 🙋

    View Slide

  15. ΞΫηγϏϦςΟͱ͸ʁ
    ΞΫηγϏϦςΟͱ͸ʮ͖ۙͮ΍͢͞ɺར༻͠΍͢͞ʯͱ͍͏ҙຯɻ


    ΑΓଟ͘ͷਓ΍ঢ়گͰɺ࢖͑ΔΑ͏ʹ͢Δɻͱݴ͏͜ͱɻ


    > ͍ͭ΋࢖͍ͬͯΔϢʔβʔͰ΋ɺΞΫηε͢ΔλΠϛϯά΍৔ॴʹ
    Αͬͯ͸࢖͍ͮΒ͞Λ๊͍͑ͯ·͢ɻো֐ऀ΍ߴྸऀɺࢠͲ΋͸ɺ͍
    ͭ΋࢖͍ͮΒ͍ͱײ͍ͯ͡Δ͔΋͠Ε·ͤΜɻ


    ref: https://spindle.ameba.design/principles/accessibility/

    View Slide

  16. ͭ·ΓɺશһͷͨΊͷ΋ͷ͕ΞΫηγϏϦςΟͩΑͬͯ࿩

    View Slide

  17. ΞΫηγϏϦςΟ͸୲อͨ͠ํ͕


    ྑ͍ͷ͸Θ͔ͬͨ🤔

    View Slide

  18. ԿΛࢀর͢Ε͹ྑ͍ͷʁ🤗


    ΞΫηγϏϦςΟΛ୲อ͢ΔͨΊͷ


    ΨΠυϥΠϯͱ͔͋Δͷʁ🤔

    View Slide

  19. ͋Γ·͢☺

    View Slide

  20. WCAG
    ΢ΣϒΞΫηγϏϦςΟʹؔ͢Δੈքతͳج४ʹ΋ͳ͍ͬͯΔΨ
    ΠυϥΠϯɻ


    https://www.w3.org/TR/WCAG21/

    View Slide

  21. 4ͭͷݪଇ
    - 1. ஌֮Մೳ


    ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεཁૉ͸ɺར༻ऀ͕஌֮Ͱ͖Δํ๏Ͱఏࣔ͢Δ


    - 2. ૢ࡞Մೳ


    ར༻ऀ͕ϢʔβʔΠϯλʔϑΣʔεཁૉ΍φϏήʔγϣϯΛૢ࡞Ͱ͖Δ


    - 3. ཧղՄೳ


    ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεͷૢ࡞͕ཧղՄೳͰ͋Δ


    - 4. ݎ࿚


    ٕज़ࢧԉΛؚΉ͞·͟·ͳϢʔβʔΤʔδΣϯτ͕ղऍͰ͖ΔΑ͏े෼ʹݎ࿚Ͱ͋Δ


    View Slide

  22. 12ͷΨΠυϥΠϯ
    1.1 ʛ ඇςΩετίϯςϯπʹ͸ςΩετʹΑΔ୅ସΛఏڙ͢Δ


    1.2 ʛ ࣌ؒʹґଘ͢ΔϝσΟΞ͸୅ସίϯςϯπΛఏڙ͢Δ


    1.3 ʛ ৘ใ΍ߏ଄ΛଛͳΘͣʹ͞·͟·ͳํ๏ͰఏڙͰ͖ΔΑ͏ʹίϯςϯπΛ੍࡞͢Δ


    1.4 ʛ ίϯςϯπ͸ར༻ऀ͕ݟ΍͘͢ฉ͖΍͍͢΋ͷʹ͢Δ


    2.1 ʛ ͢΂ͯͷػೳ͕ΩʔϘʔυ͔Βར༻Ͱ͖ΔΑ͏ʹ͢Δ


    2.2 ʛ ར༻ऀ͕ίϯςϯπΛಡΈɺ࢖༻͢ΔͨΊͷ࣌ؒΛे෼ʹఏڙ͢Δ


    2.3 ʛ ൃ࡞ΛҾ͖ى͜͢Α͏ͳίϯςϯπΛઃܭ͠ͳ͍


    2.4 ʛ ར༻ऀ͕ඞཁͳίϯςϯπΛ୳͠ग़͢ɺݱࡏ஍Λಛఆ͢Δͷʹ໾ཱͭखஈΛఏڙ͢Δ


    3.1 ʛ ςΩετίϯςϯπΛಡΈ΍͘͢ཧղՄೳʹ͢Δ


    3.2 ʛ ΢Σϒϖʔδͷදࣔ΍ڍಈΛ༧ଌՄೳʹ͢Δ


    3.3 ʛ ར༻ऀͷؒҧ͍Λ๷ࢭ͠ɺमਖ਼Λࢧԉ͢Δ


    4.1 ʛ ݱࡏ΍কདྷͷٕज़ࢧԉΛؚΉϢʔβʔΤʔδΣϯτͱͷޓ׵ੑΛ࠷େԽ͢Δ


    View Slide


  23. Web࣮૷: ཁૉͷ alt ଐੑʹɺը૾Λઆ໌͢ΔςΩετΛ
    ઃఆ͢Δ


    View Slide


  24. Ի੠ͷ੍ޚΛཧղ:


    Web্ʹ͋ΔԻ੠͕ࣗಈతʹ࠶ੜ͞Εɺ3ඵΑΓ௕͘ଓ͘৔߹ɺͦͷԻ੠ΛҰ࣌ఀࢭຢ
    ͸ఀࢭ͢ΔϝΧχζϜorγεςϜશମͷԻྔϨϕϧʹӨڹΛ༩͑ͣʹԻྔϨϕϧΛௐ੔
    Ͱ͖ΔϝΧχζϜ͕ར༻Ͱ͖Δɻ


    ྑ͍ྫ) ϖʔδΛ։͍ͨͱ͖ʹɺԻ੠ϑΝΠϧͷ࠶ੜ͕ࣗಈతʹ։࢝͞ΕΔɻ͔͠͠ɺ
    ར༻ऀ͕ɺͦͷϖʔδͷઌ಄ʹ͋ΔʮԻΛফ͢ʯͱ͍͏ϦϯΫΛબ୒͢Δ͜ͱͰɺͦͷ
    Ի੠Λఀࢭͤ͞Δ͜ͱ͕Ͱ͖Δɻ


    ѱ͍ྫ) 3ඵΑΓ΋௕͘Ի੠Λ࠶ੜ͍ͯͯ͠ɺԻ੠ΛࢭΊΔϝΧχζϜ͕ͳ͍


    ref: https://waic.jp/docs/WCAG21/Techniques/failures/F23


    View Slide

  25. ద߹Ϩϕϧ
    ֤߲໨Λୡ੒͢ΔΞΫηγϏϦςΟ্ͷॏཁ౓Λࣔ͢ࢦඪɻ


    ҎԼͷΑ͏ʹϨϕϧAɺϨϕϧAAɺϨϕϧAAAͷ3ͭʹ෼ྨ͞Ε·͢ɻ


    - ϨϕϧA


    ࠷௿ݶͷϨϕϧɻୡ੒Ͱ͖͍ͯͳ͍ͱɺεΫϦʔϯϦʔμʔ΍֦େڸͳͲͷࢧԉ
    ٕज़Λ༻͍ͯ΋ɺαʔϏεΛར༻Ͱ͖ͳ͍


    - ϨϕϧAA


    ΑΓྑ͍Ϩϕϧɻୡ੒Ͱ͖Ε͹ɺࢧԉٕज़ແ͠Ͱ΋αʔϏεΛར༻Ͱ͖Δ͜ͱ͕
    ଟ͘ͳΓɺΑΓଟ͘ͷϢʔβʔɾঢ়گͰ࢖͑ΔΑ͏ʹͳΔ


    - ϨϕϧAAA


    ΑΓൃలతͳϨϕϧɻୡ੒͢ΔͱΑΓαʔϏεΛར༻͠΍͘͢ͳΔ৔߹͕͋
    Δɻ߲໨ͷதʹ͸ୡ੒͕೉͍͠΋ͷ΋͋Δ

    View Slide

  26. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
    > ো֐ऀࠩผղফ๏͕վਖ਼͞Ε·ͨ͠ʢྩ࿨3೥๏཯ୈ56߸ʣɻ
    ͜ΕʹΑΓߦ੓ػؔ౳ʹՃ͑ͯࣄۀऀɺͭ·ΓҰൠاۀʹରͯ͠
    ΋ɺվਖ਼๏ͷࢪߦޙʹ͸߹ཧత഑ྀͷఏڙ͕ٛ຿෇͚ΒΕ·͢ɻ


    ref: https://www.mitsue.co.jp/knowledge/column/20210806.html


    View Slide

  27. ߹ཧత഑ྀͱ͸….ʁ🤔

    View Slide

  28. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
    > ʮ߹ཧత഑ྀʯͱ͸ɺো֐ऀ͕ଞͷऀͱͷฏ౳Λجૅͱͯ͠શ
    ͯͷਓݖٴͼجຊతࣗ༝Λڗ༗͠ɺຢ͸ߦ࢖͢Δ͜ͱΛ֬อ͢Δ
    ͨΊͷඞཁ͔ͭద౰ͳมߋٴͼௐ੔Ͱ͋ͬͯɺಛఆͷ৔߹ʹ͓͍
    ͯඞཁͱ͞ΕΔ΋ͷͰ͋Γɺ͔ͭɺۉߧΛࣦͨ͠ຢ͸ա౓ͷෛ୲
    Λ՝͞ͳ͍΋ͷΛ͍͏ɻ


    ref: https://www.mofa.go.jp/mofaj/gaiko/jinken/index_shogaisha.html


    View Slide

  29. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
    Ex) WebαΠτʹ͓͍ͯɺো֐ऀ͕ଞͷਓͱಉ͡Α͏ʹར༻Ͱ͖
    ͳ͔͔ͬͨΒվળͯ͘͠ΕͱݴΘΕͨɻ


    before:


    ౒ྗٛ຿ͱ͞Ε͖ͯͨ


    👇


    after:


    աॏͳෛ୲ͱͳΒͳ͍ൣғͰɺඞཁ͔ͭ߹ཧతͳௐ੔ɾରԠΛఏ
    ڙ͢Δ͜ͱ͕ٛ຿Խ

    View Slide

  30. View Slide

  31. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
    ྩ࿨3೥๏཯ୈ56߸͕ެ෍͞Εͨࠓ೥6݄4೔͔Βىࢉͯ͠3೥Λ
    ௒͑ͳ͍ൣғ಺ʹ͓͍ͯɺ੓ྩͰఆΊΔ೔ͱ͚ͩఆٛ͞Ε͍ͯ
    Δɻ


    ͲΜͳʹ஗͘ͳͬͯ΋2024೥6݄4೔·Ͱʹ͸ͱ͍ͬͨײ͡ɻ

    View Slide

  32. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
    Ͱ΋ɺɺ


    ΞΫηγϏϦςΟ඼࣭ͷνΣοΫ΍ɺνΣοΫ݁Ռʹجͮ͘վળ
    Λఆظతͳ͍͠ෆఆظʹ࣮ࢪ͍ͯ͠Ε͹


    վਖ਼๏ͷࢪߦ೔͕͍ͭͰ΋যΔΑ͏ͳඞཁ͸ແ͍ͬͯ࿩🥰


    ΞΫηγϏϦςΟ͕୲อͰ͖͍ͯΔঢ়ଶΛอ͍ͪͨͰ͢Ͷɻ


    View Slide

  33. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠👋

    View Slide