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
2. Index • ಋೖ • ΞΫηγϏϦςΟͷཱͪҐஔ • ΞΫηγϏϦςΟͱ͸ • ΨΠυϥΠϯ • ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ
3. ஫ҙɿa11yʹ͍ͭͯ ࠓճ͸jhcoderతʹֶΜͩ͜ͱͷൈਮͰ͢ɻ🙇
4. Ͱ͸·ͣ….
5. ΞΫηγϏϦςΟͬͯ஌ͬͯ·͔͢ʁ
6. ͳΜͱͳ͘
7. ΞΫηγϏϦςΟվળ ʹ ো֐ऀରԠ
9. ͡Ό͋ΞΫηγϏϦςΟͬͯͳΜͧ΍ 🤔
10. ͦͷલʹ…
11. ʮΞΫηγϏϦςΟʯͷཱͪҐஔ ʮΞΫηγϏϦςΟʯʹࣅͨ֓೦ͷʮϢʔβϏϦςΟʯ΍ʮϢʔ βʔΤΫεϖϦΤϯεʢUXʣʯͱൺֱͯ͠ɺʮΞΫηγϏϦ ςΟʯͷཱͪҐஔΛߟ͑ͯΈΔɻ - UXϋχΧϜߏ଄ - UXϐϥϛου
12. UXϋχΧϜߏ଄ UXͷߏ੒ཁૉͷଆ໘ʹ͓͍ͯ΋ɺʮΞΫηγϏϦςΟʯ͕ʮΞΫ ηε͠΍͢͞ʯͱͯ͠ཁૉͷ1ͭͱͯ͠ఆٛ͞Ε͍ͯΔ ʮUXΛߏ੒͢Δ7ͭͷཁૉʯͷߏ੒ਤ by Peter Morville
13. UXϐϥϛου UXΛఏڙ͢ΔՁ஋ఏڙͷઃܭʹ͓͍ͯ׆༻͞ΕΔߏ଄ ίϯςϯπʹʮՁ஋͕͋Δʯ ΑΓ΋·ͣ࠷ॳʹʮΞΫηε͠΍͢ ͍ʯͱ͍͏͜ͱ͕ඞཁɻ by Abraham H. Maslow ref: https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
14. Ͱ͸վΊͯΞΫηγϏϦςΟͱ͸ 🙋
15. ΞΫηγϏϦςΟͱ͸ʁ ΞΫηγϏϦςΟͱ͸ʮ͖ۙͮ΍͢͞ɺར༻͠΍͢͞ʯͱ͍͏ҙຯɻ ΑΓଟ͘ͷਓ΍ঢ়گͰɺ࢖͑ΔΑ͏ʹ͢Δɻͱݴ͏͜ͱɻ > ͍ͭ΋࢖͍ͬͯΔϢʔβʔͰ΋ɺΞΫηε͢ΔλΠϛϯά΍৔ॴʹ Αͬͯ͸࢖͍ͮΒ͞Λ๊͍͑ͯ·͢ɻো֐ऀ΍ߴྸऀɺࢠͲ΋͸ɺ͍ ͭ΋࢖͍ͮΒ͍ͱײ͍ͯ͡Δ͔΋͠Ε·ͤΜɻ ref: https://spindle.ameba.design/principles/accessibility/
16. ͭ·ΓɺશһͷͨΊͷ΋ͷ͕ΞΫηγϏϦςΟͩΑͬͯ࿩
17. ΞΫηγϏϦςΟ͸୲อͨ͠ํ͕ ྑ͍ͷ͸Θ͔ͬͨ🤔
18. ԿΛࢀর͢Ε͹ྑ͍ͷʁ🤗 ΞΫηγϏϦςΟΛ୲อ͢ΔͨΊͷ ΨΠυϥΠϯͱ͔͋Δͷʁ🤔
19. ͋Γ·͢☺
20. WCAG ΢ΣϒΞΫηγϏϦςΟʹؔ͢Δੈքతͳج४ʹ΋ͳ͍ͬͯΔΨ ΠυϥΠϯɻ https://www.w3.org/TR/WCAG21/
21. 4ͭͷݪଇ - 1. ஌֮Մೳ ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεཁૉ͸ɺར༻ऀ͕஌֮Ͱ͖Δํ๏Ͱఏࣔ͢Δ - 2. ૢ࡞Մೳ ར༻ऀ͕ϢʔβʔΠϯλʔϑΣʔεཁૉ΍φϏήʔγϣϯΛૢ࡞Ͱ͖Δ - 3. ཧղՄೳ ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεͷૢ࡞͕ཧղՄೳͰ͋Δ - 4. ݎ࿚ ٕज़ࢧԉΛؚΉ͞·͟·ͳϢʔβʔΤʔδΣϯτ͕ղऍͰ͖ΔΑ͏े෼ʹݎ࿚Ͱ͋Δ
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 ʛ ݱࡏ΍কདྷͷٕज़ࢧԉΛؚΉϢʔβʔΤʔδΣϯτͱͷޓ׵ੑΛ࠷େԽ͢Δ
23. ྫ Web࣮૷: <img> ཁૉͷ alt ଐੑʹɺը૾Λઆ໌͢ΔςΩετΛ ઃఆ͢Δ
24. ྫ Ի੠ͷ੍ޚΛཧղ: Web্ʹ͋ΔԻ੠͕ࣗಈతʹ࠶ੜ͞Εɺ3ඵΑΓ௕͘ଓ͘৔߹ɺͦͷԻ੠ΛҰ࣌ఀࢭຢ ͸ఀࢭ͢ΔϝΧχζϜorγεςϜશମͷԻྔϨϕϧʹӨڹΛ༩͑ͣʹԻྔϨϕϧΛௐ੔ Ͱ͖ΔϝΧχζϜ͕ར༻Ͱ͖Δɻ ྑ͍ྫ) ϖʔδΛ։͍ͨͱ͖ʹɺԻ੠ϑΝΠϧͷ࠶ੜ͕ࣗಈతʹ։࢝͞ΕΔɻ͔͠͠ɺ ར༻ऀ͕ɺͦͷϖʔδͷઌ಄ʹ͋ΔʮԻΛফ͢ʯͱ͍͏ϦϯΫΛબ୒͢Δ͜ͱͰɺͦͷ Ի੠Λఀࢭͤ͞Δ͜ͱ͕Ͱ͖Δɻ ѱ͍ྫ) 3ඵΑΓ΋௕͘Ի੠Λ࠶ੜ͍ͯͯ͠ɺԻ੠ΛࢭΊΔϝΧχζϜ͕ͳ͍ ref: https://waic.jp/docs/WCAG21/Techniques/failures/F23
25. ద߹Ϩϕϧ ֤߲໨Λୡ੒͢ΔΞΫηγϏϦςΟ্ͷॏཁ౓Λࣔ͢ࢦඪɻ ҎԼͷΑ͏ʹϨϕϧAɺϨϕϧAAɺϨϕϧAAAͷ3ͭʹ෼ྨ͞Ε·͢ɻ - ϨϕϧA ࠷௿ݶͷϨϕϧɻୡ੒Ͱ͖͍ͯͳ͍ͱɺεΫϦʔϯϦʔμʔ΍֦େڸͳͲͷࢧԉ ٕज़Λ༻͍ͯ΋ɺαʔϏεΛར༻Ͱ͖ͳ͍ - ϨϕϧAA ΑΓྑ͍Ϩϕϧɻୡ੒Ͱ͖Ε͹ɺࢧԉٕज़ແ͠Ͱ΋αʔϏεΛར༻Ͱ͖Δ͜ͱ͕ ଟ͘ͳΓɺΑΓଟ͘ͷϢʔβʔɾঢ়گͰ࢖͑ΔΑ͏ʹͳΔ - ϨϕϧAAA ΑΓൃలతͳϨϕϧɻୡ੒͢ΔͱΑΓαʔϏεΛར༻͠΍͘͢ͳΔ৔߹͕͋ Δɻ߲໨ͷதʹ͸ୡ੒͕೉͍͠΋ͷ΋͋Δ
26. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ > ো֐ऀࠩผղফ๏͕վਖ਼͞Ε·ͨ͠ʢྩ࿨3೥๏཯ୈ56߸ʣɻ ͜ΕʹΑΓߦ੓ػؔ౳ʹՃ͑ͯࣄۀऀɺͭ·ΓҰൠاۀʹରͯ͠ ΋ɺվਖ਼๏ͷࢪߦޙʹ͸߹ཧత഑ྀͷఏڙ͕ٛ຿෇͚ΒΕ·͢ɻ ref: https://www.mitsue.co.jp/knowledge/column/20210806.html
27. ߹ཧత഑ྀͱ͸….ʁ🤔
28. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ > ʮ߹ཧత഑ྀʯͱ͸ɺো֐ऀ͕ଞͷऀͱͷฏ౳Λجૅͱͯ͠શ ͯͷਓݖٴͼجຊతࣗ༝Λڗ༗͠ɺຢ͸ߦ࢖͢Δ͜ͱΛ֬อ͢Δ ͨΊͷඞཁ͔ͭద౰ͳมߋٴͼௐ੔Ͱ͋ͬͯɺಛఆͷ৔߹ʹ͓͍ ͯඞཁͱ͞ΕΔ΋ͷͰ͋Γɺ͔ͭɺۉߧΛࣦͨ͠ຢ͸ա౓ͷෛ୲ Λ՝͞ͳ͍΋ͷΛ͍͏ɻ ref: https://www.mofa.go.jp/mofaj/gaiko/jinken/index_shogaisha.html
29. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ Ex) WebαΠτʹ͓͍ͯɺো֐ऀ͕ଞͷਓͱಉ͡Α͏ʹར༻Ͱ͖ ͳ͔͔ͬͨΒվળͯ͘͠ΕͱݴΘΕͨɻ before: ౒ྗٛ຿ͱ͞Ε͖ͯͨ 👇 after: աॏͳෛ୲ͱͳΒͳ͍ൣғͰɺඞཁ͔ͭ߹ཧతͳௐ੔ɾରԠΛఏ ڙ͢Δ͜ͱ͕ٛ຿Խ
31. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ ྩ࿨3೥๏཯ୈ56߸͕ެ෍͞Εͨࠓ೥6݄4೔͔Βىࢉͯ͠3೥Λ ௒͑ͳ͍ൣғ಺ʹ͓͍ͯɺ੓ྩͰఆΊΔ೔ͱ͚ͩఆٛ͞Ε͍ͯ Δɻ ͲΜͳʹ஗͘ͳͬͯ΋2024೥6݄4೔·Ͱʹ͸ͱ͍ͬͨײ͡ɻ
32. ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ Ͱ΋ɺɺ ΞΫηγϏϦςΟ඼࣭ͷνΣοΫ΍ɺνΣοΫ݁Ռʹجͮ͘վળ Λఆظతͳ͍͠ෆఆظʹ࣮ࢪ͍ͯ͠Ε͹ վਖ਼๏ͷࢪߦ೔͕͍ͭͰ΋যΔΑ͏ͳඞཁ͸ແ͍ͬͯ࿩🥰 ΞΫηγϏϦςΟ͕୲อͰ͖͍ͯΔঢ়ଶΛอ͍ͪͨͰ͢Ͷɻ
33. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠👋