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
520
可能な限り確実にmkdirを成功させるには / Make mkdir
oogfranz
PRO
0
520
サイボウズ #Garoon 開発チームの 「 完成度低いの歓迎LT大会 」 PHPerKaigi出張版 / Low quality LT in PHPerKaigi 2023
oogfranz
PRO
0
550
20年ものの巨大プロダクトをKubernetesに移行している話 後日談/Garoon on Kubernetes after talk
oogfranz
PRO
0
560
20年ものの巨大プロダクトをKubernetesに移行している話/Garoon on Kubernetes
oogfranz
PRO
0
440
PHPアプリケーションだってモニタリングしたい / Monitoring PHP application
oogfranz
PRO
1
620
効果的な静的解析の CI導入パターンを求めて / Great static analysis with CI
oogfranz
PRO
3
3.7k
Dev-meets-Ops
oogfranz
PRO
1
990
GitHub力の低い僕でも、 OSSコントリビュートできたワケ / GitHub Power
oogfranz
PRO
1
600
Other Decks in Technology
See All in Technology
MCPを利用して自然言語で3Dプリントしてみよう!
hamadakoji
0
1.3k
ソフトウェアテストのAI活用_ver1.20
fumisuke
0
230
AI Engineering Summit Pre Event LT #10
okaru
2
500
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.4k
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
3
850
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
270
Roo CodeとClaude Code比較してみた
pharma_x_tech
1
190
Two-Tower モデルで実現する 検索リランキング / Shibuya_AI_2
visional_engineering_and_design
2
140
Cursor Meetup Tokyo
iamshunta
5
1.5k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
2k
Generational ZGCのメモリ運用改善 - その物理メモリ使用量、本当に正しい?
tabatad
1
290
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
68
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
910
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
How GitHub (no longer) Works
holman
314
140k
Code Review Best Practice
trishagee
68
18k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
2
110
Visualization
eitanlees
146
16k
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༻๏༻ྔΛकͬͯ͏ • ΩʔϘʔυରԠ೦ೖΓʹ • σβΠφʔͱΑΓ࿈ܞ͍ͯͧ͘͠ • ΘΓ͖Γେࣄ