$30 off During Our Annual Pro Sale. View Details »

Accessibility

 Accessibility

Talk on Web Accessibility. Slide for #webhack meetup.

Hsiaoming Yang

December 21, 2017
Tweet

More Decks by Hsiaoming Yang

Other Decks in Programming

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