Vue.js でアクセシブルなコンポーネントをつくるために / To make accessible components in Vue.js

by Okuto Oyama

Slide 1

Slide 1 text

Vue.js Ͱ   ΞΫηγϒϧͳ ίϯϙʔωϯτΛͭ͘ΔͨΊʹ Vue Fes Japan Online 2022 - 2022/10/16

Slide 2

Slide 2 text

Vue.js Ͱ   ΞΫηγϒϧͳ ίϯϙʔωϯτΛͭ͘ΔͨΊʹ Vue Fes Japan Online 2022 - 2022/10/16 ͜Ε͔ΒʮVue.js ͰΞΫηγϒϧͳίϯϙʔωϯτΛͭ͘ΔͨΊʹʯ ͱ͍͏λΠτϧͰൃදΛ͍͖ͤͯͨͩ͞·͢ɻΑΖ͓͘͠ئ͍͠·͢ɻ

Slide 3

Slide 3 text

͸͡Ίʹ ࠷ॳʹࣗݾ঺հͰ͢ɻ

Slide 4

Slide 4 text

● ΍·ͷ͘ ● he / him ● Frontend Designer ● 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ ΍·ͷ͘ͱਃ͠·͢ɻWeb σβΠφʔͱͯ͠ಇ͖ग़ͯ͠ɺϚʔΫΞοϓΤϯδχΞͱͯ͠ຊ֨త ʹ Web ٕज़ʹ৮Ε͸͡ΊɺΞΫηγϏϦςΟͷ෼໺ʹؔ৺ΛߴΊ͍͖ͯ·ͨ͠ɻ

Slide 5

Slide 5 text

● ΍·ͷ͘ ● he / him ● Frontend Designer ● 🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ ݱࡏ͸ࣄۀձࣾʹॴଐ͠ɺWeb ඪ४ͷٕज़Λ׆༻ͯ͠ ϢʔβʔମݧΛ޲্͍͖͍ͤͯͨ͞ͱߟ͍͑ͯΔऀͰ͢ɻ

Slide 6

Slide 6 text

Vue.js ͱΞΫηγϏϦςΟ ࠓճͷ Vue Fes Japan Online 2022 Ͱ͸ Vue.js ͱΞΫηγϏϦςΟʹ ·ͭΘΔςʔϚͰൃද͍ͤͯͨͩ͘͞ͷͰ͕͢ɺ

Slide 7

Slide 7 text

Vue.js ͱΞΫηγϏϦςΟ ͸͡Ίʹɺͳͥ͜ͷςʔϚͰൃද͢Δͷ͔Λઆ໌͠·͢ɻ

Slide 8

Slide 8 text

Vue.js ͱΞΫηγϏϦςΟ ͦΕ͸ Vue.js Ͱͷ։ൃʹ͓͍ͯ ΞΫηγϏϦςΟΛߟྀ͢Δػձ͕গͳ͍ͷͰ͸ͳ͍͔ͱࢥ͔ͬͨΒͰ͢ɻ

Slide 9

Slide 9 text

♿ ΞΫηγϏϦςΟʹ͍ͭͯ؆୯ʹઆ໌͢Δͱɺ୭΋͕৘ใ΁ΞΫηεͰ͖ΔΑ͏ʹ͢Δߟ͑ํ ͰɺWeb ʹ͓͍ͯͦͷߟ͑ํΛ࣮ફ͢Δͷ͕ Web ΞΫηγϏϦςΟͱ͍͏΋ͷͰ͢ɻ

Slide 10

Slide 10 text

࠷ۙͷϑϩϯτΤϯυ։ൃʹ͓͍ͯɺ͜͜ʹ஫ྗͰ͖Δ͜ͱ͸ αΠτ΍ϓϩμΫτͷՁ஋෇͚ɺଞͱͷࠩผԽ͕Ͱ͖ΔྖҬʹͳ͖͍ͬͯͯ·͢ɻ ♿

Slide 11

Slide 11 text

Vue3 ͷυΩϡϝϯτ͔ΒΞΫηγϏϦςΟʹؔ͢Δ߲໨͕௥Ճ͞Ε·ͨ͠ɻ ΞΫηγϏϦςΟͷجૅ΍ɺ࣮ࡍͷϢʔεέʔεͷҰ෦Λֶ΂Δίϯςϯπʹͳ͍ͬͯ·͢ɻ

Slide 12

Slide 12 text

Vue2 ҎલͰ͸૲Ҋͱ͍͏ܗͰϚʔδ͞ΕΔ͜ͱͳ͘ऴΘͬͯ͠·ͬͨͷͰ ͜͏ͨ͠υΩϡϝϯτ͕௥Ճ͞Εͨ͜ͱ͸ྑ͍͜ͱͰ͢ɻ

Slide 13

Slide 13 text

Ͱ͕͢ɺถࠃͷඇӦརஂମ WebAIM ͷௐࠪʹΑΔͱ Vue.js Λ༻͍ͨαΠτͰ͸ΞΫηγϏϦςΟରԠ͕଍Γ͍ͯͳ͍ͱ͍͏ใࠂ͕͕͍͋ͬͯ·͢ɻ

Slide 14

Slide 14 text

͜Ε͸ಛఆͷϥΠϒϥϦ΍ϑϨʔϜϫʔΫΛ࢖͏͜ͱ͕ΞΫηγϒϧͱͳΒͳ͍ࣄͰ͸ ͋Γ·ͤΜ͕ɺҰࡢ೥ɾڈ೥͔ΒରԠ͕ฏۉҎԼͱͳ͍ͬͯΔࣄ࣮͕͋Γ·͢ɻ

Slide 15

Slide 15 text

