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

by Masayuki Maekawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

SPMFଐੑ ྫ͑͹ʝʝ

hoge
huga

͸ɺʮϦετʯΛϚʔΫΞοϓ͍ͯ͠·͕͢ɺ͜ͷ৔ ߹ʮVMʯ͸ʮSPMFlMJTUzʯɺʮMJʯ͸ʮSPMFlMJTUJUFNzʯ Λ͍࣋ͬͯΔ͜ͱʹͳΓ·͢ɻ

Slide 6

Slide 6 text

SPMFଐੑ ͱ͜Ζ͕ɺॾࣄ৘ʹΑΓʝʝ

hoge

huga

ͳΜͯϚʔΫΞοϓʹͳͬͯ͠·ͬͨ৔߹ɻ  ʢ͋͘·Ͱ΋ۃ୺ͳྫͰ͢Αʣ  SPMFଐੑΛར༻ͯ͠ʝʝ

Slide 7

Slide 7 text

SPMFଐੑ ͜ͷΑ͏ͳϚʔΫΞοϓͰҙຯͷ্ॻ͖͕ՄೳͰ͢

hoge

huga

ͱ͍͏ܗͰSPMFଐੑΛར༻ͯ͠ҙຯ෇͚ͷ্ॻ͖͕Մ ೳͰ͢ɻ7PJDF0WFSΛར༻ͯ͠6TFS"HFOU͕ͲͷΑ͏ʹ ೝࣝ͢Δ͔ࢼͯ͠Έ·͠ΐ͏ɻ

Slide 8

Slide 8 text

σϞ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

SPMFଐੑ ొ࿥͢Δ  ొ࿥͢Δ  ొ࿥͢Δ  ొ࿥͢Δ  ొ࿥͢Δ ͦΕͧΕͲͷΑ͏ʹ6"ʹѻΘΕΔ͔ʁ

Slide 12

Slide 12 text

एׯԣಓͰ͕͢ʝ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ʝʝͱઆ໌͠΍͘͢  ਐΊ·͕ͨ͠ʝʝ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

BSJB99999ଐੑ w ࠓճͷςʔϚʹͱͯ΋ؔΘͬͯ͘Δଐੑ w SPMFଐੑ΋ؔΘͬͯ͸͍·͕͢ w ͦΕͧΕͷཁૉʹରͯ͠ɺεςʔτ΍ϓϩύςΟΛ ෇͚͍ͯ͘ଐੑ w +BWB4DSJQUͳͲͰૢ࡞ɾมߋ͢Δର৅ͱͯ͠ར༻ w $44΋૊Έ߹ΘͤΔͱͳ͓ྑ͔͠ͱ

Slide 24

Slide 24 text

ྫ͑͹ʝʝ

Slide 25

Slide 25 text

දࣔඇදࣔͷ੾Γସ͑ w bIPHF` UPHHMF w DMBTTlJTWJTJCMFz w DMBTTlJTIJEEFOz ͳͲͳͲɺ༷ʑͳϧʔϧͰ΍ͬͯ·ͤΜ͔ʁ

Slide 26

Slide 26 text

BSJBIJEEFOଐੑ w ࢓༷ͱͯ͠ଘࡏ͍ͯ͠·͢ w BSJBIJEEFOlUSVFzBSJBIJEEFOlGBMTFz /* CSS */  [aria-hidden=“true”]{display: none} //JavaScript(jQuery)  $(‘#hoge’).attr(‘aria-hidden’,true);

Slide 27

Slide 27 text

σϞ

Slide 28

Slide 28 text

    toggle   

      show/hidden 

Slide 29

Slide 29 text

BSJBDPOUSPMTଐੑ w τϦΨʔͷૢ࡞ର৅ͷཁૉͷJEΛࢦఆ w +BWB4DSJQUͰૢ࡞ର৅ͷϙΠϯλΛऔಘͰ͖Δ

Slide 30

Slide 30 text

͔͜͜Β͍Ζ͍Ζ  ঺հ͠·͕͢ʝʝ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ࠓճ͸1BZ1BMۘ੡ͷ#PPUTUSBQ"DDFTTJCJMJUZ1MVHJOΛ ྫʹ͢͢ΊͯΈ·͢ IUUQQBZQBMHJUIVCJPCPPUTUSBQBDDFTTJCJMJUZ QMVHJOEFNPIUNM

Slide 35

Slide 35 text

1VMMEPXO

Slide 36

Slide 36 text

Dropdown

Action

Slide 37

Slide 37 text

BSJBFYQBOEFE w ͦͷཁૉࣗମɺ·ͨ͸ૢ࡞͍ͯ͠Δཁૉ͕ʮల։ ऩೲ͞Ε͍ͯΔ͔ʯΛUSVFGBMTFͰࣔ͢

Slide 38

Slide 38 text

BSJBMBCFMMFECZ w ֘౰ͷཁૉͷϥϕϧͱͳ͍ͬͯΔཁૉͷJEΛࢦఆ Dropdown

Slide 39

Slide 39 text

/* CSS */    [aria-expanded="false"] + ul{  display: none;  }  //JavaScript(jQuery)  $('#hoge').attr(  'aria-expanded',  $(‘#hoge’).attr('aria-expanded') !== 'true'  ); 

Slide 40

Slide 40 text

·ͩ·͍ͩͬͺ͍  ͋Γ·͢Α

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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