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

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 ͳͲʣ