Use ARIA to expose the role of custom user interface components
no. 131
Make sure custom user interface controls’ roles are identified using ARIA roles
Authors today often use DIV and SPAN elements to create custom controls, rather than use the predefined HTML elements. For example, instead of relying on regular checkboxes, authors might design fake checkboxes using images and will use DIV elements, some CSS and a little JavaScript to turn them into what looks like checkboxes. These custom controls often look really cool, until users try to access them with anything but a mouse. When they do, they quickly realize that these cool looking checkboxes don’t quite behave like checkboxes. Sometimes, hitting the space bar won’t check them. Sometimes they won’t be part of the tabbing order. Whatever the reason may be, they’re just broken. This is because authors often forget to factor in these controls’ default behaviours. To make custom controls accessible, authors need to also expose the role of these custom user interface components.
To do so, simply make sure that whenever custom controls are created, that the proper ARIA role is added to it. WAI-ARIA provides a number of widget roles meant to convey the expected semantics to custom controls, so they truly behave like users expect them to. Some of these roles include button, checkbox, radio, listbox, option, and so on. While the use of fake controls is questionable, one cannot pretend they don’t exist, and this is when WAI-ARIA comes in. While the first rule of WAI-ARIA should always be to avoid WAI-ARIA when the equivalent feature already exists in HTML, WAI-ARIA is by far the best way to make sure the expected behaviour of custom controls is exposed to end users, regardless of the technology or tool used.
User Story
As a user using assistive technology, I want custom controls in web pages to behave like regular HTML controls do, so that I can fully control the user interface components made available in the page.
Simple Code Example
Not Applicable
Testing Methodology
For user interface components that use the role attribute, check that the value of the role attribute is one of the roles defined in the WAI-ARIA specification and that the characteristics of the user interface component match the ones described by the assigned role.
Specification Details
WCAG 2.0: Level A
Principle: Robust
Guideline: 4.1 Compatible
Success Criterion: 4.1.2 Name, Role, Value
Related Technique: ARIA4
Category: ARIA