Posted by John Durance on 20 Jul, 2015

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.

For example, role="button" and 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 true and false when the button is activated. A screen reader can now understand the role and changing state of this button widget.

Tags: Accessibility

GET OUR NEWSLETTER