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

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

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
    "DDFTTJCJMJUZ
    1MVHJOΛ ྫʹ͢͢ΊͯΈ·͢
    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 ͳͲʣ