ௐࠪ͞ΕͨαΠτʹ೔ຊͷ΋ͷؚ͕͍ͭ͘·Ε͍ͯΔ͔͸ఆ͔Ͱ͸͋Γ·ͤΜ͕ Vue.js Ͱ։ൃΛ͢Δ਎ͱͯ͠ɺ͜ͷঢ়گ͕໺์͠ʹͳ͍͍ͬͯͱ͸ࢥ͍ͬͯ·ͤΜɻ

Slide 16

Slide 16 text

ΞδΣϯμ ● ޡͬͨΞΫηγϏϦςΟରԠ ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ ● ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͜ͷηογϣϯͰ͸̏ͭͷςʔϚʹԊͬͯɺࠓޙͷ Vue.js Ͱͷ։ൃͰ ΞΫηγϏϦςΟʹऔΓ૊Έ΍͘͢ͳΔ಺༰Λൃද͍ͨ͠·͢ɻ

Slide 17

Slide 17 text

ΞδΣϯμ ● ޡͬͨΞΫηγϏϦςΟରԠ ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ ● ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ର৅͸ʮWeb ΞΫηγϏϦςΟΛֶͼ͸͡Ίͨਓʯ΍ ʮVue.js ͰΞΫηγϏϦςΟͷ޲্Λ͍͖͍ͯͨ͠ਓʯ޲͚ʹͳΓ·͢ɻ

Slide 18

Slide 18 text

ΞδΣϯμ ● ޡͬͨΞΫηγϏϦςΟରԠ ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ ● ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͜ͷൃදΛ͖͔͚ͬʹɺࠓޙͷ Vue.js ։ൃʹ͓͚Δ ΞΫηγϏϦςΟ޲্ͷऔΓ૊Έʹܨ͕Ε͹ͱࢥ͓ͬͯΓ·͢ɻ

Slide 19

Slide 19 text

ΞδΣϯμ ● ޡͬͨΞΫηγϏϦςΟରԠ ● ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ ● ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͳ͓ࠓճͷࣄྫͰ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ɻ ͦͷ఺ɺྃ͝ঝ͍ͩ͘͞ɻ

Slide 20

Slide 20 text

1. ޡͬͨΞΫηγϏϦςΟରԠ

Slide 21

Slide 21 text

1. ޡͬͨΞΫηγϏϦςΟରԠ ΞΫηγϏϦςΟରԠͰ͸ɺ͋·ΓཧղͤͣʹΑ͔Εͱࢥͬͯ΍ͬͨ΋ͷ͕ Կ΋Өڹ͕ͳ͔ͬͨΓɺͦΕͲ͜Ζ͔ѱ͘ͳΔ͜ͱ͕͋Γ·͢ɻ

Slide 22

Slide 22 text

1. ޡͬͨΞΫηγϏϦςΟରԠ ѱ͍ΞΫηγϏϦςΟରԠΛͳͨ͘͢Ίʹ΋ Αؒ͘ҧ͍΍͍͢ରԠʹ͍ͭͯઌʹֶΜͰ͍͖·͠ΐ͏ɻ

Slide 23

Slide 23 text

ΞΫηγϏϦςΟΛҙࣝ͢ΔΑ͏ʹͳ͔ͬͯΒ WAI-ARIA ʹ͍ͭͯ஌ͬͨਓ͸ଟ͍Ͱ͠ΐ͏ɻ

Slide 24

Slide 24 text

WAI-ARIA ͸εΫϦʔϯϦʔμʔͱ͍ͬͨࢧԉٕज़΁ HTML ͚ͩͰ͸දݱ͖͠Εͳ͍ΞΫηγϒϧͳ৘ใΛิ׬͢Δٕज़࢓༷Ͱ͢ɻ

Slide 25

Slide 25 text

ϒϥ΢β͔Β DOM πϦʔͱ CSS ͷϨϯμϦϯάΛղੳͯ͠ ΞΫηγϏϦςΟʹؔ͢Δ৘ใ͕ΞΫηγϏϦςΟπϦʔʹ൓ө͞Ε·͢ɻ

Slide 26

Slide 26 text

ͦͯ͠ OS ͝ͱͷΞΫηγϏϦςΟ API ͔Βࢧԉٕज़΋ͬͯϢʔβʔʹ৘ใ͕ಧ͖·͢ɻ

Slide 27

Slide 27 text

WAI-ARIA ͸͜ͷΞΫηγϏϦςΟπϦʔͷதͰ ೝ஌Ͱ͖ΔΑ͏ʹҙຯ͚ͮͯ͋͛͠Δͱ͍͏ܗͰ͢ɻ

Slide 28

Slide 28 text

💪 WAI-ARIA Λ࢖͏͜ͱͰΞΫηγϏϦςΟΛߴΊΔ͜ͱ͕Ͱ͖Δͱ࢖͍ग़͢ਓ͕͍·͢ɻ ࢲ΋ͦͷ̍ਓͰͨ͠ɻ

Slide 29

Slide 29 text

💪 Ͱ͕͢ WAI-ARIA Λ࢖༻͢ΔʹลΓؾΛ͚ͭͳ͚Ε͹ͳΒͳ͍͜ͱ͕͋Γ·͢ɻ

Slide 30

Slide 30 text

ͦΕ͸ʮNO ARIA is better than BAD ARIAʢARIA ແ͠ͷ΄͏͕ɺѱ͍ ARIA ΑΓ΋ྑ͍ʣʯ ͱ͍͏͜ͱͰ͢ɻ “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1

Slide 31

Slide 31 text

“NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1 ͭ·ΓɺWAI-ARIA Λؒҧͬͯ࢖͏͘Β͍ͳΒ ͦΕΛ࢖Θͳ͍΄͏͕·ͩΞΫηγϏϦςΟͱͯ͠ϚγͰ͋Δͱ͍͏͜ͱͰ͢ɻ

Slide 32

Slide 32 text

ࠓճ͸ͦΜͳ WAI-ARIA ͷ࢖༻ʹ͍ͭͯɺ ։ൃ࣌ʹޡΓ΍͍͢΋ͷ΍ҙࣝ͠๨Ε͕ͪͳ෦෼ʹ͍ͭͯ঺հ͠·͢ɻ “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1

