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
Accessibility
Search
Hsiaoming Yang
December 21, 2017
Programming
0
240
Accessibility
Talk on Web Accessibility. Slide for #webhack meetup.
Hsiaoming Yang
December 21, 2017
Tweet
Share
More Decks by Hsiaoming Yang
See All by Hsiaoming Yang
The modern OAuth 2.0
lepture
2
1.5k
Vue: from view to view
lepture
2
5.1k
Other Decks in Programming
See All in Programming
業務ツールとして使うPostman
msys75
0
110
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.5k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
510
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
400
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
敵対的ポイフル
futabato
0
130
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
1.1k
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
470
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
Polars入門
daikikatsuragawa
1
180
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
It's Worth the Effort
3n
180
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Web development in the modern age
philhawksworth
203
10k
How to train your dragon (web standard)
notwaldorf
75
5.2k
KATA
mclloyd
16
12k
Bash Introduction
62gerente
605
210k
Designing for humans not robots
tammielis
247
25k
Transcript
Accessibility A glimpse of web accessibility
About Me ★ Hsiaoming Yang ★ lepture ★ Flask ★
https://github.com/lepture ★ https://lepture.com ★ 暁明株式会社
https://typlog.com
https://authlib.org
Accessibility 0
★ Visual Impairment ★ Hearing Impairment ★ Handicap ★ Left
hand ★ ......
Real life 1
Japan is doing pretty good in accessibility.
Metro
Toilet
Traffic
On Web 2
“Accessibility is not taken into account.”
Rakuten
Before Programming 3
~8%
This is a success message This is an error message
This is a success message This is an error message
✔ ✗
Trello Labels https://trello.com
Font Size General/Accessibility/Larger Text
Interaction & Feedback button:hover a:hover input:focus
Button Button:hover
– Tyrion Lannister “A mind needs books as a sword
needs a whetstone if it is to keep its edge.”
VoiceOver 4
General Accessibility
None
None
VO = Control + Option VO + Shift + Down
Enter an area VO + Shift + Up Leave an area VO + Left Next Element VO + Right Previous Element VO + H Help
Windows https://www.microsoft.com/en-us/accessibility/windows
Accessibility is easy 5
<html lang=“ja”>
Semantic HTML <button> <header> <aside> <img alt=“”>
<a role=“button”> role
Landmarks
None
<a> <i class=“icon-menu” aria-label=“Menu”></i> </a> aria-label
None
None
aria-hidden <a href=“URL”> <i class=“icon-wine” aria- hidden></i> ワイン </a>
aria-live This is a success message ✔
Accessibility is hard 6
★dialog ★tablist ★select ★etc..
References • https://www.w3.org/TR/wai-aria-practices/examples/ landmarks/HTML5.html • https://developer.mozilla.org/en-US/docs/Learn/ Accessibility/HTML • http://www.w3.org/TR/wai-aria/roles •
http://a11yproject.com/
– W3C “The Web is fundamentally designed to work for
all people.”
Thank You Q & A