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

2. a11y beyond the aria-label maria clara @ brooklyn js #68
3. hi •developer @ Work & Co •from brazil •dog mom
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
14. useful extras: aria-atomic and aria-relevant;
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