Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Inaccessible ARIA command element name (WCAG 2.0 Level A Issue)

Post cover image showing clasped hands - representing website accessibility projects

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

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Inaccessible ARIA command element name (WCAG 2.0 Level A Issue)


  <h1>Inaccessible ARIA command element name</h1>
<div id="no-aria-no-text" role="link"></div>
<div id="empty-aria" role="link" aria-label="&gt;&lt;/div&gt;
&lt;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:

  1. Include text between the opening and closing tags of the element.

  2. Use the aria-label attribute.

  3. Use the aria-labelledby attribute.

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

  <h1>Accessible ARIA command element name</h1>
<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 div with role="link", I've included text inside the element.
  • For the second, I've used the aria-label attribute to provide an accessible name.
  • For the third, I've used the aria-labelledby attribute and linked it to another element that contains the accessible text.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform