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

Documentation:
Accessibility Attributes

ARIA Role

A) ARIA Role

Here you can enable the role attribute on the module. The 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.

B) Role Type

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

C1) 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.

C2) 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.

C3) 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.

C4) 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.

C5) Window Roles

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

C6) 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.

D) Role Selector

By default, the role attribute is applied to the main module element. Here you can enter a selector for a specific element within the main module to apply the attribute instead. You may enter a single id, class or tag only. For example: entering h3 would apply the attribute to .et_pb_module h3, entering #my_id would apply the attribute to .et_pb_module #my_id, and entering .my_class would apply the attribute to .et_pb_module .my_class.

For detailed information on the 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.