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.

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