Slide 33

Slide 33 text

aria-label ·ͣ͸ aria-labelɻ ͪ͜Β͸ࢧԉٕज़ʹ఻͍͑ͨςΩετ৘ใ͕͋Δ৔߹ʹ࢖༻͞ΕΔ΋ͷͰ͢ɻ

Slide 34

Slide 34 text

۩ମྫͱͯ͠͸ΞΠίϯ͚ͩͷϘλϯ͕ڍ͛ΒΕ·͢ɻ ͜ͷύλʔϯͰ͸Ϙλϯ಺ʹςΩετ͕ͳ͍ͨΊʮϝχϡʔɺϘλϯ ʯͱͯ͠ೝࣝ͞Ε·͢ɻ

Slide 35

Slide 35 text

Ͱ͸͜ͷύλʔϯͰ͸Ͳ͏ͳΔͰ͠ΐ͏͔ɻ

Slide 36

Slide 36 text

ϦϯΫͷ಺෦ʹը૾ςΩετ͕͋Δ৔߹Ͱ͕͢ ͜Ε͸ alt ͷ৘ใΛ্ॻ͖ͯ͠ʮϦϯΫɺΠϝʔδɺVueʯͱಡ·Εͯ͠·͍·͢ɻ

Slide 37

Slide 37 text

·ͨɺ͜ͷ৔߹͸ label ཁૉΛແޮԽͯ͠ ʮೖྗϑΥʔϜɺςΩετΛฤूʯͱಡ·Εͯ͠·͍·͢ɻ

Slide 38

Slide 38 text

͜ͷΑ͏ʹ aria-label ͸ຊདྷ఻͔͑ͨͬͨςΩετ৘ใΛ্ॻ͖ͯ͠͠·͏͜ͱ͕͋Γ·͢ɻ

Slide 39

Slide 39 text

aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏ ● ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍ ● ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ ● WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ ○ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর ࢧԉٕज़ͷϢʔβʔ͚ͩҧ͏৘ใΛ༩͑ͯ͠·͏ͷͰ͸ͳ͘ ͋ΒΏΔਓʹಉ౳ͷ৘ใΛ༩͑ΔͨΊʹɺͰ͖ΔݶΓݟ͑ΔςΩετͰఏڙ͍ͯͩ͘͠͞ɻ

Slide 40

Slide 40 text

aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏ ● ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍ ● ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ ● WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯΔ ○ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর ͪͳΈʹ aria-label ͸ WAI-ARIA 1.2 ΑΓ div ཁૉ΍ span ཁૉͱ͍ͬͨ generic role ͳͲɺ ໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯ·͢ɻৄࡉ͸࢓༷ΛνΣοΫͯ͠Έ͍ͯͩ͘͞ɻ

Slide 41

Slide 41 text

aria-hidden ࣍͸ aria-hidden ʹ͍ͭͯɻ  aria-hidden ͸ͦͷཁૉͱ͢΂ͯͷࢠཁૉΛΞΫηγϏϦςΟπϦʔ͔Β࡟আ͢Δ΋ͷͰ͢ɻ

Slide 42

Slide 42 text

۩ମྫͱͯ͠͸ࢧԉٕज़ʹ఻͑ͳͯ͘ྑ͍૷০తͳཁૉ΍ॏෳ͍ͯ͠Δίϯςϯπɺ Ϟʔμϧ͕දࣔ͞Εͨͱ͖ʹͦΕҎ֎ͷίϯςϯπΛӅ͢ͱ͖ͳͲ͕ڍ͛ΒΕ·͢ɻ

Slide 43

Slide 43 text

aria-hidden ͸ͱͯ΋ڧྗͳ΋ͷͳͷͰ ࢖͏৔߹͸ӨڹൣғΛ͖ͪΜͱ೺Ѳ্ͨ͠Ͱ࢖͍·͠ΐ͏ɻ

Slide 44

Slide 44 text

ͨͱ͑͹ϞʔμϧΛϥοϓ͢Δ਌ཁૉʹ aria-hidden Λ࢖ͬͯ͠·͏ͱ ϞʔμϧΛؚΊͯ͢΂ͯӅ͞Εͯ͠·͏͔ΒͰ͢ɻ

Slide 45

Slide 45 text

͔ͤͬ͘ͷࢧԉٕज़αϙʔτ͕ແବʹͳͬͯ͠·͍·͢ɻ

Slide 46

Slide 46 text

·ͨɺϑΥʔΧεͤ͞Δཁૉ΍ͦΕΛ಺แ͢Δཁૉʹ࢖༻͠ͳ͍Α͏ʹؾΛ͚͍ͭͯͩ͘͞ɻ ϑΥʔΧεࣗମ͸Ͱ͖ͯ΋ͦͷཁૉ͕Կͳͷ͔ೝࣝͰ͖ͳ͘ͳΔ͔ΒͰ͢ɻ

Slide 47

Slide 47 text

Ұ࣌తʹӅ͢ͷͰ͸ͳ͘׬શʹཁૉΛফ͍ͨ͠৔߹ CSS Ͱͷ display: none ΍ hidden ଐੑΛ࢖͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ

Slide 48

Slide 48 text

aria-live ࣍͸ aria-live ʹ͍ͭͯɻ͜Ε͸ϥΠϒϦʔδϣϯͱݺ͹ΕΔ΋ͷͰ ϖʔδ಺ͰಈతͳมԽ͕͋ͬͨ৔߹ɺͦΕΛࢧԉٕज़΁఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ

Slide 49

Slide 49 text

۩ମྫͱͯ͠͸ɺϑΥʔϜೖྗʹมԽ͕͋ͬͨࡍ΍ SPA ʹ͓͚Δը໘ભҠ࣌ɺ ܯࠂͷ௨஌΍ΧϧʔηϧͷมԽ࣌ͳͲ͕ڍ͛ΒΕ·͢ɻ

