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.

Transcript

1. View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. accessibility
   (noun)
   the quality of being able to be reached or entered
   (source: oxford dictionary)
   

   View Slide

6. visual hearing
   motor cognitive
   (source: https://webaim.org/intro/)
   

   View Slide

7. the state of the
   web
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. wai-aria
    

    View Slide

13. View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. resources
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide