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

WAI-ARIAを活用したJavaScriptによるDOM操作

 WAI-ARIAを活用したJavaScriptによるDOM操作

第六回okayama-js勉強会でお話しました

F391c64c645e6c6345cc37fd806d88f2?s=128

Masayuki Maekawa

November 20, 2016
Tweet

Transcript

  1. 8"*"3*"Λ׆༻ͨ͠ +BWB4DSJQUʹΑΔ%0.ૢ࡞ લ઒ণ޾

  2. 8"*"3*" Θ͔Γ΍͍͢ʮ8"*"3*"ʯ࢓༷ղઆॻ
 େ౻װ
 IUUQTXXXBNB[PODPKQEQ#9,/7.

  3. rΘ͔Γ΍͍͢ʮ8"*"3*"ʯ࢓༷ղઆॻ l΢ΣϒΞϓϦέʔγϣϯʹ͓͚Δ༷ʑͳΞΫη γϏϦςΟ্ͷ໰୊Λղܾ͢ΔͨΊʹ༻ҙ͞Ε ͨͷ͕8"*"3*"Ͱ͢ɻ8"*"3*"͸)5.-ͷ࢓ ༷ͷҰ෦ͱͯ͠૊Έࠐ·Ε͓ͯΓɺ)5.-Ͱ࡞ ΒΕͨ΢ΣϒϖʔδͰ͋Ε͹͙͢ʹͰ΋࢖͍࢝ ΊΔ͜ͱ͕Ͱ͖·͢ɻz

  4. 8"*"3*" w SPMFଐੑ w BSJB99999ଐੑ

  5. SPMFଐੑ ྫ͑͹ʝʝ <ul>
 <li>hoge</li>
 <li>huga</li>
 </ul> ͸ɺʮϦετʯΛϚʔΫΞοϓ͍ͯ͠·͕͢ɺ͜ͷ৔ ߹ʮVMʯ͸ʮSPMFlMJTUzʯɺʮMJʯ͸ʮSPMFlMJTUJUFNzʯ Λ͍࣋ͬͯΔ͜ͱʹͳΓ·͢ɻ

  6. SPMFଐੑ ͱ͜Ζ͕ɺॾࣄ৘ʹΑΓʝʝ <div>
 <div>hoge</div>
 <div>huga</div>
 </div> ͳΜͯϚʔΫΞοϓʹͳͬͯ͠·ͬͨ৔߹ɻ
 ʢ͋͘·Ͱ΋ۃ୺ͳྫͰ͢Αʣ
 SPMFଐੑΛར༻ͯ͠ʝʝ

  7. SPMFଐੑ ͜ͷΑ͏ͳϚʔΫΞοϓͰҙຯͷ্ॻ͖͕ՄೳͰ͢ <div role=“list”>
 <div role=“listitem”>hoge</div>
 <div role=“listitem”>huga</div>
 </div> ͱ͍͏ܗͰSPMFଐੑΛར༻ͯ͠ҙຯ෇͚ͷ্ॻ͖͕Մ

    ೳͰ͢ɻ7PJDF0WFSΛར༻ͯ͠6TFS"HFOU͕ͲͷΑ͏ʹ ೝࣝ͢Δ͔ࢼͯ͠Έ·͠ΐ͏ɻ
  8. σϞ

  9. SPMFଐੑ ౰વϦετ͚ͩͰ͸ͳ͘ɺ΄͔ͷ༷ʑͳSPMF͕༻ҙ͞ Ε͍ͯ·͢ɻྫ͑͹ʝʝ w OBWJHBUJPOˠOBW w NBJOˠNBJO w QSFTFOUBUJPOˠEJWTQBO ͳͲͳͲͳͲʝʝ

  10. SPMFଐੑ SPMFଐੑ͸ࠓճͷओ୊Ͱ͸ͳ͍ͷͰ͕͢ɺ΢ΣϒΞϓ ϦέʔγϣϯͰ͓ͦΒͨ͘͘͞Μग़ͯ͘Δ͍ͭ͜ʝʝ w CVUUPO ʹ͍ͭͯ͸ܰ͘σϞ͠·͢

  11. SPMFଐੑ <button>ొ࿥͢Δ</button>
 <span>ొ࿥͢Δ</span>
 <span role="button">ొ࿥͢Δ</span>
 <a>ొ࿥͢Δ</a>
 <a role="button">ొ࿥͢Δ</a> ͦΕͧΕͲͷΑ͏ʹ6"ʹѻΘΕΔ͔ʁ

  12. एׯԣಓͰ͕͢ʝ

  13. ͜ͷσϞɺ
 7PJDF0WFS੾ͬͨΒʝʝ

  14. UBCJOEFYlz
 ʮΩʔϘʔυૢ࡞ʯͷཁ

  15. UBCJOEFYlz w ͜ͷࢦఆΛ͓ͯ͘͠ͱɺ)5.-ͷهड़ͷॱ൪ͰUBC ΩʔʹΑΔϑΥʔΧεΛ౰ͯͯ͘ΕΔɻ w TQBOͳͲͰૢ࡞Λ෇͚͍ͨ৔߹͸UBCJOEFYΛࢦఆ͠ ͭͭɺPOLFZQSFTTͷΠϕϯτΛऔΔ w ͦͷ৔߹LFZDPEF FOUFS

    ͳͲͰ൑ఆ
  16. SPMFଐੑ طଘͷʮ)5.-λάʯͷҙຯΛΑΓৄࡉʹͨ͠΋ͷ΋ ͋Γ·͢ɻྫ͑͹ʝʝ w TFBSDIˠݕࡧػೳͷ͋ΔྖҬ w EJSFDUPSZˠ੩తͳ໨࣍ͳͲ w UPPMCBSˠπʔϧόʔ ͳͲͳͲͳͲʝʝ

  17. ʝʝͱઆ໌͠΍͘͢
 ਐΊ·͕ͨ͠ʝʝ

  18. SPMFଐੑ w ϥϯυϚʔΫϩʔϧ w จॻߏ଄ϩʔϧ w ΢ΟδΣοτϩʔϧ w ந৅ϩʔϧʢ࢖͍·ͤΜ͕ʣ ͱ͍ͬͨମܥతͳ෼ྨ͕͋Γ·͢ɻ

  19. SPMFଐੑ w શ෦Ͱछྨ w ༷ʑͳҙຯ෇͚ w ͲͷΑ͏ʹ6"ʹ͕ೝࣝͯ͠ಈ࡞͢ΔΑ͏ʹظ଴͞Ε ͍ͯΔ͔ɺ࣮ࡍͲ͏ͳͷ͔ʁ ۷Γ͕͍ͷ͋ΔྖҬͰ͢

  20. Θ͔Γ΍͍͢ʮ8"*"3*"ʯ࢓༷ղઆॻ
 େ౻װ
 IUUQBN[OUPH%TI8ˡΞϑΟ஫ҙ

  21. ίʔσΟϯά8FCΞΫηγϏϦςΟ
 ϔΠυϯɾϐΧϦϯάஶଠాྑయɺҏݪྗ໵༁
 IUUQBN[OUPG%21WˡΞϑΟ஫ҙ

  22. ηογϣϯ͸
 ϦΫΤετ͋Ε͹
 اը͠·͢

  23. BSJB99999ଐੑ w ࠓճͷςʔϚʹͱͯ΋ؔΘͬͯ͘Δଐੑ w SPMFଐੑ΋ؔΘͬͯ͸͍·͕͢ w ͦΕͧΕͷཁૉʹରͯ͠ɺεςʔτ΍ϓϩύςΟΛ ෇͚͍ͯ͘ଐੑ w +BWB4DSJQUͳͲͰૢ࡞ɾมߋ͢Δର৅ͱͯ͠ར༻

    w $44΋૊Έ߹ΘͤΔͱͳ͓ྑ͔͠ͱ
  24. ྫ͑͹ʝʝ

  25. දࣔඇදࣔͷ੾Γସ͑ w  bIPHF` UPHHMF  w DMBTTlJTWJTJCMFz w DMBTTlJTIJEEFOz

    ͳͲͳͲɺ༷ʑͳϧʔϧͰ΍ͬͯ·ͤΜ͔ʁ
  26. BSJBIJEEFOଐੑ w ࢓༷ͱͯ͠ଘࡏ͍ͯ͠·͢ w BSJBIJEEFOlUSVFzBSJBIJEEFOlGBMTFz /* CSS */
 [aria-hidden=“true”]{display: none}

    //JavaScript(jQuery)
 $(‘#hoge’).attr(‘aria-hidden’,true);
  27. σϞ

  28. <p>
 <button
 id="toggle-button"
 aria-controls="hidden-show">
 toggle
 </button>
 </p>
 
 <p
 id="hidden-show"


    aria-hidden="true">
 show/hidden
 </p>
  29. BSJBDPOUSPMTଐੑ w τϦΨʔͷૢ࡞ର৅ͷཁૉͷJEΛࢦఆ w +BWB4DSJQUͰૢ࡞ର৅ͷϙΠϯλΛऔಘͰ͖Δ

  30. ͔͜͜Β͍Ζ͍Ζ
 ঺հ͠·͕͢ʝʝ

  31. ΞΫηγϏϦςΟʹ
 ৄ͍͠ਓʹΑ͘ݴΘΕΔ
 ͓ݴ༿͕͋Γ·͢

  32. #PPUTUSBQͱ͔ͷํ͕
 ΑͬΆͲͪΌΜͱͯ͠Δ

  33. Ͳ͏͍͏ҙຯʁ w ޽ͷʢྫ͑͹ʣK2VFSZϥΠϒϥϦͱ͔ରԠ͕·ͪ· ͪͰཁ݅Λຬ͍ͨͯ͠Δ΋ͷ͔݁ߏ͋΍͍͠΋ͷ΋ ଟ͍ w ϓϩμΫτͱͯ͠੒ཱ͍ͯ͠Δ#PPUTUSBQ΍ 'PVOEBUJPOͳͲ͸΍͸ΓҰఆͷج४Λຬ͍ͨͯ͠Δ w Ͱ͸ΦϨΦϨղऍΑΓ͸Ұ୴ͦ͏͍ͬͨ΋ͷΛࢀর

    ͯ͠Έ·͠ΐ͏
  34. ࠓճ͸1BZ1BMۘ੡ͷ#PPUTUSBQ"DDFTTJCJMJUZ1MVHJOΛ ྫʹ͢͢ΊͯΈ·͢ IUUQQBZQBMHJUIVCJPCPPUTUSBQBDDFTTJCJMJUZ QMVHJOEFNPIUNM

  35. 1VMMEPXO

  36. <li> <a id="drop1" href="#" role="button" aria- expanded="true">Dropdown</a> <ul role="menu" aria-labelledby="drop1">

    <li role="presentation"><a role="menuitem" href=“http://…”>Action</a></li> </ul> </li>
  37. BSJBFYQBOEFE w ͦͷཁૉࣗମɺ·ͨ͸ૢ࡞͍ͯ͠Δཁૉ͕ʮల։ ऩೲ͞Ε͍ͯΔ͔ʯΛUSVFGBMTFͰࣔ͢

  38. BSJBMBCFMMFECZ w ֘౰ͷཁૉͷϥϕϧͱͳ͍ͬͯΔཁૉͷJEΛࢦఆ <a id="drop1" href="#" role="button" aria- expanded="true">Dropdown</a> <ul

    role="menu" aria-labelledby="drop1">
  39. /* CSS */
 <style>
 [aria-expanded="false"] + ul{
 display: none;
 }


    </style> //JavaScript(jQuery)
 $('#hoge').attr(
 'aria-expanded',
 $(‘#hoge’).attr('aria-expanded') !== 'true'
 );

  40. ·ͩ·͍ͩͬͺ͍
 ͋Γ·͢Α

  41. Θ͔Γ΍͍͢ʮ8"*"3*"ʯ࢓༷ղઆॻ
 େ౻װ
 IUUQBN[OUPH%TI8ˡΞϑΟ஫ҙ

  42. ίʔσΟϯά8FCΞΫηγϏϦςΟ
 ϔΠυϯɾϐΧϦϯάஶଠాྑయɺҏݪྗ໵༁
 IUUQBN[OUPG%21WˡΞϑΟ஫ҙ

  43. ·ͱΊ w 8"*"3*"ͷSPMFBSJB99999͸)5.-ͷҙຯΛิ ॿڧԽΛ͢Δ࢓༷ w DMBTT΍EBUB99999ͷಠࣗϧʔϧΑΓ͸ڞ௨Խ͠ ΍͍͢ w ଐੑηϨΫλͷ࢖͍ํ͕؊ʢK2VFSZRVFSZ4FMFDUPS ͳͲʣ