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
Accessible な実装を求めたら大変だった
Search
Yuichi Sugiyama
PRO
November 28, 2018
Technology
3
1.6k
Accessible な実装を求めたら大変だった
Yuichi Sugiyama
PRO
November 28, 2018
Tweet
Share
More Decks by Yuichi Sugiyama
See All by Yuichi Sugiyama
サイボウズ と Garoon と The PHP Foundation と 私 / Cybozu and Garoon and The PHP Foundation and me
oogfranz
PRO
1
410
可能な限り確実にmkdirを成功させるには / Make mkdir
oogfranz
PRO
0
410
サイボウズ #Garoon 開発チームの 「 完成度低いの歓迎LT大会 」 PHPerKaigi出張版 / Low quality LT in PHPerKaigi 2023
oogfranz
PRO
0
480
20年ものの巨大プロダクトをKubernetesに移行している話 後日談/Garoon on Kubernetes after talk
oogfranz
PRO
0
470
20年ものの巨大プロダクトをKubernetesに移行している話/Garoon on Kubernetes
oogfranz
PRO
0
350
PHPアプリケーションだってモニタリングしたい / Monitoring PHP application
oogfranz
PRO
1
540
効果的な静的解析の CI導入パターンを求めて / Great static analysis with CI
oogfranz
PRO
3
3.3k
Dev-meets-Ops
oogfranz
PRO
1
890
GitHub力の低い僕でも、 OSSコントリビュートできたワケ / GitHub Power
oogfranz
PRO
1
470
Other Decks in Technology
See All in Technology
事業フェーズの変化を乗り越えるEnabling/Platform SREへの転換
hosht
1
1.5k
Datadog APM による 性能改善から始める技術的負債解消
recruitengineers
PRO
6
210
見てわかるテスト駆動開発
recruitengineers
PRO
3
360
Distributed Tracing in LINE Taiwan — 大規模分散式追蹤的實踐與挑戰
johnlin
1
270
聊聊生成式 AI 的衝擊下,作為工程師我們需要做好什麼準備
alantsai
0
150
脆弱性対応をこの先生きのこるには
ken5scal
0
480
React 研修 (2024)
recruitengineers
PRO
28
7.5k
240803_tochiji-hai_hackathon_kato
hjmkth
1
110
Next.js 研修 2024
recruitengineers
PRO
9
370
An Efficient Incident Response Training with AI / SRE NEXT 2024 Sponsor Session
rrreeeyyy
1
1k
継続的にRailsアプリを開発する上で早めにやっておきたいこと
morihirok
9
2k
DevSecOpsの内回りと外回りで考える持続可能なセキュリティ対策 | Sustainable security measures for DevSecOps inside and outside the DevSecOps system.
yamaguchitk333
4
1.4k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
65
4.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
18
3.8k
The Invisible Side of Design
smashingmag
294
50k
Six Lessons from altMBA
skipperchong
25
3.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
1.9k
KATA
mclloyd
24
13k
Making Projects Easy
brettharned
111
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
52
8.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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༻๏༻ྔΛकͬͯ͏ • ΩʔϘʔυରԠ೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