Tweet
Tweet

Slide 1

Slide 1 text

Talk about having studied a11y jhcoder

Slide 2

Slide 2 text

Index • ಋೖ • ΞΫηγϏϦςΟͷཱͪҐஔ • ΞΫηγϏϦςΟͱ͸ • ΨΠυϥΠϯ • ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ

Slide 3

Slide 3 text

஫ҙɿa11yʹ͍ͭͯ ࠓճ͸jhcoderతʹֶΜͩ͜ͱͷൈਮͰ͢ɻ🙇

Slide 4

Slide 4 text

Ͱ͸·ͣ….

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ͳΜͱͳ͘

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ͦͷલʹ…

Slide 11

Slide 11 text

ʮΞΫηγϏϦςΟʯͷཱͪҐஔ ʮΞΫηγϏϦςΟʯʹࣅͨ֓೦ͷʮϢʔβϏϦςΟʯ΍ʮϢʔ βʔΤΫεϖϦΤϯεʢUXʣʯͱൺֱͯ͠ɺʮΞΫηγϏϦ ςΟʯͷཱͪҐஔΛߟ͑ͯΈΔɻ - UXϋχΧϜߏ଄ - UXϐϥϛου

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

UXϐϥϛου UXΛఏڙ͢ΔՁ஋ఏڙͷઃܭʹ͓͍ͯ׆༻͞ΕΔߏ଄ ίϯςϯπʹʮՁ஋͕͋Δʯ ΑΓ΋·ͣ࠷ॳʹʮΞΫηε͠΍͢ ͍ʯͱ͍͏͜ͱ͕ඞཁɻ by Abraham H. Maslow ref: https://bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ΞΫηγϏϦςΟͱ͸ʁ ΞΫηγϏϦςΟͱ͸ʮ͖ۙͮ΍͢͞ɺར༻͠΍͢͞ʯͱ͍͏ҙຯɻ ΑΓଟ͘ͷਓ΍ঢ়گͰɺ࢖͑ΔΑ͏ʹ͢Δɻͱݴ͏͜ͱɻ > ͍ͭ΋࢖͍ͬͯΔϢʔβʔͰ΋ɺΞΫηε͢ΔλΠϛϯά΍৔ॴʹ Αͬͯ͸࢖͍ͮΒ͞Λ๊͍͑ͯ·͢ɻো֐ऀ΍ߴྸऀɺࢠͲ΋͸ɺ͍ ͭ΋࢖͍ͮΒ͍ͱײ͍ͯ͡Δ͔΋͠Ε·ͤΜɻ ref: https://spindle.ameba.design/principles/accessibility/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ΞΫηγϏϦςΟ͸୲อͨ͠ํ͕ ྑ͍ͷ͸Θ͔ͬͨ🤔

Slide 18

Slide 18 text

ԿΛࢀর͢Ε͹ྑ͍ͷʁ🤗 ΞΫηγϏϦςΟΛ୲อ͢ΔͨΊͷ ΨΠυϥΠϯͱ͔͋Δͷʁ🤔

Slide 19

Slide 19 text

͋Γ·͢☺

Slide 20

Slide 20 text

WCAG ΢ΣϒΞΫηγϏϦςΟʹؔ͢Δੈքతͳج४ʹ΋ͳ͍ͬͯΔΨ ΠυϥΠϯɻ https://www.w3.org/TR/WCAG21/

Slide 21

Slide 21 text

4ͭͷݪଇ - 1. ஌֮Մೳ ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεཁૉ͸ɺར༻ऀ͕஌֮Ͱ͖Δํ๏Ͱఏࣔ͢Δ - 2. ૢ࡞Մೳ ར༻ऀ͕ϢʔβʔΠϯλʔϑΣʔεཁૉ΍φϏήʔγϣϯΛૢ࡞Ͱ͖Δ - 3. ཧղՄೳ ৘ใ΍ϢʔβʔΠϯλʔϑΣʔεͷૢ࡞͕ཧղՄೳͰ͋Δ - 4. ݎ࿚ ٕज़ࢧԉΛؚΉ͞·͟·ͳϢʔβʔΤʔδΣϯτ͕ղऍͰ͖ΔΑ͏े෼ʹݎ࿚Ͱ͋Δ

Slide 22

