Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Transcript

1. Accessibility
   A glimpse of web accessibility
   

   View Slide

2. About Me
   ★ Hsiaoming Yang
   ★ lepture
   ★ Flask
   ★ https://github.com/lepture
   ★ https://lepture.com
   ★ 暁明株式会社
   

   View Slide

3. https://typlog.com
   

   View Slide

4. https://authlib.org
   

   View Slide

5. Accessibility
   0
   

   View Slide

6. ★ Visual Impairment
   ★ Hearing Impairment
   ★ Handicap
   ★ Left hand
   ★ ......
   

   View Slide

7. Real life
   1
   

   View Slide

8. Japan is doing pretty good in
   accessibility.
   

   View Slide

9. Metro
   

   View Slide

10. Toilet
    

    View Slide

11. Traffic
    

    View Slide

12. On Web
    2
    

    View Slide

13. “Accessibility is not taken into
    account.”
    

    View Slide

14. Rakuten
    

    View Slide

15. Before
    Programming
    3
    

    View Slide

16. ~8%
    

    View Slide

17. This is a success message
    This is an error message
    

    View Slide

18. This is a success message
    This is an error message
    ✔
    ✗
    

    View Slide

19. Trello Labels
    https://trello.com
    

    View Slide

20. Font Size
    General/Accessibility/Larger Text
    

    View Slide

21. Interaction & Feedback
    button:hover
    a:hover
    input:focus
    

    View Slide

22. Button
    Button:hover
    

    View Slide

23. – Tyrion Lannister
    “A mind needs books as a sword needs
    a whetstone if it is to keep its edge.”
    

    View Slide

24. VoiceOver
    4
    

    View Slide

25. General
    Accessibility
    

    View Slide

26. View Slide

27. View Slide

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
    

    View Slide

29. Windows
    https://www.microsoft.com/en-us/accessibility/windows
    

    View Slide

30. Accessibility is easy
    5
    

    View Slide

31. 
    

    View Slide

32. Semantic HTML
    
    
    
    
    

    View Slide

33. 
    role
    

    View Slide

34. Landmarks
    

    View Slide

35. View Slide

36. 
    aria-label=“Menu”>
    
    aria-label
    

    View Slide

37. View Slide

38. View Slide

39. aria-hidden
    
    hidden>
    ワイン
    
    

    View Slide

40. aria-live
    This is a success message
    ✔
    

    View Slide

41. Accessibility is hard
    6
    

    View Slide

42. ★dialog
    ★tablist
    ★select
    ★etc..
    

    View Slide

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/
    

    View Slide

44. – W3C
    “The Web is fundamentally designed to
    work for all people.”
    

    View Slide

45. Thank You
    Q & A
    

    View Slide