Talk on Web Accessibility. Slide for #webhack meetup.
AccessibilityA glimpse of web accessibility
View Slide
About Me★ Hsiaoming Yang★ lepture★ Flask★ https://github.com/lepture★ https://lepture.com★ 暁明株式会社
https://typlog.com
https://authlib.org
Accessibility0
★ Visual Impairment★ Hearing Impairment★ Handicap★ Left hand★ ......
Real life1
Japan is doing pretty good inaccessibility.
Metro
Toilet
Traffic
On Web2
“Accessibility is not taken intoaccount.”
Rakuten
BeforeProgramming3
~8%
This is a success messageThis is an error message
This is a success messageThis is an error message✔✗
Trello Labelshttps://trello.com
Font SizeGeneral/Accessibility/Larger Text
Interaction & Feedbackbutton:hovera:hoverinput:focus
ButtonButton:hover
– Tyrion Lannister“A mind needs books as a sword needsa whetstone if it is to keep its edge.”
VoiceOver4
GeneralAccessibility
VO = Control + OptionVO + Shift + Down Enter an areaVO + Shift + Up Leave an areaVO + Left Next ElementVO + Right Previous ElementVO + H Help
Windowshttps://www.microsoft.com/en-us/accessibility/windows
Accessibility is easy5
Semantic HTML
role
Landmarks
aria-label=“Menu”>aria-label
aria-hiddenhidden>ワイン
aria-liveThis is a success message✔
Accessibility is hard6
★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 towork for all people.”
Thank YouQ & A