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 full-size slide

  2. a11y
    @carolstran

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. @carolstran a11yproject.com

    View full-size 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 full-size slide

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

    View full-size slide

  8. how people interact
    with the web
    @carolstran

    View full-size slide

  9. assistive technology
    @carolstran

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. @carolstran bit.ly/shopify-dp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. but documentation
    is left out
    @carolstran

    View full-size slide

  18. “documentation is
    for developers”
    @carolstran

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. @carolstran
    most of us are
    already doing it

    View full-size slide

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

    View full-size slide

  23. @carolstran
    this is our
    responsibility

    View full-size slide

  24. @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 full-size slide

  25. structure
    and hierarchy
    @carolstran

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. @carolstran bit.ly/react-gs

    View full-size slide

  29. @carolstran bit.ly/react-gs

    View full-size slide

  30. aria - accessible rich
    internet applications
    @carolstran

    View full-size slide

  31. aria roles
    @carolstran

    Your changes were automatically saved.

    bit.ly/mdn-aria

    View full-size slide

  32. aria properties
    @carolstran
    Newsletter

    Email


    bit.ly/mdn-aria

    View full-size slide

  33. aria states
    @carolstran

    There was an error. Please try again.

    bit.ly/mdn-aria

    View full-size slide

  34. best for and
    elements
    @carolstran

    View full-size slide

  35. @carolstran
    focus indicators

    View full-size slide

  36. @carolstran bit.ly/stripe-connect

    View full-size slide

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

    View full-size slide

  38. @carolstran gov.uk

    View full-size slide

  39. • 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 full-size slide

  40. @carolstran
    skip links

    View full-size slide

  41. @carolstran twilio.com/docs

    View full-size slide

  42. @carolstran twilio.com/docs

    View full-size slide

  43. @carolstran developer.mozilla.org

    View full-size slide

  44. @carolstran
    images

    View full-size slide

  45. alt tags
    @carolstran

    View full-size slide

  46. @carolstran isthereuber.in

    View full-size slide

  47. @carolstran isthereuber.in

    View full-size slide

  48. @carolstran isthereuber.in

    View full-size slide

  49. 918e15484df8b5806e
    f5612f985260e9.svg
    @carolstran

    View full-size slide

  50. @carolstran
    charts and
    infographics

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  57. alt tag
    @carolstran

    View full-size slide

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

    bit.ly/charts-a11y

    View full-size slide

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

    bit.ly/charts-a11y

    View full-size slide

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

    The lowest amount…

    ...

    bit.ly/charts-a11y

    View full-size slide

  61. @carolstran trello.com

    View full-size slide

  62. bit.ly/charts-a11y

    View full-size slide

  63. @carolstran
    code snippets

    View full-size slide

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

    View full-size slide

  65. 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 full-size slide


  66. @carolstran
    use meaningful
    variable names

    View full-size slide


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

    View full-size slide

  68. @carolstran
    inclusive writing

    View full-size slide

  69. plain language
    @carolstran

    View full-size slide

  70. “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 full-size slide

  71. testing for
    accessibility
    @carolstran

    View full-size slide

  72. wcag - web content
    accessibility guidelines
    @carolstran

    View full-size slide

  73. most assistive
    technologies are
    free or inexpensive
    @carolstran

    View full-size slide

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

    View full-size slide

  75. free extensions
    and validators
    @carolstran

    View full-size slide

  76. @carolstran bit.ly/vue-v2

    View full-size slide

  77. @carolstran bit.ly/slack-integrations

    View full-size slide

  78. make accessibility
    a priority
    @carolstran

    View full-size slide

  79. create an
    accessibility policy
    @carolstran

    View full-size slide

  80. update your
    development checklists
    @carolstran

    View full-size slide

  81. browse the web from
    a different perspective
    @carolstran

    View full-size slide

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

    View full-size slide

  83. final thoughts
    @carolstran

    View full-size slide

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

    View full-size slide

  85. documentation is
    for everyone
    @carolstran

    View full-size slide

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

    View full-size slide