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
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
13k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.6k
低レイヤを知りたい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
360
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.2k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
0
210
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
RailsConf 2023
tenderlove
30
1.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fireside Chat
paigeccino
37
3.5k
Navigating Team Friction
lara
187
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Thoughts on Productivity
jonyablonski
69
4.7k
Designing for humans not robots
tammielis
253
25k
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 ͳͲʣ