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.


Maria Clara Santana

July 18, 2019

More Decks by Maria Clara Santana

Other Decks in Programming


  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