Slide 50

Slide 50 text

● polite ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ ● assertive ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ ● off ○ Կ΋௨஌ͤ͞ͳ͍ ○ σϑΥϧτͷ஋ aria-live ͷ஋ ௨ৗͷ௨஌Ͱ͋Ε͹ ಈ࡞͕׬͔ྃͯ͠ΒಡΈ্͛ͯ͘ΕΔ aria-live=“polite" Ͱઃఆ͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ

Slide 51

Slide 51 text

● polite ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ ● assertive ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ ● off ○ Կ΋௨஌ͤ͞ͳ͍ ○ σϑΥϧτͷ஋ aria-live ͷ஋ aria-live="assertive" ͸ಈతͳมߋ͕͋Δࡍʹଞͷૢ࡞ΛׂΓࠐΜͰ௨஌͖ͯ͠·͢ɻ ͜Ε͸Ξϥʔτͱͯ͠ͷ໾ׂͰ͋Ε͹Α͍ͷͰ͕͢ɺ

Slide 52

Slide 52 text

● polite ○ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ ● assertive ○ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ ● off ○ Կ΋௨஌ͤ͞ͳ͍ ○ σϑΥϧτͷ஋ aria-live ͷ஋ ࣗಈతʹ੾ΓସΘΔΧϧʔηϧ΍ϑΥʔϜೖྗதʹৗʹ৘ใΛ௨஌͖ͯͨ͠Β ஶ͘͠ϢʔβମݧΛଛͶͯ͠·͏ͷͰɺޡͬͨ஋Ͱ࢖༻͠ͳ͍Ͱ͍ͩ͘͞ɻ

Slide 53

Slide 53 text

aria-current ࠷ޙʹ aria-current ʹ͍ͭͯɻ ͪ͜Β͸ݱࡏͷҐஔΛ఻͑Δ৔߹ʹ࢖༻͞Ε·͢ɻ

Slide 54

Slide 54 text

࢖༻ྫͱͯ͠͸ϖʔδωʔγϣϯ΍φϏήʔγϣϯɺ ύϯͣ͘ͷϦϯΫʹ͓͍ͯݱࡏͷ߲໨Λ఻͑Δͱ͖ʹ࢖༻͞Ε·͢ɻ

Slide 55

Slide 55 text

୯ମͷ WAI-ARIA ͱͯ͠͸͜Ε·Ͱઆ໌ͨ͠΋ͷͱൺֱ͢Δͱ සൟʹ࢖͏ػձ͸গͳ͍Ͱ͠ΐ͏ɻ

Slide 56

Slide 56 text

Ͱ͕͢ɺVue.js Ͱ։ൃ͢ΔਓͰ͋Ε͹Α͘ݟ͔͚ΔϥΠϒϥϦͰ࢖༻͞Ε͍ͯ·͢ɻ

Slide 57

Slide 57 text

ͦΕ͸ Vue Router Ͱ͢ɻ

Slide 58

Slide 58 text

router-link Ͱ࢖༻͞ΕΔ͜ͱ΋͋Ε͹ Nuxt.js ͷඪ४ϦϯΫίϯϙʔωϯτͰ͋Δ nuxt-link Ͱ΋࢖༻͞Ε͍ͯ·͢ɻ

Slide 59

Slide 59 text

ݱࡏͷ URL ύεͱ߹க͢ΔϦϯΫઌ͕ઃఆ͞Ε͍ͯΔ৔߹ ͦͷϦϯΫʹ͸ aria-current="page" ͕෇༩͞Ε·͢ɻ

Slide 60

Slide 60 text

ϦϯΫςΩετࣗମ͕ͦͷϖʔδλΠτϧͱ߹க͍ͯ͠Ε͹༗༻ͳ࢖͍ํͱݴ͑·͢ɻ

Slide 61

Slide 61 text

Ͱ͕͢͜ͷཁૉΛແ࡞ҝʹஔ͍ͯ͠·͍ͬͯΔͱ Կ͕ݱࡏҐஔͷ΋ͷͰ͋Δ͔ͷ৘ใ͕൥ࡶʹͳͬͯ͠·͍·͢ɻ

Slide 62

Slide 62 text

ϚʔΫΞοϓ͢Δࡍʹ͸ϦϯΫΛͲ͏͍ͬͨάϧʔϐϯάʹ͢Δ͔ ஔ͘ྖҬΛҙࣝ͠·͠ΐ͏ɻ

Slide 63

Slide 63 text

ͪͳΈʹ Vue Router ʹ͸ aria-current ෦෼Λ API ͱ੍ͯ͠ޚͰ͖·͢ɻ

Slide 64

Slide 64 text

஋͸ෳ਺ଘࡏ͓ͯ͠Γɺεςοϓ΍೔෇ɺݱࡏ࣌ࠁͷ৘ใΛࣔ͢͜ͱ͕ՄೳͰ͢ɻ aria-current ͷ஋͕ҙਤͨ͠΋ͷͱͳ͍ͬͯΔ͔֬ೝͯ͠Έ·͠ΐ͏ɻ

Slide 65

Slide 65 text

ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ͜ͷΑ͏ʹ WAI-ARIA ͸ཁૉʹΑͬͯ͸ͦͷ··࢖༻Ͱ͖ͳ͍΋ͷ͕͋ͬͨΓ ஌Βͣʹ࢖͏͜ͱͰΞϓϦέʔγϣϯʹӨڹΛ༩͑͏Δ΋ͷ͕͋Γ·͢ɻ

Slide 66

Slide 66 text

ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ࢖༻ํ๏ΛޡΔ͜ͱͰ؆୯ʹΞΫηγϒϧͰ͸ͳ͍΋ͷΛ࡞Γ্͛ͯ͠·͍·͢ɻ

Slide 67

