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
560
拡張機能でええんちゃう?
maepon
1
600
UDフォントの話
maepon
0
400
箱ひげ図
maepon
0
600
Core Web Vitals についてあれやこれや
maepon
1
420
大規模サイトにおけるSEO観点でのURL設計
maepon
4
4k
ミーティングの「進行役」を考える
maepon
1
590
ミーティングの「進行役」考
maepon
1
590
DB使わずWordPressのデータ取得
maepon
0
590
Other Decks in Technology
See All in Technology
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
120
AWS認定を取る中で感じたこと
siromi
1
140
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
12k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
120
解析の定理証明実践@Lean 4
dec9ue
1
210
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
210
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
100
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
1
140
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
340
Featured
See All Featured
Visualization
eitanlees
146
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
RailsConf 2023
tenderlove
30
1.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Adopting Sorbet at Scale
ufuk
77
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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 ͳͲʣ