Slide 22 text

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 ʛ ݱࡏ΍কདྷͷٕज़ࢧԉΛؚΉϢʔβʔΤʔδΣϯτͱͷޓ׵ੑΛ࠷େԽ͢Δ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ྫ Ի੠ͷ੍ޚΛཧղ: Web্ʹ͋ΔԻ੠͕ࣗಈతʹ࠶ੜ͞Εɺ3ඵΑΓ௕͘ଓ͘৔߹ɺͦͷԻ੠ΛҰ࣌ఀࢭຢ ͸ఀࢭ͢ΔϝΧχζϜorγεςϜશମͷԻྔϨϕϧʹӨڹΛ༩͑ͣʹԻྔϨϕϧΛௐ੔ Ͱ͖ΔϝΧχζϜ͕ར༻Ͱ͖Δɻ ྑ͍ྫ) ϖʔδΛ։͍ͨͱ͖ʹɺԻ੠ϑΝΠϧͷ࠶ੜ͕ࣗಈతʹ։࢝͞ΕΔɻ͔͠͠ɺ ར༻ऀ͕ɺͦͷϖʔδͷઌ಄ʹ͋ΔʮԻΛফ͢ʯͱ͍͏ϦϯΫΛબ୒͢Δ͜ͱͰɺͦͷ Ի੠Λఀࢭͤ͞Δ͜ͱ͕Ͱ͖Δɻ ѱ͍ྫ) 3ඵΑΓ΋௕͘Ի੠Λ࠶ੜ͍ͯͯ͠ɺԻ੠ΛࢭΊΔϝΧχζϜ͕ͳ͍ ref: https://waic.jp/docs/WCAG21/Techniques/failures/F23

Slide 25

Slide 25 text

ద߹Ϩϕϧ ֤߲໨Λୡ੒͢ΔΞΫηγϏϦςΟ্ͷॏཁ౓Λࣔ͢ࢦඪɻ ҎԼͷΑ͏ʹϨϕϧAɺϨϕϧAAɺϨϕϧAAAͷ3ͭʹ෼ྨ͞Ε·͢ɻ - ϨϕϧA ࠷௿ݶͷϨϕϧɻୡ੒Ͱ͖͍ͯͳ͍ͱɺεΫϦʔϯϦʔμʔ΍֦େڸͳͲͷࢧԉ ٕज़Λ༻͍ͯ΋ɺαʔϏεΛར༻Ͱ͖ͳ͍ - ϨϕϧAA ΑΓྑ͍Ϩϕϧɻୡ੒Ͱ͖Ε͹ɺࢧԉٕज़ແ͠Ͱ΋αʔϏεΛར༻Ͱ͖Δ͜ͱ͕ ଟ͘ͳΓɺΑΓଟ͘ͷϢʔβʔɾঢ়گͰ࢖͑ΔΑ͏ʹͳΔ - ϨϕϧAAA ΑΓൃలతͳϨϕϧɻୡ੒͢ΔͱΑΓαʔϏεΛར༻͠΍͘͢ͳΔ৔߹͕͋ Δɻ߲໨ͷதʹ͸ୡ੒͕೉͍͠΋ͷ΋͋Δ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

߹ཧత഑ྀͱ͸….ʁ🤔

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ Ex) WebαΠτʹ͓͍ͯɺো֐ऀ͕ଞͷਓͱಉ͡Α͏ʹར༻Ͱ͖ ͳ͔͔ͬͨΒվળͯ͘͠ΕͱݴΘΕͨɻ before: ౒ྗٛ຿ͱ͞Ε͖ͯͨ 👇 after: աॏͳෛ୲ͱͳΒͳ͍ൣғͰɺඞཁ͔ͭ߹ཧతͳௐ੔ɾରԠΛఏ ڙ͢Δ͜ͱ͕ٛ຿Խ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ো֐ऀࠩผղফ๏ͷվਖ਼ͱWebΞΫηγϏϦςΟ Ͱ΋ɺɺ ΞΫηγϏϦςΟ඼࣭ͷνΣοΫ΍ɺνΣοΫ݁Ռʹجͮ͘վળ Λఆظతͳ͍͠ෆఆظʹ࣮ࢪ͍ͯ͠Ε͹ վਖ਼๏ͷࢪߦ೔͕͍ͭͰ΋যΔΑ͏ͳඞཁ͸ແ͍ͬͯ࿩🥰 ΞΫηγϏϦςΟ͕୲อͰ͖͍ͯΔঢ়ଶΛอ͍ͪͨͰ͢Ͷɻ

Slide 33

Slide 33 text

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