In this Article
This issue arises when an HTML element with a given ARIA role is assigned an attribute that is not allowed for that role.
What are ARIA attributes?
ARIA (Accessible Rich Internet Applications) attributes are specialized attributes designed to enhance the accessibility of web applications, particularly for users relying on assistive technologies like screen readers. These attributes provide additional information about elements, roles, states, and properties that are not inherently conveyed by standard HTML.
Looking for basic information on ARIA attributes? Refer to our article, ARIA Attributes: The Basics.
Supported ARIA Attributes
ARIA specifies which ARIA attributes are allowed for a role. Additionally, there are rules governing the use of each attribute with specific HTML elements. Detailed information about each attribute is available in the ARIA documentation for the respective roles and attributes.
Refer to the resources below for specific element and attribute information:
ARIA States and Properties Definitions - a list of attributes, their definitions, and what role(s) they can be used with.
Why Only Using Supported Attributes Matters
Using ARIA attributes with roles that are not permitted can negatively impact a webpage's accessibility. An invalid role-attribute combination could possibly disrupt accessibility across large parts of your content.
If ARIA attributes are applied to HTML elements in ways that do not align with current WAI-ARIA guidelines, they can conflict with the native semantics of those elements. This may cause assistive technologies to present confusing or inaccurate information about the user interface, misrepresenting the actual structure and functionality of the document.
Commonly Flagged Attribute Issues
The commonly flagged attributes in the ARIA Attribute column below are linked to their corresponding section in the WAI-ARIA specification to enable you to dig deeper. The Used in Roles column lists the roles in which that attribute may be used.
ARIA Attribute | Used in Roles |
Using ARIA Attributes in a <div>, <p>, or <span>
You may not specify ARIA attributes in a <div>, <p>, or <span> unless you have explicitly given the element a role.
Flagged examples:
<p aria-label="...">...</p>
<span aria-label="...">...<span>
<div aria-labelledby="...">...</div>
Corrected examples:
<p role="link" tabindex="0" aria-label="...">...</p>
<span role="button" tabindex="0" aria-label="...">...<span>
<div role="article" aria-labelledby="...">...</div>
Because explicit roles were given on the elements above, the aria- attributes are allowed.
For more HTML elements, see the Table of HTML elements and the allowed ARIA role, state, and property of each in the W3C ARIA Guidelines.
DubBot Resources:
Resources
DubBot Flag:
Elements must only use supported ARIA attributes
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!