What does this accessibility issue mean?
Accessibility issue summary: Inaccessible ARIA command element name
The aria-command-name attribute is used to describe the action that will occur when the user activates the command.
Every ARIA button, link, or menuitem (note: menuitem is deprecated in HTML) should have an accessible ARIA command element name.
The ARIA ‘command’ role is used to define a command or user-initiated action, typically triggered by a user interface component such as a button or a menu item. When it comes to web accessibility, the names associated with ARIA command elements must be accessible, meaning that they provide meaningful information and are perceivable by all users, including those with disabilities.
When the aria-command-name attribute is used incorrectly or is missing, users with disabilities may have difficulty understanding the purpose and function of the command. For example, a user who relies on a screen reader may not be able to understand the action that will occur when they activate the command.
This requirement for ARIA command names aligns with the Web Content Accessibility Guidelines (WCAG) principles, particularly Principle 1: Perceivable and Principle 4: Robust. This rule relates to WCAG Success Criterion 4.1.2: Name, Role, Value. (WCAG Level A issue.)
Example HTML violation: Inaccessible ARIA command element name (WCAG 2.0 Level A Issue)
<main></main>
<div>
<h1>Inaccessible ARIA command element name</h1>
</div>
<div id="no-aria-no-text" role="link"></div>
<div id="empty-aria" role="link" aria-label="></div>
<div role=" aria-labelledby="broken-id"></div>The above HTML violates the ARIA command-name accessibility rule because the three div elements with a role of "link" do not have an accessible name. An accessible name is necessary for assistive technologies, like screen readers, to refer to these elements by name. To provide an accessible name, you can use one of the following methods:
-
Include text between the opening and closing tags of the element.
-
Use the
aria-labelattribute. -
Use the
aria-labelledbyattribute.
The HTML provided does not correct this violation; it only serves as an example to demonstrate the explanation of why the HTML is incorrect.
How to fix "Inaccessible ARIA command element name (WCAG 2.0 Level A Issue)" issue
<main></main>
<div>
<h1>Accessible ARIA command element name</h1>
</div>
<div id="text-content" role="link">Click here</div>
<div id="aria-label" role="link" aria-label="Click here"></div>
<div id="aria-labelledby" role="link" aria-labelledby="label"></div>
<div id="label">Click here</div>In the accessible version of your HTML:
- For the first
divwithrole="link", I've included text inside the element. - For the second, I've used the
aria-labelattribute to provide an accessible name. - For the third, I've used the
aria-labelledbyattribute and linked it to another element that contains the accessible text.
