Posted by John Durance
Complex widgets – like a carousel – create more engaging and user-friendly interfaces. They’re great for users who have good vision, but not always so great for those using a screen reader. Problems arise if understanding breaks down between the widget running in the user agent and the accessibility API. This breakdown causes the assistive technology to fail too.
To support understanding of complex widgets, two types of attribute can help to identify what a widget is and its current state, providing the missing semantics to accessibility APIs and assistive technologies. The two types are: roles, and ARIA states and properties.
Roles are set on elements, with the
role attribute, allowing them to be understood as a type of object (widget). Their value remains static.
Roles are combined with ARIA states and properties. These have dynamic values that change accordingly as a result of user interaction.
aria-pressed="[boolean value]" can be used to model an ARIA toggle button. If the element being modeled is not focused, or does not receive keyboard events by default, then
tabindex="0" should be included too. The
aria-pressed value will switch between
false when the button is activated. A screen reader can now understand the role and changing state of this button widget.
Related Blog posts
- Accessibility 1: Why Create Accessible Websites?
- Accessibility 2: Aural Interaction and Screen Readers
- Accessibility 3: Keyboard Interaction, Special Keys and Shortcuts
- Accessibility 4: Creating a Logical Dom
- Accessibility 5: Adding Key Handlers
- Accessibility 6: Managing Focus
- Accessibility 7: Describing Images and Forms
- Accessibility 8: Adding Semantics
- Accessibility 9: Aria Attributes