Custom widgets and controls

Extending web site and application functionality through custom widgets and controls can significantly improve the user experience for everyone, making complex tasks possible via a web interface without requiring specialist software. For interactive elements to be accessible, they must be keyboard operable and they must expose essential descriptive information, including the element’s name, role, and current state or value, in an accessible way so that assistive technologies can report this information.

Native interactive HTML elements such as an input and button have always provided a high degree of accessibility by default. More recently, HTML5 has extended the range of available controls and widgets, but support for these is inconsistent at the time of this writing. If more complex user interface widgets and controls are used, accessibility must be added with additional markup and scripting.

Thankfully, the W3C Accessible Rich Internet Applications (WAI-ARIA) specification provides a standard way to add additional accessibility information to code in a way that is well supported by assistive technologies.

The work required to ensure accessibility of custom controls can take extra time, and the more complex the control, the more complex the work will be. When third party user interface libraries and frameworks are used, it’s essential to check to what extent this additional accessibility information is reliably provided, and where additional work will be needed to add it.

See also Keyboard and Notification