In this Article
What are ARIA roles?
ARIA (Accessible Rich Internet Applications) provides attributes, one of which is a set of roles, that convey the accessibility semantics (the meaning of the code, describing how a program behaves and what it accomplishes) of structures on a page. These roles express the meaning that is conveyed by the layout and appearance of elements that organize and structure content, such as headings, lists, and tables.
From the ARIA Authoring Practicing Guide > GREAT REFERENCE.. https://www.w3.org/WAI/ARIA/apg/practices/structural-roles/
When to use ARIA Roles
ARIA roles were created before the advent of HTML5 to help improve accessibility for dynamic web content and complex user interface components. With the arrival of HTML5, many of the new elements introduced, such as <nav>, <section>, and <header>, can actually reduce the need for ARIA roles.
When authoring a webpage, you should always use native HTML elements whenever possible. You should not use an ARIA role or property if a native HTML element exists with the same semantic meaning.
There are some situations when it is acceptable to use the appropriate ARIA attribute instead of HTML:
The HTML element cannot be styled in a way to match the visual design requirements.
Testing shows that assistive technologies or browsers provide better support for the appropriate ARIA role.
Remediation of the code underlying legacy content is cost prohibitive.
When you build a web component from another element, that element might not have the right accessibility features.
Related Articles
Resources
ARIA Basics from W3C's ARIA Authoring Practices Guide
ARIA Roles from mdn web docs
All ARIA Structural Roles and Their HTML Equivalents from W3C's ARIA Authoring Practices Guide
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!