Slide 67 text

ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ ҰํͰ HTML Λ࢖͏͜ͱ͸ϒϥ΢βඪ४ʹ͓͍ͯಉҰͷڍಈ͕͓͓Αͦอূ͞Ε͍ͯ·͢ɻ

Slide 68

Slide 68 text

ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ ● ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ○ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ○ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ○ ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ○ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ ● ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ○ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ○ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ WAI-ARIA ΛΑ͘Θ͔Βͣ࢖ͬͯ͠·͍ͦ͏ͳ࣌͸Ұ୴ཱͪࢭ·ͬͯ ͦΕΒΛ࢖Θͣʹ HTML ͚ͩͰදݱͰ͖ͳ͍͔ͱ͍͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ

Slide 69

Slide 69 text

։ൃऀ޲͚ͷ Web ٕज़ͷ৘ใ͕ू໿͞Ε͍ͯΔ MDN Web Docs ʹ͸ HTML ཁૉͷϖʔδͰΞΫηγϏϦςΟ্ͷݒ೦఺͕ࡌ͍ͬͯ·͢ɻ

Slide 70

Slide 70 text

ීஈॻ͍͍ͯΔ HTML ͷ࢖͍ํ͕ؒҧͬͯͳ͍͔Λཧղ͢Δ্Ͱ༗ӹͳαΠτͰ͢ɻ

Slide 71

Slide 71 text

·ͨɺHTML ΛΑΓৄࡉʹֶͿͷͰ͋Ε͹ʮHTML ղମ৽ॻʯ΋Φεεϝ͠·͢ɻ

Slide 72

Slide 72 text

ݱ࣌఺Ͱ΋ͬͱ΋ HTML ͷ࢓༷ॻʹີ઀ͳ೔ຊޠͷॻ੶Ͱ͢ͷͰ ࣮૷΍ϨϏϡʔ࣌ͷϦϑΝϨϯεͱͯ͠΋׆༻ͯ͠Έ͍ͯͩ͘͞ɻ

Slide 73

Slide 73 text

2. ൚༻ੑͷ͋Δ  ΞΫηγϒϧͳίϯϙʔωϯτ

Slide 74

Slide 74 text

2. ൚༻ੑͷ͋Δ  ΞΫηγϒϧͳίϯϙʔωϯτ ઌఔͷࣄྫΑΓ WAI-ARIA ͸৻ॏʹ࢖͏ඞཁ͕͋Δ͜ͱΛઆ໌͍ͨ͠·ͨ͠ɻ Ͱ͕ͦ͢ΕΒΛ͍͍ͪͪ֬ೝ͠ͳ͕Βͷ։ൃ͸େมͰ͢ɻ

Slide 75

Slide 75 text

2. ൚༻ੑͷ͋Δ  ΞΫηγϒϧͳίϯϙʔωϯτ ͦ͜ͰίϯϙʔωϯτઃܭͰϧʔϧΛ಺แͤ͞Δ͜ͱͰ νʔϜ։ൃʹ͓͍ͯೝࣝͷᴥᴪΛݮΒͨ͠։ൃ͕͠΍͘͢ͳΓ·͢ɻ

Slide 76

Slide 76 text

2. ൚༻ੑͷ͋Δ  ΞΫηγϒϧͳίϯϙʔωϯτ ࣍͸൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ࡞Γʹؔ͢ΔώϯτΛ঺հ͠·͢ɻ

Slide 77

Slide 77 text

TypeScript Ͱิڧ͢Δ Vue3 ͔Β͸ TypeScript ରԠ͕վળ͞Ε͖ͯ·ͨ͠ɻ ͜ΕΛظʹಋೖͩͨ͠͠ਓ΋͍ΔͰ͠ΐ͏ɻ

Slide 78

Slide 78 text

TypeScript Ͱิڧ͢Δ ΋͠ಋೖ͍ͯ͠Δ৔߹ ΞΫηγϒϧͳίϯϙʔωϯτ࡞ΓΛิڧ͢ΔͨΊʹ༗༻ͳखஈͱͳΓ·͢ɻ

Slide 79

Slide 79 text

͜ͷύλʔϯͰ͸ݟग़͠ίϯϙʔωϯτΛ൚༻తʹ࢖͑ΔΑ͏࣮૷͠·ͨ͠ɻ

Slide 80

Slide 80 text

ཁૉʹ͸ is ଐੑʹΑͬͯ͋ΒΏΔཁૉΛೖΕΒΕΔͨΊ ͦΕΒΛ props ͷ஋͔Β੍ޚ͢Δܗʹ͍ͯ͠·͢ɻ

Slide 81

Slide 81 text

͜ΕҎ֎ʹ΋ը૾ίϯϙʔωϯτͷΑ͏ͳ৔߹͸୅ସςΩετͱͳΔ props Λઃஔͨ͠Γ ଟݴޠରԠͷࡍ͸ lang ଐੑʹ͋ͨΔ΋ͷΛ props ʹઃஔ͢ΔͳͲ

Slide 82

Slide 82 text

͸͡ΊͯίϯϙʔωϯτΛ࢖͏ਓʹ΋ඞཁͩͱ෼͔Δ props Λఆ͓ٛͯ͘͠ͱΑ͍Ͱ͠ΐ͏ɻ

Slide 83

Slide 83 text

·ͨ vue-tsc ͱ͍ͬͨܕݕࠪπʔϧΛ࢖༻͢Δͱ ಺ͷଐੑ஋΋νΣοΫͯ͘͠Ε·͢ɻ

Slide 84

Slide 84 text

͜͜Ͱؒҧͬͨ஋͕ೖ͍ͬͯͳ͍͔΋஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ

Slide 85

Slide 85 text

Visually Hidden Visually Hidden ͱ͸ࢹ֮తʹ͸֬ೝͰ͖ͳ͍͕ࢧԉٕज़ʹΑΓ֬ೝͰ͖Δํ๏Ͱ͢ɻ Bootstrap ͱ͍֤ͬͨछ UI ϑϨʔϜϫʔΫͰఆٛ͞Ε͍ͯͨΓ͠·͢ɻ

