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

Accessibility beyond the aria-label

Accessibility beyond the aria-label

It's common knowledge that accessibility matters but when looking for content on how to build accessible web apps, it often gets restricted to things such as adding aria-label and aria-hidden to elements when in reality, we are building interfaces that are much more complex. In this talk, I present a few common UI elements and how to make them more accessible with proper semantics and some less known aria attributes.

78b75aad21ed5ed351d9822d77acd7fc?s=128

Maria Clara Santana

July 18, 2019
Tweet

More Decks by Maria Clara Santana

Other Decks in Programming

Transcript

  1. None
  2. a11y beyond the aria-label maria clara @ brooklyn js #68

  3. hi •developer @ Work & Co •from brazil •dog mom

  4. None
  5. accessibility (noun) the quality of being able to be reached

    or entered (source: oxford dictionary)
  6. visual hearing motor cognitive (source: https://webaim.org/intro/)

  7. the state of the web

  8. (source: https://www.awwwards.com/awwwards/collections/build-with-react)

  9. (source: https://www.awwwards.com/awwwards/collections/build-with-angular/)

  10. (source: http://info.cern.ch/hypertext/WWW/TheProject.html)

  11. 97.6% (source: https://webaim.org/projects/screenreadersurvey5/#javascript)

  12. wai-aria

  13. None
  14. useful extras: aria-atomic and aria-relevant;

  15. None
  16. None
  17. None
  18. None
  19. resources

  20. (source: https://www.w3.org/TR/WCAG20-TECHS/client-side-script.html)

  21. (source: https://inclusive-components.design)

  22. thank you! https://olarclara.github.io