Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Transcript

1. Accessibility A glimpse of web accessibility
2. About Me ★ Hsiaoming Yang ★ lepture ★ Flask ★ https://github.com/lepture ★ https://lepture.com ★ 暁明株式会社
3. https://typlog.com
4. https://authlib.org
5. Accessibility 0
6. ★ Visual Impairment ★ Hearing Impairment ★ Handicap ★ Left hand ★ ......
7. Real life 1
8. Japan is doing pretty good in accessibility.
9. Metro
10. Toilet
11. Traffic
12. On Web 2
13. “Accessibility is not taken into account.”
14. Rakuten
15. Before Programming 3
16. ~8%
17. This is a success message This is an error message
18. This is a success message This is an error message ✔ ✗
19. Trello Labels https://trello.com
20. Font Size General/Accessibility/Larger Text
21. Interaction & Feedback button:hover a:hover input:focus
22. Button Button:hover
23. – Tyrion Lannister “A mind needs books as a sword needs a whetstone if it is to keep its edge.”
24. VoiceOver 4
25. General Accessibility
28. 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
29. Windows https://www.microsoft.com/en-us/accessibility/windows
30. Accessibility is easy 5
31. <html lang=“ja”>
32. Semantic HTML <button> <header> <aside> <img alt=“”>
33. <a role=“button”> role
34. Landmarks
36. <a> <i class=“icon-menu” aria-label=“Menu”></i> </a> aria-label
39. aria-hidden <a href=“URL”> <i class=“icon-wine” aria- hidden></i> ワイン </a>
40. aria-live This is a success message ✔
41. Accessibility is hard 6
42. ★dialog ★tablist ★select ★etc..
43. 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/
44. – W3C “The Web is fundamentally designed to work for all people.”
45. Thank You Q & A