Slide 86

Slide 86 text

લड़ͨ͠ aria-label ͱ΋ࣅ͍ͯ·͕͢ ͜ͷΑ͏ͳίϯϙʔωϯτͱ͢Δ͜ͱͰ൚༻తʹ࢖͍ճͤ·͢ɻ

Slide 87

Slide 87 text

ςΩετ͕ͳ͍৔߹ͷ Button ίϯϙʔωϯτ΍ɺ ϑΥʔϜύʔπͷϥϕϧ෦෼ΛӅ͢৔߹ͳͲʹ׆༻͢Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 88

Slide 88 text

·ͨɺCSS ͷ੍ޚΑͬͯϑΥʔΧε͢Δ৔߹͸දࣔͤ͞Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 89

Slide 89 text

͜Ε͸ʮεΩοϓϦϯΫʯͱ͍͏ɺίϯςϯπʹεΩοϓҠಈͰ͖Δ ࢧԉٕज़ϢʔβʔͷͨΊͷखஈͱͯ͠࢖༻Ͱ͖·͢ɻ

Slide 90

Slide 90 text

௨ৗɺը໘্ʹ͸ݱΕ·ͤΜ͕ ϔομʔͷ಺༰͕ଟ͍৔߹ʹίϯςϯπʹ௚઀εΩοϓͰ͖ΔΑ͏ʹ͢Δ΋ͷͰ͢ɻ

Slide 91

Slide 91 text

Fragments Vue3 ͔Β͸ Fragments ͱ͍͏֓೦͕ಋೖ͞Ε͍ͯ·͢ɻ

Slide 92

Slide 92 text

Vue2 ·Ͱ͸ ಺ͷϧʔτཁૉ͸୯Ұͷ΋ͷͰͳ͚Ε͹ͳΓ·ͤΜͰͨ͠ɻ ͦΕʹΑΓίϯϙʔωϯτʹΑͬͯ͸ϚʔΫΞοϓ͕ؒҧ͍ͬͯΔ৔߹͕͋Γ·ͨ͠ɻ

Slide 93

Slide 93 text

Fragments ʹΑΓϧʔτ͕୯ҰͰͳͯ͘΋Α͘ͳΓ ίϯϙʔωϯτʹ͓͚ΔϚʔΫΞοϓͷਖ਼͕͠͞อূ͞Ε΍͘͢ͳΓ·ͨ͠ɻ

Slide 94

Slide 94 text

ͨͩ͠ίϯϙʔωϯτͷϧʔτཁૉʹ ਌ίϯϙʔωϯτ͔ΒͷଐੑΛࣗಈతʹ෇༩͞Εͳ͘ͳΔ͜ͱʹ͸஫ҙͰ͢ɻ

Slide 95

Slide 95 text

ͦͷ৔߹͸ inheritAttrs Λ false ʹͯ͠ ଐੑΛड͚औΔཁૉʹ v-bind="$attrs" Λ෇༩͓͖ͯ͠·͠ΐ͏ɻ

Slide 96

Slide 96 text

3. ΞΫηγϏϦςΟ ςετɾνΣοΫ

Slide 97

Slide 97 text

3. ΞΫηγϏϦςΟ ςετɾνΣοΫ ΞΫηγϒϧͳίϯϙʔωϯτ͕࡞ΕͨͰ͠ΐ͏͔ɻ ͱͯ΋ૉ੖Β͍͠Ͱ͢Ͷɻ

Slide 98

Slide 98 text

3. ΞΫηγϏϦςΟ ςετɾνΣοΫ Ͱ͕͢ɺίϯϙʔωϯτΛ࡞Δ͜ͱҎ্ʹେ੾ͳ͜ͱ͕͋Γ·͢ɻ ͦΕ͸͖ͪΜͱಈ࡞͍ͯ͠Δ͔Λ֬ೝ͢Δ͜ͱͰ͢ɻ

Slide 99

Slide 99 text

3. ΞΫηγϏϦςΟ ςετɾνΣοΫ ͱ͍͏Θ͚Ͱɺ࡞ͬͨίϯϙʔωϯτ͕ຊ౰ʹ໰୊ͳ͍͔Λ֬ೝ͢ΔͨΊʹ ςετ΍νΣοΫΛ͍͖ͯ͠·͠ΐ͏ɻ

Slide 100

Slide 100 text

Linter ·ͣ͸ɺ੩తղੳπʔϧͰνΣοΫͯ͠Έ·͠ΐ͏ɻ

Slide 101

Slide 101 text

eslint Λಋೖ͍ͯ͠ΔͳΒ eslint-plugin-vuejs-accessibility Λ࢖༻͢Δ͜ͱΛΦεεϝ͠·͢ɻ

Slide 102

Slide 102 text

ͪ͜Β͸ Vue.js ίʔυ಺ͰΞΫηγϏϦςΟΛଛͶΔίʔυ͕͋ͬͨ৔߹ʹ ࢦఠͯ͘͠ΕΔ eslint plugin Ͱ͢ɻ

Slide 103

Slide 103 text

ߏங͢ΔαΠτ΍ΞϓϦέʔγϣϯʹΑͬͯ͸ෆཁͳϧʔϧ͕͋Δ͔΋͠Ε·ͤΜɻ ಋೖલʹԿͷϧʔϧΛ༗ޮʹ͢Δ͔Λݕ౼͓ͯ͘͠ͱྑ͍Ͱ͠ΐ͏ɻ

Slide 104

Slide 104 text

ΑΓϚʔΫΞοϓʹ޲͖߹ͬͯ HTML ͷਖ਼֬͞Λ֬ೝ͍ͨ͠৔߹ɺ markuplint Λಋೖͯ͠ΈΔ͜ͱ΋༗༻Ͱ͢ɻ

