Chapter 2a: Widget Roles

In some situations developers cannot use certain native markup controls or containers. In such cases developers use alternate methods to create such controls and manipulate them to look and work like the native controls. However these controls cannot semantically convey the type to assistive technologies. In such situations WAI ARIA widget roles try bridging the gap.

For example in the following inaccessible button example user can navigate with tab, identify the label but cannot here the role as button Since it is an image button screen reader announces it as an image.

Inaccessible button with improper role


Accessible button with appropriate role


The widget roles can be categorized as two types. Standalone user interface roles and composite user interface roles.

Standalone user interface roles

The following are the standalone user interface roles

Composite Widgets

Composite widgets acts as containers for other widgets. Usually composite widgets hold and manage other widgets which may also be standalone widgets. Following are the examples of composite widgets.