Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Okuto Oyama Okuto Oyama
October 16, 2022

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

Vue Fes Japan Online 2022 発表資料(Web 版

昨今 Web 開発において、アクセシビリティを重視することはそれほど珍しくなくなってきました。
最新の Vue.js 公式ドキュメントでもアクセシビリティに関する項目が追加されました。
しかしながらアクセシビリティ対応に関しては、間違った知識のままはじめるとアクセシブルでなくなる可能性もあります。
この発表ではそうした間違いや疑問を解消し Vue.js でのアクセシビリティ向上に取り組みやすくするやり方を発表いたします。

Avatar for Okuto Oyama

Okuto Oyama

October 16, 2022
Tweet

More Decks by Okuto Oyama

Other Decks in Technology

Transcript

  1. Vue.js Ͱ 
 ΞΫηγϒϧͳ ίϯϙʔωϯτΛͭ͘ΔͨΊʹ Vue Fes Japan Online 2022

    - 2022/10/16 ͜Ε͔ΒʮVue.js ͰΞΫηγϒϧͳίϯϙʔωϯτΛͭ͘ΔͨΊʹʯ ͱ͍͏λΠτϧͰൃදΛ͍͖ͤͯͨͩ͞·͢ɻΑΖ͓͘͠ئ͍͠·͢ɻ
  2. • ΍·ͷ͘ • he / him • Frontend Designer •

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

    🏡 👪 🐱 🐱 🐱 🐶 ࣗݾ঺հ ݱࡏ͸ࣄۀձࣾʹॴଐ͠ɺWeb ඪ४ͷٕज़Λ׆༻ͯ͠ ϢʔβʔମݧΛ޲্͍͖͍ͤͯͨ͞ͱߟ͍͑ͯΔऀͰ͢ɻ
  4. Vue.js ͱΞΫηγϏϦςΟ ࠓճͷ Vue Fes Japan Online 2022 Ͱ͸ Vue.js

    ͱΞΫηγϏϦςΟʹ ·ͭΘΔςʔϚͰൃද͍ͤͯͨͩ͘͞ͷͰ͕͢ɺ
  5. ΞδΣϯμ • ޡͬͨΞΫηγϏϦςΟରԠ • ൚༻ੑͷ͋ΔΞΫηγϒϧͳίϯϙʔωϯτ • ΞΫηγϏϦςΟςετɾνΣοΫ ※ ঺հ͢Δίʔυ͸ Vue3

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

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

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

    Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ ͳ͓ࠓճͷࣄྫͰ঺հ͢Δίʔυ͸ Vue3 Λϕʔεʹͨ͠΋ͷͱͳ͓ͬͯΓ·͢ɻ ͦͷ఺ɺྃ͝ঝ͍ͩ͘͞ɻ
  9. ͦΕ͸ʮNO ARIA is better than BAD ARIAʢARIA ແ͠ͷ΄͏͕ɺѱ͍ ARIA ΑΓ΋ྑ͍ʣʯ

    ͱ͍͏͜ͱͰ͢ɻ “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices 1.1
  10. “NO ARIA is better than BAD ARIA” WAI-ARIA Authoring Practices

    1.1 ͭ·ΓɺWAI-ARIA Λؒҧͬͯ࢖͏͘Β͍ͳΒ ͦΕΛ࢖Θͳ͍΄͏͕·ͩΞΫηγϏϦςΟͱͯ͠ϚγͰ͋Δͱ͍͏͜ͱͰ͢ɻ
  11. aria-label ͕৘ใΛ্ॻ͖ͯ͠͠·͏ • ࢧԉٕज़Ϣʔβͱͦ͏Ͱͳ͍ϢʔβͰ৘ใ֨ࠩΛ༩͑ͳ͍ • ςΩετͰ͢΂ͯͷϢʔβʹਖ਼͘͠఻͑ΔΑ͏ʹ຿ΊΔ • WAI-ARIA 1.2 ͔Β໊લΛ͚ͭͯ͸ͳΒͳ͍

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

    role ͕ఆٛ͞Ε͍ͯΔ ◦ ֘౰ͷ role ʹ͍ͭͯ͸࢓༷Λࢀর ͪͳΈʹ aria-label ͸ WAI-ARIA 1.2 ΑΓ div ཁૉ΍ span ཁૉͱ͍ͬͨ generic role ͳͲɺ ໊લΛ͚ͭͯ͸ͳΒͳ͍ role ͕ఆٛ͞Ε͍ͯ·͢ɻৄࡉ͸࢓༷ΛνΣοΫͯ͠Έ͍ͯͩ͘͞ɻ
  13. • polite ◦ Ұ࿈ͷૢ࡞͕ऴΘͬͨ͋ͱʹ௨஌ͤ͞Δ • assertive ◦ ૢ࡞Λதஅͤͯ͞౎౓௨஌ͤ͞Δ • off

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

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

    ◦ Կ΋௨஌ͤ͞ͳ͍ ◦ σϑΥϧτͷ஋ aria-live ͷ஋ ࣗಈతʹ੾ΓସΘΔΧϧʔηϧ΍ϑΥʔϜೖྗதʹৗʹ৘ใΛ௨஌͖ͯͨ͠Β ஶ͘͠ϢʔβମݧΛଛͶͯ͠·͏ͷͰɺޡͬͨ஋Ͱ࢖༻͠ͳ͍Ͱ͍ͩ͘͞ɻ
  16. ͦͷ WAI-ARIA ͸ਖ਼͘͠࢖͍͑ͯΔ͔ • ࢖͍ํʹΑͬͯ͸ΞΫηγϏϦςΟΛଛͶͯ͠·͏͜ͱ͕͋Δ ◦ ཁૉʹΑͬͯ࢖͑ͳ͍΋ͷ͕͋Δ ◦ ஋ͷࢦఆΛޡͬͯҙਤ͠ͳ͍ڍಈʹͳͬͯ͠·͏͜ͱ͕͋Δ ◦

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

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

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

    ରԠͨ͠΋ͷ͕Ӆ͞Εͯ͠·͏͜ͱ΋͋Δ ◦ WAI-ARIA ͕͋Δ͜ͱΛ஌Βͣʹ࢖ͬͯ͠·͏͜ͱ΋͋Δ • ·ͣ HTML Λਖ਼͘͠࢖͏͜ͱΛҙࣝ͢Δ ◦ ηϚϯςΟΫεͰ͋Δ͜ͱͰ̍ͭ̍ͭͷػೳͷߟྀΛ͠ͳͯ͘ࡁΉ ◦ Web ඪ४ͱͯ͠ϒϥ΢β͝ͱͰ͓͓Αͦಉ͡ಈ͖͕ظ଴Ͱ͖Δ WAI-ARIA ΛΑ͘Θ͔Βͣ࢖ͬͯ͠·͍ͦ͏ͳ࣌͸Ұ୴ཱͪࢭ·ͬͯ ͦΕΒΛ࢖Θͣʹ HTML ͚ͩͰදݱͰ͖ͳ͍͔ͱ͍͏͜ͱ΋ݕ౼ͯ͠Έ͍ͯͩ͘͞ɻ
  20. ΩʔϘʔυૢ࡞ͷ֬ೝ • λϒϑΥʔΧεɺεϖʔε or ΤϯλʔΩʔԡԼͯ͠൓Ԡ͕͋Δ͔ ◦ E2E ςετͰͷϑΥʔΧεૢ࡞Ͱ΋֬ೝ • ϑΥʔΧεॱংͷՄࢹԽ

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

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

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

    ◦ taba11y ◦ Firefox DevTools ▪ ʮAccessibilityʯλϒΑΓʮShow Tabbing Orderʯ ͪͳΈʹ Firefox ͷ DevTools Ͱ͸ ඪ४ͷػೳͰϑΥʔΧεॱংΛ֬ೝͰ͖ΔΑ͏ʹͳ͍ͬͯ·͢ɻ
  24. εΫϦʔϯϦʔμʔ • Windows OSʮφϨʔλʔʯ • macOS ˍ iOSʮVoiceOverʯ • AndroidʮTalkBackʯ

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

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

    • NVDA
 • ࢧԉٕज़ࣗಈςετ༻πʔϧ ◦ Guidepup ◦ web-test-runner-voiceover ◦ VoiceOver.js ·ͨɺҰ෦ͷࢧԉٕज़ͷΈͰ͕͢ ࣗಈςετͱ࣮ͯ͠ࢪͰ͖ΔͨΊͷπʔϧ΋ެ։͞Ε͍ͯ·͢ɻ
  27. Thanks for listening! Vue Fes Japan Online 2022 - 2022/10/16

    Ҏ্ͰൃදΛऴΘΓ·͢ɻ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