Slide 105

Slide 105 text

Vue.js ͷύʔαʔ͕ଘࡏ͢ΔͷͰซͤͯ࢖͏͜ͱͰ vue ίϯϙʔωϯτ಺ΛνΣοΫͯ͘͠Ε·͢ɻ

Slide 106

Slide 106 text

ͨͩ͠ markuplint ͸ɺಈతόΠϯσΟϯάͳଐੑͱͳ͍ͬͯΔ৔߹͸ ಺༰ΛධՁͰ͖ͳ͍ͨΊɺεϧʔ͞Εͯ͠·͍·͢ɻ

Slide 107

Slide 107 text

͜ͷ৔߹ɺલड़ͨ͠ TypeScript Ͱͷܕఆٛ΍ props Ͱ਌͔Βਖ਼͍͠಺༰Λड͚औΔΑ͏ʹͨ͠Γɺ

Slide 108

Slide 108 text

੩తͳ HTML ͷग़ྗ࣌΍ɺεφοϓγϣοτςετͷ HTML Λ΋ͱʹ markuplint ͰνΣοΫ͢ΔͱΑ͍Ͱ͠ΐ͏ɻ

Slide 109

Slide 109 text

݁߹ςετ ϑϩϯτΤϯυͷςετͷͨΊʹ Jest Λಋೖ͍ͯ͠·͢Ͱ͠ΐ͏͔ɻ ͩͱ͢Δͱ͋ͳͨ͸ϥοΩʔͰ͢ɻ

Slide 110

Slide 110 text

݁߹ςετ testing-library Λ࢖ͬͯࢧԉٕज़ϢʔβʔΛ૝ఆͨ͠ৼΔ෣͍ͷ ݁߹ςετΛॻ͍ͯΈ·͠ΐ͏ɻ

Slide 111

Slide 111 text

͜ͷςετέʔεͰ͸ getByRole Λ༻͍ͯཁૉͷ role Λऔಘ͠ ಺෦ͷςΩετΛ֬ೝ͢ΔΑ͏ʹ͍ͯ͠·͢ɻ

Slide 112

Slide 112 text

ߋʹΩʔϘʔυςετΛͯ͘͠ΕΔ testing-library ֦ுػೳΛ࢖͍ɺ ਖ਼͘͠ػೳ͍ͯ͠Δ͔ΛνΣοΫ͍ͯ͠·͢ɻ

Slide 113

Slide 113 text

userEvent ʹͯλϒҠಈͤͨ͞ΓΫϦοΫͤ͞Δ͜ͱ΋Ͱ͖·͕͢ɺ ͪ͜Βͷ৔߹͕؆ܿͰཧղ͠΍͍͢ܗʹͳΓ·͢ɻ

Slide 114

Slide 114 text

͞Βʹ jest-axe Λ࢖༻͢Δ͜ͱͰ શମతʹΞΫηγϏϦςΟҧ൓͕ͳ͍͔ΛνΣοΫ͢Δ͜ͱ΋ग़དྷ·͢ɻ

Slide 115

Slide 115 text

͜Ε͸ axe ͱ͍͏ΞΫηγϏϦςΟݕূϥΠϒϥϦͷΤϯδϯΛ࢖༻ͨ͠ Jest ͷ matcher Ͱ͢ɻ

Slide 116

Slide 116 text

eslint ಉ༷ɺϧʔϧ͸ಠࣗͰௐ੔Ͱ͖ΔͷͰ ඞཁʹԠͯ͡ਫ਼ࠪͯ͠Έ͍ͯͩ͘͞ɻ

Slide 117

Slide 117 text

ϒϥ΢βɾࢧԉٕज़νΣοΫ ςετίʔυΛ΋ͬͯΞΫηγϏϦςΟͷਖ਼͠͞Λ֬ೝͰ͖ͨͷͳΒ ࣍͸࣮ࡍͷϒϥ΢β΍ࢧԉٕज़Ͱ΋νΣοΫͯ͠Έ·͠ΐ͏ɻ

Slide 118

Slide 118 text

vue-axe ͸ϒϥ΢β্ͰΞΫηγϏϦςΟνΣοΫ͕Ͱ͖ΔΑ͏ʹͳΔϓϥάΠϯͰ͢ɻ Vue.js ͷ։ൃ಺ʹ૊ΈࠐΉ͜ͱ͕Ͱ͖ɺҧ൓͍ͯ͠ΔՕॴ͕ͳ͍͔Λࢦఠͯ͘͠Ε·͢ɻ

Slide 119

Slide 119 text

ϩʔΧϧ։ൃΛ͠ͳ͕Βɺ໰୊఺Λ௵͍ͯ͘͠ࡍʹ༗༻ͳϓϥάΠϯͰ͢ɻ ίϯτϥετൺΛؚΉɺίʔυ্Ͱ͸ؾ͚ͮͳ͔ͬͨ෦෼ʹ஫ࢹͯ͠Έ͍ͯͩ͘͞ɻ

Slide 120

Slide 120 text

ΩʔϘʔυૢ࡞ͷ֬ೝ ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ ● ϑΥʔΧεॱংͷՄࢹԽ ○ taba11y ○ Firefox DevTools ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ઌ΄ͲͷςετͰΩʔϘʔυͷૢ࡞ʹ͍ͭͯهड़͍ͯ͠·͕ͨ͠ ࣮ࡍͷϒϥ΢βͰΩʔϘʔυૢ࡞͕Ͱ͖Δ͔΋֬ೝͯ͠Έ·͠ΐ͏ɻ

Slide 121

Slide 121 text

