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 [...]