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

Accessibility Done Right

Accessibility Done Right

Accessibility is about unified design.

Michelle Sanver

February 19, 2015
Tweet

More Decks by Michelle Sanver

Other Decks in Programming

Transcript

  1. @michellesanver
    Accessibility done right #phpuk

    View Slide

  2. @michellesanver

    View Slide

  3. @michellesanver
    WIIIIIIIE \o/
    “Learn the most by
    sharing your knowledge
    with others” - @coderabbi

    View Slide

  4. @michellesanver
    Michelle Sanver

    View Slide

  5. @michellesanver

    View Slide

  6. @michellesanver
    Michelle Sanver
    Co-President of PHPWomen

    View Slide

  7. @michellesanver
    PHPWomen
    15 pounds or 30 dollars

    View Slide

  8. @michellesanver
    Michelle Sanver
    Accent(s)!?

    View Slide

  9. @michellesanver
    Michelle Sanver

    View Slide

  10. @michellesanver
    I’m a backend developer.

    View Slide

  11. @michellesanver
    Disclaimer
    There’s a lot more to accessibility.

    View Slide

  12. @michellesanver
    After lunch story

    View Slide

  13. @michellesanver
    Aron
    Aron is a blind programmer

    View Slide

  14. @michellesanver
    Aron
    He really knows how to use a screenreader

    View Slide

  15. @michellesanver
    Aron
    I don’t

    View Slide

  16. @michellesanver
    Disclaimer
    This talk is not how I planned it

    View Slide

  17. @michellesanver
    This talk is not about
    “people with disabilities”

    View Slide

  18. @michellesanver
    This talk is about people
    who are using the web.

    View Slide

  19. @michellesanver
    Good Code
    Written with the user in mind

    View Slide

  20. @michellesanver
    Assistive technology

    View Slide

  21. @michellesanver
    Assistive technology
    Screen Readers

    View Slide

  22. @michellesanver
    Assistive technology
    Text-To-Speech

    View Slide

  23. @michellesanver
    Assistive technology
    Screen Magnifiers

    View Slide

  24. @michellesanver
    Assistive technology
    Joysticks

    View Slide

  25. @michellesanver
    Assistive technology
    Keyboards

    View Slide

  26. @michellesanver
    Assistive technology
    Mobile Devices

    View Slide

  27. @michellesanver
    Audience participation!
    What other assistive technology is there?

    View Slide

  28. @michellesanver
    All technology is
    assistive technology

    View Slide

  29. @michellesanver
    What if accessibility
    online was like
    accessibility IRL?

    View Slide

  30. @michellesanver
    A typical ramp

    View Slide

  31. @michellesanver
    A hotel layout

    View Slide

  32. @michellesanver
    Hotel Layout: SunshinePHP
    I lost my glasses…

    View Slide

  33. @michellesanver
    Hotel Layout: PHPUK
    I *really* hope I keep my glasses

    View Slide

  34. @michellesanver
    Accessibility is about
    Universal design

    View Slide

  35. @michellesanver
    Universal Design
    “Universal design is the design of products and
    environments to be usable by all people, to the
    greatest extent possible, without the need for
    adaptation or specialized design.”
    -Ron Mace

    View Slide

  36. @michellesanver
    Universal Design
    Keywords
    equitable, flexible, simple,
    intuitive, low effort, approachable,
    usable

    View Slide

  37. @michellesanver
    Guidelines, rules and tools
    Keep your JavaScript ON!!!

    View Slide

  38. @michellesanver
    Guidelines, rules and tools
    All functionality for all people

    View Slide

  39. @michellesanver
    Content Gudelines

    View Slide

  40. @michellesanver
    General Writing
    Use Consistent Language

    View Slide

  41. @michellesanver
    General Writing
    Write out acronyms
    (At least the first time you use them)

    View Slide

  42. @michellesanver
    General Writing
    Be clear and concise

    View Slide

  43. @michellesanver
    Headings
    Screen reader users can use
    heading structure to navigate
    content.

    View Slide

  44. @michellesanver
    Headings
    Keep your headers logical

    View Slide

  45. @michellesanver
    Headings
    Don’t skip “h2” for design

    View Slide

  46. @michellesanver
    Font-Face, Size and colour
    Easy to use sans-serif font

    View Slide

  47. @michellesanver
    Font-Face, Size and colour
    Size: 12pt or more

    View Slide

  48. @michellesanver
    Font-Face, Size and colour
    Size headers: Relative in order

    View Slide

  49. @michellesanver
    Font-Face, Size and colour
    Heading 3: 14pt
    Heading 2: 16pt
    Heading 1: 18pt

    View Slide

  50. @michellesanver
    Font-Face, Size and colour
    Keep a high contrast between background and
    font colour.

    View Slide

  51. @michellesanver
    Links
    Give your links unique and descriptive names

    View Slide

  52. @michellesanver
    Tables
    Only for tabular data!

    View Slide

  53. @michellesanver
    Tables
    For complex tables, provide a summary

    View Slide

  54. @michellesanver
    Forms
    Label form fields!

    View Slide

  55. @michellesanver
    Forms
    Should be “tabable”

    View Slide

  56. @michellesanver
    Forms
    “Tabable” in visual order

    View Slide

  57. @michellesanver
    Forms
    Use fieldsets for related fields

    View Slide

  58. @michellesanver
    Forms
    Don’t use only * for required fields

    View Slide

  59. @michellesanver
    Forms
    Use ARIA in *addition* to asterix
    ARIA required="true" and ARIA required="false"

    View Slide

  60. @michellesanver
    Forms
    After submitting
    Include errors in the page-title

    View Slide

  61. @michellesanver
    Forms
    CAPTCHA is bad mmmkay
    http://webaim.org/blog/
    spam_free_accessible_forms/

    View Slide

  62. @michellesanver
    Colours
    Colourblindness

    View Slide

  63. @michellesanver
    Colours
    Learning disabilities

    View Slide

  64. @michellesanver
    Colours
    Satisfy both groups!
    Use colours *and* visual indicators

    View Slide

  65. @michellesanver
    Audio & Video
    Alternative text version

    View Slide

  66. @michellesanver
    Video
    Use Captions

    View Slide

  67. @michellesanver
    Audio
    Include a text transcript

    View Slide

  68. @michellesanver
    Audio & Video
    Also for non-auditory learners

    View Slide

  69. @michellesanver
    Audio & Video
    If filling material for an already descriptive article…
    No alternative needed

    View Slide

  70. @michellesanver
    Audio & Video
    Do *not* autoplay!

    View Slide

  71. @michellesanver
    Audio & Video
    Make sure you can pause.

    View Slide

  72. @michellesanver
    Audio & Video
    Avoid flashes

    View Slide

  73. @michellesanver
    Audio & Video
    3 flashes in one second can cause epileptic
    reactions.

    View Slide

  74. @michellesanver
    Images
    Alt Text

    View Slide

  75. @michellesanver
    Images
    Alt Text
    What you’re trying to convey!

    View Slide

  76. @michellesanver
    Images
    Alt Text
    Can be replaced with a caption.

    View Slide

  77. @michellesanver
    Images
    Alt Text
    Leave empty for decorative images

    View Slide

  78. @michellesanver
    Images
    High contrast

    View Slide

  79. @michellesanver
    Images
    For graphs, include a table if possible

    View Slide

  80. @michellesanver
    Images
    Avoid images of text

    View Slide

  81. @michellesanver
    WAI-Aria

    View Slide

  82. @michellesanver
    WAI-Aria
    ARIA = Accessible Rich Internet Applications

    View Slide

  83. @michellesanver
    Aria
    Roles

    View Slide

  84. @michellesanver
    Aria: Roles
    “button” can be a fancy clickable element

    View Slide

  85. @michellesanver
    Aria
    States and Properties

    View Slide

  86. @michellesanver
    Aria examples
    Roles of "navigation" and "menu"

    View Slide

  87. @michellesanver
    Aria examples
    Landmarks of "banner" and "main content"

    View Slide

  88. @michellesanver
    Aria examples
    Alerts of "live" and "atomic"

    View Slide

  89. @michellesanver
    Aria examples
    Forms

    View Slide

  90. @michellesanver
    Dynamic content
    Accessible slide shows

    View Slide

  91. @michellesanver
    Dynamic content
    Keyboard friendly video players
    NO AUTOPLAY PLZ

    View Slide

  92. @michellesanver
    Aria: Live Regions
    Tell the user about dynamic updates!

    View Slide

  93. @michellesanver
    Aria: Live Regions
    Polite or assertive

    View Slide

  94. @michellesanver
    Aria: Live Regions
    Allows your JavaScript to be ON

    View Slide

  95. @michellesanver
    Aria: Live Regions
    Twitter uses live regions NICELY

    View Slide

  96. @michellesanver
    Aria: Live Regions: Twitter
    Has a dedicated accessibility team

    View Slide

  97. @michellesanver
    Aria: Live Regions: Twitter
    Tweet field has tons of information

    View Slide

  98. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  99. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  100. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  101. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  102. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  103. @michellesanver
    Aria Example Twitter
    aria-labelledby="tweet-box-mini-home-profile-label"
    id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"
    contenteditable="true" spellcheck="true"
    role="textbox" aria-multiline="true" dir="ltr"
    aria-autocomplete="list"
    aria-expanded="false"
    aria-owns=“typeahead-dropdown-6”
    >
    What's happening?

    View Slide

  104. @michellesanver
    Online Assessment
    Tools

    View Slide

  105. @michellesanver
    Online Assessment Tools
    Wave
    http://wave.webaim.org/

    View Slide

  106. @michellesanver
    Online Assessment Tools
    Color Filter
    http://colorfilter.wickline.org/

    View Slide

  107. @michellesanver
    Online Assessment Tools
    Vischeck
    http://www.vischeck.com/vischeck/

    View Slide

  108. @michellesanver
    Online Assessment Tools
    Color Contrast Checker
    http://webaim.org/resources/contrastchecker/

    View Slide

  109. @michellesanver
    Online Assessment Tools
    For more
    W3C Web Accessibility Tools list
    http://www.w3.org/WAI/ER/tools/

    View Slide

  110. @michellesanver
    Wrapup

    View Slide

  111. @michellesanver
    Wrapup
    Accessibility is *not* about assistive technology.

    View Slide

  112. @michellesanver
    Wrapup
    Accessibility is about people.

    View Slide

  113. @michellesanver
    Wrapup
    Accessibility is about
    universal design

    View Slide

  114. @michellesanver
    Wrapup
    Accessibility means no workarounds

    View Slide

  115. @michellesanver
    Wrapup
    Keep your JavaScript ON

    View Slide

  116. @michellesanver
    Wrapup
    Follow guidelines

    View Slide

  117. @michellesanver
    Wrapup
    Use WAI-Aria

    View Slide

  118. @michellesanver
    Ask questions!

    View Slide

  119. @michellesanver
    Thank you!
    Please rate my talk!
    https://joind.in/13371
    (OMG, do you see the 1337? :D)

    View Slide

  120. @michellesanver
    Accessibility
    Let’s talk about it.

    View Slide