ΩʔϘʔυૢ࡞ͷ֬ೝ ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ ● ϑΥʔΧεॱংͷՄࢹԽ ○ taba11y ○ Firefox DevTools ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ϑΥʔϜཁૉ΍ϦϯΫͳͲͰ͸λϒΩʔͰͷભҠ΍ૢ࡞͕Ͱ͖Δ͔νΣοΫͯ͠Έ·͠ΐ͏ɻ ΋͘͠͸ E2E ςετΛ௨ͯ͠ϑΥʔΧεͷڍಈΛνΣοΫͯ͠ΈΔͷ΋Α͍Ͱ͠ΐ͏ɻ

Slide 122

Slide 122 text

ΩʔϘʔυૢ࡞ͷ֬ೝ ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ ● ϑΥʔΧεॱংͷՄࢹԽ ○ taba11y ○ Firefox DevTools ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ૝ఆͨ͠ॱংʹϑΥʔΧεͰ͖ΔΑ͏ʹͳ͍ͬͯΔ͔Λ֬ೝ͠·͠ΐ͏ɻ taba11y ͱ͍͏֦ுػೳΛ࢖͏͜ͱͰϒϥ΢β্ͰϑΥʔΧεॱংΛՄࢹԽͯ͘͠Ε·͢ɻ

Slide 123

Slide 123 text

ΩʔϘʔυૢ࡞ͷ֬ೝ ● λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ○ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ ● ϑΥʔΧεॱংͷՄࢹԽ ○ taba11y ○ Firefox DevTools ■ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ͪͳΈʹ Firefox ͷ DevTools Ͱ͸ ඪ४ͷػೳͰϑΥʔΧεॱংΛ֬ೝͰ͖ΔΑ͏ʹͳ͍ͬͯ·͢ɻ

Slide 124

Slide 124 text

εΫϦʔϯϦʔμʔ ● Windows OSʮφϨʔλʔʯ ● macOS ˍ iOSʮVoiceOverʯ ● AndroidʮTalkBackʯ ● NVDA  ● ࢧԉٕज़ࣗಈςετ༻πʔϧ ○ Guidepup ○ web-test-runner-voiceover ○ VoiceOver.js ࢧԉٕज़ͷ̍ͭͰ΋͋ΔεΫϦʔϯϦʔμʔʹ͓͍ͯ ࣮ࡍʹͲ͏࢖ΘΕΔ͔΋νΣοΫ͓͖ͯ͠·͠ΐ͏ɻ

Slide 125

Slide 125 text

εΫϦʔϯϦʔμʔ ● Windows OSʮφϨʔλʔʯ ● macOS ˍ iOSʮVoiceOverʯ ● AndroidʮTalkBackʯ ● NVDA  ● ࢧԉٕज़ࣗಈςετ༻πʔϧ ○ Guidepup ○ web-test-runner-voiceover ○ VoiceOver.js Windows ΍ macOSɺεϚʔτϑΥϯ OS ʹ͸ඪ४ͰεΫϦʔϯϦʔμʔ͕౥ࡌ͞Ε͍ͯ·͢ɻ Windows ͷΈͰ͕͢ OSS Ͱެ։͞Ε͍ͯΔ NVDA ͱ͍͏εΫϦʔϯϦʔμʔ΋͋Γ·͢ɻ

Slide 126

Slide 126 text

εΫϦʔϯϦʔμʔ ● Windows OSʮφϨʔλʔʯ ● macOS ˍ iOSʮVoiceOverʯ ● AndroidʮTalkBackʯ ● NVDA  ● ࢧԉٕज़ࣗಈςετ༻πʔϧ ○ Guidepup ○ web-test-runner-voiceover ○ VoiceOver.js ·ͨɺҰ෦ͷࢧԉٕज़ͷΈͰ͕͢ ࣗಈςετͱ࣮ͯ͠ࢪͰ͖ΔͨΊͷπʔϧ΋ެ։͞Ε͍ͯ·͢ɻ

Slide 127

Slide 127 text

͓ΘΓʹ

Slide 128

Slide 128 text

͓ΘΓʹ ࠓճ঺հͨ͜͠ͱҎ֎Ͱ΋ΞΫηγϏϦςΟʹߟྀ͢Δ͜ͱ͸͍ͭ͘΋͋Γ·͢ɻ ϑϩϯτΤϯυ։ൃͰ͚ͩߟྀ͢Ε͹Α͍΋ͷͰ͸͋Γ·ͤΜɻ

Slide 129

Slide 129 text

͓ΘΓʹ Ͱ͕͢ɺΞΫηγϏϦςΟରԠͱ͍͏΋ͷʹ׬ᘳͳ΋ͷ͸ͳ͍ͷͰɺ ؒҧ͍Λݟ͚ͭͨΒযΒͣʹ࣮֬ʹ௚͍ͯ͘͜͠ͱ͕େ੾Ͱ͢ɻ

Slide 130

Slide 130 text

͞Βʹ Vue.js ։ൃͱΞΫηγϏϦςΟͷྖҬʹ଍Λ౿ΈೖΕͨ͘ͳΓ·͔ͨ͠ɻ

Slide 131

Slide 131 text

Web ΞΫηγϏϦςΟεϖγϟϦετͷ Marcus ࢯ͕ Accessible Vue ͱ͍͏ίϯςϯπΛແྉͰެ։͍ͯ͠·͢ɻ

Slide 132

Slide 132 text

ΑΓ୳ٻ͍͖͍ͯͨ͠ਓ͸ͪ͜Β΋ซͤͯ͝ཡʹͳͬͯΈ͍ͯͩ͘͞ɻ

Slide 133

Slide 133 text

ࠓճͷൃද͔ΒΞΫηγϏϦςΟΛҙࣝͨ͠ Vue.js ։ൃ͕૿͍͖͑ͯ ΞΫηγϒϧͳαΠτ΍ΞϓϦέʔγϣϯ͕ੜ·Ε͍͚ͯΕ͹ͱࢥ͓ͬͯΓ·͢ɻ

Slide 134

Slide 134 text

Thanks for listening! Vue Fes Japan Online 2022 - 2022/10/16 Ҏ্ͰൃදΛऴΘΓ·͢ɻ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