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
580
拡張機能でええんちゃう?
maepon
1
630
UDフォントの話
maepon
0
410
箱ひげ図
maepon
0
620
Core Web Vitals についてあれやこれや
maepon
1
430
大規模サイトにおけるSEO観点でのURL設計
maepon
4
4.2k
ミーティングの「進行役」を考える
maepon
1
600
ミーティングの「進行役」考
maepon
1
610
DB使わずWordPressのデータ取得
maepon
0
620
Other Decks in Technology
See All in Technology
実装で解き明かす並行処理の歴史
zozotech
PRO
1
640
許しとアジャイル
jnuank
1
140
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
360
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
560
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
110
Findy Team+のSOC2取得までの道のり
rvirus0817
0
500
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
「Verify with Wallet API」を アプリに導入するために
hinakko
1
260
社内お問い合わせBotの仕組みと学び
nish01
1
520
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Facilitating Awesome Meetings
lara
56
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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 ͳͲʣ