Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A11y-Friendly Documentation

A11y-Friendly Documentation

A talk focused on assistive technology and how to build accessible documentation.

Current deck from: Open Source 101
Recording: Coming soon!

Carolyn Stransky

May 12, 2020
Tweet

More Decks by Carolyn Stransky

Other Decks in Technology

Transcript

  1. a11y-friendly
    documentation
    @carolstran
    bit.ly/a11y-docs-resources

    View Slide

  2. a11y
    @carolstran

    View Slide

  3. accessibility
    @carolstran bit.ly/a11y-numeronym

    View Slide

  4. @carolstran
    a11y
    bit.ly/a11y-numeronym

    View Slide

  5. @carolstran a11yproject.com

    View Slide

  6. @carolstran
    accessibility
    web accessibility
    degree to which an environment is
    usable by as many people as possible
    degree to which a website is usable
    by as many people as possible
    bit.ly/a11yfore

    View Slide

  7. @carolstran
    1,000,000,000
    World Health Organization
    bit.ly/who-at

    View Slide

  8. how people interact
    with the web
    @carolstran

    View Slide

  9. assistive technology
    @carolstran

    View Slide

  10. screen readers
    @carolstran
    • jaws - job access
    with speech
    • apple’s voiceover
    • microsoft’s narrator

    View Slide

  11. View Slide

  12. View Slide

  13. keyboard navigation
    @carolstran
    • specialist
    • custom
    • on-screen

    View Slide

  14. @carolstran bit.ly/shopify-dp

    View Slide

  15. navigation hardware
    @carolstran
    • touchscreens
    • mouth sticks
    • foot-operated
    mice

    View Slide

  16. switch inputs
    @carolstran
    • mechanical
    buttons
    • foot plates
    • electronic sensors

    View Slide

  17. trackers
    @carolstran
    • eye
    • head
    • dwell control

    View Slide

  18. @carolstran
    there's a business
    case for a11y
    bit.ly/w3-bcase

    View Slide

  19. but documentation
    is left out
    @carolstran

    View Slide

  20. “documentation is
    for developers”
    @carolstran

    View Slide

  21. One out of every 66
    software developers is
    blind or hard of sight
    @carolstran
    StackOverflow Developer Survey
    bit.ly/so-devsurvey

    View Slide

  22. @carolstran
    Florian Beijers, freeCodeCamp
    “The tutorials are undoubtedly
    good, but were completely
    unreadable for me”
    bit.ly/fcc-florian

    View Slide

  23. @carolstran
    most of us are
    already doing it

    View Slide

  24. • logical layouts
    • user journeys
    • localization
    • cross-browser testing
    @carolstran

    View Slide

  25. @carolstran
    this is our
    responsibility

    View Slide

  26. @carolstran
    “We may or may not be responsible for
    writing the HTML, but if the developers we’re
    working with don’t produce semantic
    structure, then they’re not actually
    representing the structures that we’re
    building in our designs”
    Anne Gibson, independent consultant
    bit.ly/pfa-anne

    View Slide

  27. structure
    and hierarchy
    @carolstran

    View Slide

  28. @carolstran

    View Slide

  29. @carolstran

    View Slide

  30. html - hypertext
    markup language
    @carolstran bit.ly/a11yfore

    View Slide

  31. • h1
    • nav
    • aside
    • ul / ol
    @carolstran

    View Slide

  32. @carolstran bit.ly/react-gs

    View Slide

  33. @carolstran bit.ly/react-gs

    View Slide

  34. aria - accessible rich
    internet applications
    @carolstran

    View Slide

  35. aria roles
    @carolstran

    Your changes were automatically saved.

    bit.ly/mdn-aria

    View Slide

  36. aria properties
    @carolstran
    Newsletter

    Email


    bit.ly/mdn-aria

    View Slide

  37. aria states
    @carolstran

    There was an error. Please try again.

    bit.ly/mdn-aria

    View Slide

  38. best for and
    elements
    @carolstran

    View Slide

  39. @carolstran
    focus indicators

    View Slide

  40. @carolstran bit.ly/stripe-connect

    View Slide

  41. • links
    • form fields
    • widgets
    • buttons
    • menu items
    @carolstran

    View Slide

  42. @carolstran gov.uk

    View Slide

  43. • can I tab through the page without
    getting lost?
    • do all focusable elements have focus
    states?
    • can I operate tabs, accordions, search
    results, etc with just my keyboard?
    • do I have a skip navigation link?
    @carolstran

    View Slide

  44. @carolstran
    skip links

    View Slide

  45. @carolstran twilio.com/docs

    View Slide

  46. @carolstran twilio.com/docs

    View Slide

  47. @carolstran developer.mozilla.org

    View Slide

  48. @carolstran
    images

    View Slide

  49. alt tags
    @carolstran

    View Slide

  50. @carolstran isthereuber.in

    View Slide

  51. @carolstran isthereuber.in

    View Slide

  52. @carolstran isthereuber.in

    View Slide

  53. 918e15484df8b5806e
    f5612f985260e9.svg
    @carolstran

    View Slide

  54. @carolstran

    View Slide

  55. @carolstran
    charts and
    infographics

    View Slide

  56. • what are the highlights and
    lowlights of the graphic?
    • what are the most important
    and notable parts?
    @carolstran

    View Slide

  57. @carolstran
    0
    40
    80
    120
    160
    April May June July

    View Slide

  58. 0
    40
    80
    120
    160
    April May June July
    @carolstran
    iOS vs Android Downloads

    View Slide

  59. 102 iOS downloads and 115 Android
    downloads occurred in April. 143 iOS
    downloads and 126 Android downloads
    occurred in May. 27 iOS downloads
    and 18 Android downloads occurred in
    June. 124 iOS downloads and 138
    Android downloads occurred in July.
    @carolstran

    View Slide

  60. 0
    40
    80
    120
    160
    April May June July
    @carolstran
    iOS vs Android Downloads

    View Slide

  61. The lowest amount of
    downloads occurred in June,
    with 27 iOS and 18 Android.
    @carolstran

    View Slide

  62. alt tag
    @carolstran

    View Slide

  63. @carolstran
    lowest amount…”>
    ...

    bit.ly/charts-a11y

    View Slide

  64. @carolstran
    lowest amount…”>
    ...

    bit.ly/charts-a11y

    View Slide

  65. @carolstran
    Downloads” aria-describedby=“chart-desc”>

    The lowest amount…

    ...

    bit.ly/charts-a11y

    View Slide

  66. @carolstran

    View Slide

  67. @carolstran trello.com

    View Slide

  68. @carolstran

    View Slide

  69. @carolstran

    View Slide

  70. bit.ly/charts-a11y

    View Slide

  71. @carolstran
    code snippets

    View Slide

  72. @carolstran
    if (x == true) {
    console.log(“hello world!”)
    }
    example if-block in JavaScript

    View Slide

  73. if left paren x equals equals true
    right paren left brace console dot log
    left paren quote hello world exclaim
    quote right paren right brace
    @carolstran
    the example if-statement read by a screen reader

    View Slide


  74. @carolstran

    View Slide


  75. @carolstran
    use meaningful
    variable names

    View Slide


  76. @carolstran
    use meaningful
    variable names
    watch for extra spaces

    View Slide

  77. @carolstran
    inclusive writing

    View Slide

  78. plain language
    @carolstran

    View Slide

  79. @carolstran

    View Slide

  80. “No one has ever
    complained that something
    was too easy to read”
    @carolstran
    Ashley Bischoff, copy editor at The Paciello Group
    bit.ly/ashley-fronteers

    View Slide

  81. testing for
    accessibility
    @carolstran

    View Slide

  82. wcag - web content
    accessibility guidelines
    @carolstran

    View Slide

  83. @carolstran

    View Slide

  84. most assistive
    technologies are
    free or inexpensive
    @carolstran

    View Slide

  85. @carolstran

    View Slide

  86. @carolstran

    View Slide

  87. dev tools
    @carolstran
    • firefox
    • chrome
    • safari

    View Slide

  88. @carolstran

    View Slide

  89. free extensions
    and validators
    @carolstran

    View Slide

  90. @carolstran

    View Slide

  91. @carolstran bit.ly/vue-v2

    View Slide

  92. @carolstran

    View Slide

  93. @carolstran bit.ly/slack-integrations

    View Slide

  94. make accessibility
    a priority
    @carolstran

    View Slide

  95. create an
    accessibility policy
    @carolstran

    View Slide

  96. @carolstran

    View Slide

  97. update your
    development checklists
    @carolstran

    View Slide

  98. @carolstran

    View Slide

  99. browse the web from
    a different perspective
    @carolstran

    View Slide

  100. host an a11y
    hackathon
    @carolstran bit.ly/mdn-a11y-hack

    View Slide

  101. final thoughts
    @carolstran

    View Slide

  102. this is for everyone
    @carolstran bit.ly/govuk-dp

    View Slide

  103. documentation is
    for everyone
    @carolstran

    View Slide

  104. Ask questions in the
    chat or on Twitter
    @carolstran
    bit.ly/a11y-docs-resources

    View Slide