ARIA can help with AJAX, tabs, slides, menus, etc. Roles instruct screen readers to the appropriate mode for interaction.
There are two modes for screen readers:
- Browse mode: keypad
The Accessibility Tree
- ARIA roles will override native HTML tags
- Keyboard-only users is a large population
- Tabbing around is important
- Tab order has to be scripted
States change; Properties are static.
Only use ARIA when appropriate; it supplements HTML markup
VoiceOver on Mac is designed for Safari browser
You can jump to landmarks here
Document structure roles: group
Ex: for forms (like a checkbox group)
- Ex: slider
- Watch tab index
- Use tab-index=0 –> this makes default keyboard tab accessible in that tab order
- Ex: calendar date-picker
- Don’t use a date-picker if not needed
- Use this attribute if it doesn’t have/add meaning for the user
- Use alts even if it’s a blank alt tag
aria-hidden is used to remove redundancies or make invisible from readers (ex: expandable regions)
Live regions announce activities, but be careful because this can be annoying!
Ex: chat window where the response must be heard
visibility: hidden hides content from screen readers
button for markup
Create a support matrix to test with user agents and put this diagram on your website for screen readers to find and be aware of.
ARIA labels need to be for focused items.
Speaker had code example for “all widgets” –> we should do this
Make sure the drawer is accessible.