Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WAI-ARIAを活用したJavaScriptによるDOM操作
Search
Masayuki Maekawa
November 20, 2016
Technology
4
1.6k
WAI-ARIAを活用したJavaScriptによるDOM操作
第六回okayama-js勉強会でお話しました
Masayuki Maekawa
November 20, 2016
Tweet
Share
More Decks by Masayuki Maekawa
See All by Masayuki Maekawa
解決策をひとつ増やそう!ブラウザ拡張機能作成のススメ
maepon
1
520
拡張機能でええんちゃう?
maepon
1
560
UDフォントの話
maepon
0
370
箱ひげ図
maepon
0
560
Core Web Vitals についてあれやこれや
maepon
1
400
大規模サイトにおけるSEO観点でのURL設計
maepon
4
3.8k
ミーティングの「進行役」を考える
maepon
1
560
ミーティングの「進行役」考
maepon
1
570
DB使わずWordPressのデータ取得
maepon
0
560
Other Decks in Technology
See All in Technology
AIエージェント開発のノウハウと課題
pharma_x_tech
0
430
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
740
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
470
php-conference-nagoya-2025
fuwasegu
0
150
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
クラウド食堂とは?
hiyanger
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
300
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Site-Speed That Sticks
csswizardry
4
410
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Speed Design
sergeychernyshev
27
810
Become a Pro
speakerdeck
PRO
26
5.2k
Embracing the Ebb and Flow
colly
84
4.6k
Transcript
8"*"3*"Λ׆༻ͨ͠ +BWB4DSJQUʹΑΔ%0.ૢ࡞ લণ
8"*"3*" Θ͔Γ͍͢ʮ8"*"3*"ʯ༷ղઆॻ େ౻װ IUUQTXXXBNB[PODPKQEQ#9,/7.
rΘ͔Γ͍͢ʮ8"*"3*"ʯ༷ղઆॻ lΣϒΞϓϦέʔγϣϯʹ͓͚Δ༷ʑͳΞΫη γϏϦςΟ্ͷΛղܾ͢ΔͨΊʹ༻ҙ͞Ε ͨͷ͕8"*"3*"Ͱ͢ɻ8"*"3*")5.-ͷ ༷ͷҰ෦ͱͯ͠Έࠐ·Ε͓ͯΓɺ)5.-Ͱ࡞ ΒΕͨΣϒϖʔδͰ͋Ε͙͢ʹͰ͍࢝ ΊΔ͜ͱ͕Ͱ͖·͢ɻz
8"*"3*" w SPMFଐੑ w BSJB99999ଐੑ
SPMFଐੑ ྫ͑ʝʝ <ul> <li>hoge</li> <li>huga</li> </ul> ɺʮϦετʯΛϚʔΫΞοϓ͍ͯ͠·͕͢ɺ͜ͷ ߹ʮVMʯʮSPMFlMJTUzʯɺʮMJʯʮSPMFlMJTUJUFNzʯ Λ͍࣋ͬͯΔ͜ͱʹͳΓ·͢ɻ
SPMFଐੑ ͱ͜Ζ͕ɺॾࣄʹΑΓʝʝ <div> <div>hoge</div> <div>huga</div> </div> ͳΜͯϚʔΫΞοϓʹͳͬͯ͠·ͬͨ߹ɻ ʢ͋͘·ͰۃͳྫͰ͢Αʣ SPMFଐੑΛར༻ͯ͠ʝʝ
SPMFଐੑ ͜ͷΑ͏ͳϚʔΫΞοϓͰҙຯͷ্ॻ͖͕ՄೳͰ͢ <div role=“list”> <div role=“listitem”>hoge</div> <div role=“listitem”>huga</div> </div> ͱ͍͏ܗͰSPMFଐੑΛར༻ͯ͠ҙຯ͚ͷ্ॻ͖͕Մ
ೳͰ͢ɻ7PJDF0WFSΛར༻ͯ͠6TFS"HFOU͕ͲͷΑ͏ʹ ೝࣝ͢Δ͔ࢼͯ͠Έ·͠ΐ͏ɻ
σϞ
SPMFଐੑ વϦετ͚ͩͰͳ͘ɺ΄͔ͷ༷ʑͳSPMF͕༻ҙ͞ Ε͍ͯ·͢ɻྫ͑ʝʝ w OBWJHBUJPOˠOBW w NBJOˠNBJO w QSFTFOUBUJPOˠEJWTQBO ͳͲͳͲͳͲʝʝ
SPMFଐੑ SPMFଐੑࠓճͷओͰͳ͍ͷͰ͕͢ɺΣϒΞϓ ϦέʔγϣϯͰ͓ͦΒͨ͘͘͞Μग़ͯ͘Δ͍ͭ͜ʝʝ w CVUUPO ʹ͍ͭͯܰ͘σϞ͠·͢
SPMFଐੑ <button>ొ͢Δ</button> <span>ొ͢Δ</span> <span role="button">ొ͢Δ</span> <a>ొ͢Δ</a> <a role="button">ొ͢Δ</a> ͦΕͧΕͲͷΑ͏ʹ6"ʹѻΘΕΔ͔ʁ
एׯԣಓͰ͕͢ʝ
͜ͷσϞɺ 7PJDF0WFSͬͨΒʝʝ
UBCJOEFYlz ʮΩʔϘʔυૢ࡞ʯͷཁ
UBCJOEFYlz w ͜ͷࢦఆΛ͓ͯ͘͠ͱɺ)5.-ͷهड़ͷॱ൪ͰUBC ΩʔʹΑΔϑΥʔΧεΛͯͯ͘ΕΔɻ w TQBOͳͲͰૢ࡞Λ͚͍ͨ߹UBCJOEFYΛࢦఆ͠ ͭͭɺPOLFZQSFTTͷΠϕϯτΛऔΔ w ͦͷ߹LFZDPEF FOUFS
ͳͲͰఆ
SPMFଐੑ طଘͷʮ)5.-λάʯͷҙຯΛΑΓৄࡉʹͨ͠ͷ ͋Γ·͢ɻྫ͑ʝʝ w TFBSDIˠݕࡧػೳͷ͋ΔྖҬ w EJSFDUPSZˠ੩తͳ࣍ͳͲ w UPPMCBSˠπʔϧόʔ ͳͲͳͲͳͲʝʝ
ʝʝͱઆ໌͘͢͠ ਐΊ·͕ͨ͠ʝʝ
SPMFଐੑ w ϥϯυϚʔΫϩʔϧ w จॻߏϩʔϧ w ΟδΣοτϩʔϧ w நϩʔϧʢ͍·ͤΜ͕ʣ ͱ͍ͬͨମܥతͳྨ͕͋Γ·͢ɻ
SPMFଐੑ w શ෦Ͱछྨ w ༷ʑͳҙຯ͚ w ͲͷΑ͏ʹ6"ʹ͕ೝࣝͯ͠ಈ࡞͢ΔΑ͏ʹظ͞Ε ͍ͯΔ͔ɺ࣮ࡍͲ͏ͳͷ͔ʁ ۷Γ͕͍ͷ͋ΔྖҬͰ͢
Θ͔Γ͍͢ʮ8"*"3*"ʯ༷ղઆॻ େ౻װ IUUQBN[OUPH%TI8ˡΞϑΟҙ
ίʔσΟϯά8FCΞΫηγϏϦςΟ ϔΠυϯɾϐΧϦϯάஶଠాྑయɺҏݪྗ༁ IUUQBN[OUPG%21WˡΞϑΟҙ
ηογϣϯ ϦΫΤετ͋Ε اը͠·͢
BSJB99999ଐੑ w ࠓճͷςʔϚʹͱͯؔΘͬͯ͘Δଐੑ w SPMFଐੑؔΘ͍ͬͯ·͕͢ w ͦΕͧΕͷཁૉʹରͯ͠ɺεςʔτϓϩύςΟΛ ͚͍ͯ͘ଐੑ w +BWB4DSJQUͳͲͰૢ࡞ɾมߋ͢Δରͱͯ͠ར༻
w $44Έ߹ΘͤΔͱͳ͓ྑ͔͠ͱ
ྫ͑ʝʝ
දࣔඇදࣔͷΓସ͑ w bIPHF` UPHHMF w DMBTTlJTWJTJCMFz w DMBTTlJTIJEEFOz
ͳͲͳͲɺ༷ʑͳϧʔϧͰͬͯ·ͤΜ͔ʁ
BSJBIJEEFOଐੑ w ༷ͱͯ͠ଘࡏ͍ͯ͠·͢ w BSJBIJEEFOlUSVFzBSJBIJEEFOlGBMTFz /* CSS */ [aria-hidden=“true”]{display: none}
//JavaScript(jQuery) $(‘#hoge’).attr(‘aria-hidden’,true);
σϞ
<p> <button id="toggle-button" aria-controls="hidden-show"> toggle </button> </p> <p id="hidden-show"
aria-hidden="true"> show/hidden </p>
BSJBDPOUSPMTଐੑ w τϦΨʔͷૢ࡞ରͷཁૉͷJEΛࢦఆ w +BWB4DSJQUͰૢ࡞ରͷϙΠϯλΛऔಘͰ͖Δ
͔͜͜Β͍Ζ͍Ζ հ͠·͕͢ʝʝ
ΞΫηγϏϦςΟʹ ৄ͍͠ਓʹΑ͘ݴΘΕΔ ͓ݴ༿͕͋Γ·͢
#PPUTUSBQͱ͔ͷํ͕ ΑͬΆͲͪΌΜͱͯ͠Δ
Ͳ͏͍͏ҙຯʁ w ͷʢྫ͑ʣK2VFSZϥΠϒϥϦͱ͔ରԠ͕·ͪ· ͪͰཁ݅Λຬ͍ͨͯ͠Δͷ͔݁ߏ͍͋͠ͷ ଟ͍ w ϓϩμΫτͱཱ͍ͯͯ͠͠Δ#PPUTUSBQ 'PVOEBUJPOͳͲΓҰఆͷج४Λຬ͍ͨͯ͠Δ w ͰΦϨΦϨղऍΑΓҰ୴ͦ͏͍ͬͨͷΛࢀর
ͯ͠Έ·͠ΐ͏
ࠓճ1BZ1BMۘͷ#PPUTUSBQ"DDFTTJCJMJUZ1MVHJOΛ ྫʹ͢͢ΊͯΈ·͢ IUUQQBZQBMHJUIVCJPCPPUTUSBQBDDFTTJCJMJUZ QMVHJOEFNPIUNM
1VMMEPXO
<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>
BSJBFYQBOEFE w ͦͷཁૉࣗମɺ·ͨૢ࡞͍ͯ͠Δཁૉ͕ʮల։ ऩೲ͞Ε͍ͯΔ͔ʯΛUSVFGBMTFͰࣔ͢
BSJBMBCFMMFECZ w ֘ͷཁૉͷϥϕϧͱͳ͍ͬͯΔཁૉͷJEΛࢦఆ <a id="drop1" href="#" role="button" aria- expanded="true">Dropdown</a> <ul
role="menu" aria-labelledby="drop1">
/* CSS */ <style> [aria-expanded="false"] + ul{ display: none; }
</style> //JavaScript(jQuery) $('#hoge').attr( 'aria-expanded', $(‘#hoge’).attr('aria-expanded') !== 'true' );
·ͩ·͍ͩͬͺ͍ ͋Γ·͢Α
Θ͔Γ͍͢ʮ8"*"3*"ʯ༷ղઆॻ େ౻װ IUUQBN[OUPH%TI8ˡΞϑΟҙ
ίʔσΟϯά8FCΞΫηγϏϦςΟ ϔΠυϯɾϐΧϦϯάஶଠాྑయɺҏݪྗ༁ IUUQBN[OUPG%21WˡΞϑΟҙ
·ͱΊ w 8"*"3*"ͷSPMFBSJB99999)5.-ͷҙຯΛิ ॿڧԽΛ͢Δ༷ w DMBTTEBUB99999ͷಠࣗϧʔϧΑΓڞ௨Խ͠ ͍͢ w ଐੑηϨΫλͷ͍ํ͕؊ʢK2VFSZRVFSZ4FMFDUPS ͳͲʣ