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
570
Core Web Vitals についてあれやこれや
maepon
1
400
大規模サイトにおけるSEO観点でのURL設計
maepon
4
3.8k
ミーティングの「進行役」を考える
maepon
1
560
ミーティングの「進行役」考
maepon
1
580
DB使わずWordPressのデータ取得
maepon
0
560
Other Decks in Technology
See All in Technology
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
550
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
230
CSPMとのつきあい方
nantokanare
0
110
OPENLOGI Company Profile
hr01
0
60k
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
260
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
140
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
560
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
5
6.9k
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
120
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
840
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
310
困難を「一般解」で解く
fujiwara3
8
2.4k
Featured
See All Featured
Scaling GitHub
holman
459
140k
What's in a price? How to price your products and services
michaelherold
244
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building an army of robots
kneath
303
45k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Producing Creativity
orderedlist
PRO
344
40k
Optimizing for Happiness
mojombo
377
70k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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 ͳͲʣ