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