Some links on this website are affiliate links. Find out more.

Accessibility Attributes


Here you can enable the aria-role attribute on the module. The aria-role attribute can be used to provide semantic meaning to the module, allowing assistive technologies to interact with it in a way that is consistent with user expectations. This can be used to help describe elements that don’t natively exist in HTML, or that exist but don’t yet have full browser support.

A) ARIA Role

Here you can select the aria-role type. There are six role-types to choose from.

B1) Document Structure Roles

Document structure roles can be used to provide a structural description for a section of content. Some of these roles may no longer be needed as browsers now support semantic HTML elements with the same meaning. Roles without HTML equivalents provide information on document structure to assistive technologies when equivalent native HTML tags are not available.

B2) Widget Roles

Widget roles can be used to define common interactive patterns. Similar to the document structure roles, some of these roles duplicate the semantics of native HTML elements and may no longer be needed. The difference between the two types is that widget roles generally require JavaScript and document structure roles do not.

B3) Landmark Roles

Landmark roles can be used to identify the structure of a web page. Assistive technologies use landmark roles to provide keyboard navigation to important sections of the page. Use these roles sparingly as too many landmark roles can make it difficult to understand the overall layout of the page.

B4) Live Region Roles

Live region roles can be used to define elements that will change dynamically. These roles can help low vision and blind users know if content has been updated as assistive technologies can be made to announce dynamic content changes.

B5) Window Roles

Window roles can be used to define sub-windows to the main document window, such as pop-up modal dialogs.

B6) Abstract Roles

Abstract roles are intended for use by browsers to help organize a document. They should not be used by developers as doing so will not result in any meaningful information being conveyed to assistive technology users. They are included here for completeness only.

For detailed information on the aria-role attribute and its uses, please see the W3C Web Accessibility Initiative (WAI) documentation.

Still need help?

If you didn’t find what you were looking for, please contact us.