Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Accessible な実装を求めたら大変だった
Yuichi Sugiyama
November 28, 2018
Technology
3
1.5k
Accessible な実装を求めたら大変だった
Yuichi Sugiyama
November 28, 2018
Tweet
Share
More Decks by Yuichi Sugiyama
See All by Yuichi Sugiyama
20年ものの巨大プロダクトをKubernetesに移行している話 後日談/Garoon on Kubernetes after talk
oogfranz
0
150
20年ものの巨大プロダクトをKubernetesに移行している話/Garoon on Kubernetes
oogfranz
0
110
PHPアプリケーションだってモニタリングしたい / Monitoring PHP application
oogfranz
1
340
効果的な静的解析の CI導入パターンを求めて / Great static analysis with CI
oogfranz
3
2.7k
Dev-meets-Ops
oogfranz
1
690
GitHub力の低い僕でも、 OSSコントリビュートできたワケ / GitHub Power
oogfranz
1
310
静的解析の育て方 / How to make your static analysis strong
oogfranz
3
2.1k
改善失敗して学ぶ、 レガシープロダクトに立ち向かうチーム作り。
oogfranz
16
8.7k
PhpStormで重複コードを一瞬で見つける
oogfranz
2
390
Other Decks in Technology
See All in Technology
SRE Lounge 2023/SRE Lounge 2023
lmi
1
280
Periodic Multi-Agent Path Planning
hziwara
0
110
01_ユーザーリサーチ実施の進め方
kouzoukaikaku
0
340
Exploring MapStore Release 2022.02: improved 3DTiles support and more
simboss
PRO
0
340
「一通りできるようになった」その先の話
hitomi___kt
0
120
FlexScan HD2452Wの 後継を探して
tring
0
6.2k
メドレー エンジニア採用資料/ Medley Engineer Guide
medley
3
5.1k
Cloudflare Workersで動くOG画像生成器
aiji42
1
490
エアドロップ for オープンソースプロジェクト
epicsdao
0
380
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
250
Multi-Cloud Gatewayでデータを統治せよ!/ Data Federation with MCG
tutsunom
1
220
SPA・SSGでSSRのようなOGP対応!
simo123
2
150
Featured
See All Featured
Bash Introduction
62gerente
601
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
Practical Orchestrator
shlominoach
178
8.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
For a Future-Friendly Web
brad_frost
166
7.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
570
How GitHub (no longer) Works
holman
298
140k
What the flash - Photography Introduction
edds
64
10k
Rails Girls Zürich Keynote
gr2m
87
12k
What's new in Ruby 2.0
geeforr
336
30k
Thoughts on Productivity
jonyablonski
49
2.7k
How STYLIGHT went responsive
nonsquared
89
4.2k
Transcript
Accessibleͳ ࣮ΛٻΊͨΒ େมͩͬͨ
Who am I ‱ਿࢁ ༞Ұɹ@oogFranz ‱ࣄ༰ •ϓϩάϥϚ •εΫϥϜϚελʔ •δϟζϕʔγετʢMASHݭָஂʣ
Who am I ‱ਿࢁ ༞Ұɹ@oogFranz ‱ࣄ༰ •ϓϩάϥϚ •εΫϥϜϚελʔ •δϟζϕʔγετʢMASHݭָஂʣ
ϓϩάϥϚͷཱͪҐஔ • →HTMLͷΈཱͯσβΠφʔ • PGԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮ / / A
• →HTMLͷΈཱͯσβΠφʔ • PGԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮ A D G /
I / ϓϩάϥϚͷཱͪҐஔ
PGͷཱͪҐஔ • →HTMLͷΈཱͯσβΠφʔ • PGԿΛ͢Δ͔ʁ • →Accessibleͳεςʔτͷ࣮ A D G
/ I / ૢ࡞ՄೳͰݎ࿚ͳ6*ͷ࣮Λ୲
࣮ྫ • ఱؾ༧ใͰશࠃ130Ҏ্ͷҬΛબΔπϦʔ
࣮ྫ • ఱؾ༧ใͰશࠃ130Ҏ্ͷҬΛબΔπ Ϧʔ ΞΫηγϏϦςΟରԠͰ ఆͷഒɺ࣮ʹ͔͔ͬͯ͠·ͬͨ
ͳʹʹ͕͔͔͔࣌ؒͬͨ • ΩʔϘʔυରԠ • State ͱ View ͷ࿈ಈ • ಈ࡞֬ೝͷ͠͞
͜͏Ͱ͖ͯͨΒΑ͔ͬͨɺΛڞ༗͠·͢ʂ
ΩʔϘʔυରԠ
ΩʔϘʔυରԠ ಈ͖ΛҰͭҰ࣮ͭ
ΩʔϘʔυରԠ ಈ͖ΛҰͭҰ࣮ͭ Ωʔºૢ࡞ύʔπ࣮ ࣮ίετ͕Ұؾʹ;͘ΒΉɻɻɻ
͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • ΩʔϘʔυͰͲ͏ಈ͔ͤΔ͖͔ɺ Λ͋Β͔͡ΊѲ͢Δ https://www.w3.org/WAI/GL/wiki/ Using_ARIA_trees • ΑΓγϯϓϧͳUIͳ͍͔ͷٻ
State ͱ Viewͷ࿈ಈ <li id = "region_0" aria-label = "ւಓ"
role = "treeitem" class = "icon_arrow_close" aria-expanded = "false" > <li id = "region_1" aria-label = "౦” role = "treeitem" class = "icon_arrow_open" aria-expanded = "true">
State ͱ Viewͷ࿈ಈ <li id = "region_0" aria-label = "ւಓ"
role = "treeitem" class = "icon_arrow_close" aria-expanded = "false" > <li id = "region_1" aria-label = "౦” role = "treeitem" class = "icon_arrow_open" aria-expanded = "true"> 4UBUFʹ࿈ಈͯ͠7JFX༻ʹDMBTTΛΓସ͑
͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • State ͱ View = ϓϩάϥϚʔ ͱ σβΠφʔ •
σβΠφʔͱ࣮Λҙࣝͨ͠Viewͷ࡞ • aria-expandedΛCSSηϨΫλʹ͏ ex.) li[aria-expanded=“true”]
ಈ࡞֬ೝͷ͠͞ • ͏·͘ಈ͔ͳ͍࣌ʹԿͷͳͷ͔Θ͔Βͳ͍ • HTML͕ؒҧ͍ͬͯΔʁ • ϒϥβ͕ରԠ͍ͯ͠ͳ͍ʁ • ࢧԉٕज़͕ະରԠʁ •
NVDA + ChromeͰಈ͚͘ͲVoiceOver + Safari ͩͱಡΈ্͛ΒΕͳ͍ͱ͔͟Βʢٯ·ͨવΓʣ
͜͏Ͱ͖ͯͨΒΑ͔ͬͨ • W3Cͷ࣮ྫͰ·ͣಈ࡞νΣοΫ • ϒϥβ/ࢧԉٕज़ͷΛΊʹΩϟον͢Δ • ΘΓ͖Γେࣄ
·ͱΊ • ϦονͳUI༻๏༻ྔΛकͬͯ͏ • ΩʔϘʔυରԠ೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