This post is just a collection of some notes on web accessibility and making accessibile rich internet applications (ARIA)
Some basics
- Use more native elements where possible like h1, buttons, forms etc.
- Avoid things like divs that are styled as button for example.
- Ensure rendered HTML is well formed
- Test in a varierty of browsers including mobile
- reconsider decisions around color contrasts, motion like parallax effects etc
- Dev tools in modern browsers, especially the Accessibility tab in chrome
- Reader mode in browsers
- NVDA screen reader link
- Voiceover rotors link
- Browser extensions:
- Accessibility Insights for web
- Web developer toolbar
- If there is conflicting info between screen readers and other accesibility tools, screen readers should be preferred as they are more closer to the end user
ARIA attributes
- Standards based attributes for adding accessibility info to web
- Three types
- role. eg role=“button”
- state. eg aria-visited=“false”
- property. eg aria-label=“form submit”
- Avoid overriding aria attribs for native elements. rules-link
- if a div has to be used as a button then use aria-role to describe it is a button.
- html section tags only show up in screen readers if they have an aria-label or aria-labelledby
|||
