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.8k
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
540
可能な限り確実にmkdirを成功させるには / Make mkdir
oogfranz
PRO
0
600
サイボウズ #Garoon 開発チームの 「 完成度低いの歓迎LT大会 」 PHPerKaigi出張版 / Low quality LT in PHPerKaigi 2023
oogfranz
PRO
0
600
20年ものの巨大プロダクトをKubernetesに移行している話 後日談/Garoon on Kubernetes after talk
oogfranz
PRO
0
580
20年ものの巨大プロダクトをKubernetesに移行している話/Garoon on Kubernetes
oogfranz
PRO
0
470
PHPアプリケーションだってモニタリングしたい / Monitoring PHP application
oogfranz
PRO
1
640
効果的な静的解析の CI導入パターンを求めて / Great static analysis with CI
oogfranz
PRO
3
3.8k
Dev-meets-Ops
oogfranz
PRO
1
1k
GitHub力の低い僕でも、 OSSコントリビュートできたワケ / GitHub Power
oogfranz
PRO
1
620
Other Decks in Technology
See All in Technology
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
知覚とデザイン
rinchoku
1
600
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.1k
20251027_findyさん_音声エージェントLT
almondo_event
2
470
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
Azure Well-Architected Framework入門
tomokusaba
1
140
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
340
OCIjp_Oracle AI World_Recap
shinpy
1
180
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
420
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Why Our Code Smells
bkeepers
PRO
340
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Raft: Consensus for Rubyists
vanstee
140
7.2k
KATA
mclloyd
PRO
32
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A better future with KSS
kneath
239
18k
Being A Developer After 40
akosma
91
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Making Projects Easy
brettharned
120
6.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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༻๏༻ྔΛकͬͯ͏ • ΩʔϘʔυରԠ೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