The element's name is missing or incorrect

Rule ID:

aria-name-missing-incorrect

User Impact:

Critical

WCAG :

4.1.2.b

Rule

Every user interface control must have an accessible name that conveys the purpose or function of the control for screen readers and other assistive technology users.

Background

When a user interface control receives focus, assistive technologies (such as screen readers) present the user with details about the control, including its accessible name. Take for example a button with the text "Cancel". In this case, a screen reader may announce "Cancel button". The "Cancel" text is crucial for users to understand the purpose of the control.

How to Fix

Supply the user interface control with an accessible name using a technique that is appropriate for that type of control. This section lists several techniques that can be used with different types of user interface controls.

Form Input

Any of the techniques described in this section can be used to supply an accessible name for a form input.

Explicit Label

In most circumstances, the best technique is to use the <label> element with the for attribute. The value of the for attribute is the id attribute value of the <input> element.

<label for="first-name-input">First Name</label>
<input type="text" name="first-name" id="first-name-input">

No Visible Label

Use an aria-label attribute or title attribute on the <input> to provide a label when there is no visible label.

<input type="text" aria-label="search" />
<input type="submit" value="Search" />

Refer to a Visible Label

Use an aria-labelledby attribute on the <input> to reference a visible label. The value of the aria-labelledby attribute is the id attribute value of the visible text label.

<span id="nickname">Nickname:</span>
<input type="text" aria-labelledby="nickname" />

Implicit Label

Wrap the form element within the <label> element.

<label>First Name: <input type="text" name="first-name"></label>

Button

Any of the techniques described in this section can be used to supply an accessible name for a button.

Text Content

Make sure the <button> element contains text content that is visible.

<button>Apply Now</button>

Explicit Name

Use the aria-label attribute to provide an accessible name for the button.

This is useful for buttons that display an icon instead of a text-based label. A common example is a magnifying glass icon used instead of the text "Search".

<button aria-label="Search">
  <img src="search_icon.png" />
</button>

Link

Any of the techniques described in this section can be used to supply an accessible name for a link.

Text Content

Make sure the <a> element contains text content. Content can be:

• Visible text
• "Offscreen" text - hidden from view using CSS techniques that do not remove the content from the document flow
• Alternative text on an <img> element

<a href="https://dequeuniversity.com/contact/">Contact Us</a>

<a href="https://www.facebook.com/dequesystems/" class="fbicon"><span class="sr-text">Deque's Facebook page</span></a>

<a href="http://www.deque.com"><img src="deque_logo.png" alt="Deque Systems"></a>

Explicit Name

Use the aria-label attribute to provide an accessible name for the link.

This is useful for links that display an icon. A common example is a social media link.

<a href="https://www.facebook.com/dequesystems/" class="fbicon" aria-label="Deque's Facebook page"></a>

Form Group

Any of the techniques described in this section can be used to supply an accessible name for a form group.

Fieldset and Legend

<fieldset>
  <legend>Contact Information</legend>
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name">
  </p>
  <p>
    <label for="phone">Phone:</label>
    <input type="text" id="phone">
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="text" id="email">
  </p>
</fieldset>

Custom Group

1. Place the related form fields within a container, such as a <div>.
2. Add the role="group" attribute to the container.
3. Add the aria-labelledby attribute to the same container. The aria-labelledby attribute references the id attribute value of the visible text that serves as the label for the group.

<div role="group" aria-labelledby="contact-label">
  <p id="contact-label">Contact Information</p>
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name">
  </p>
  <p>
    <label for="phone">Phone:</label>
    <input type="text" id="phone">
  </p>
  <p>
    <label for="email">Email:</label>
    <input type="text" id="email">
  </p>
</div>

Iframe

Any of the techniques described in this section can be used to supply an accessible name for an iframe.

Title

Use the title attribute.

<iframe title="Video of touch screen for the blind in New York City taxis" src="//www.youtube.com/embed/hM0x0k2Bv3Y"></iframe>

Refer to a Visible Label

Use an aria-labelledby attribute which references the id attribute of visible text on the screen.

<h3 id="ts-vid">Video of touch screen for the blind in New York City taxis</h3>
<iframe src="//www.youtube.com/embed/hM0x0k2Bv3Y" aria-labelledby="ts-vid"></iframe>

Custom Control

Any of the techniques described in this section can be used to supply an accessible name for a custom control.

No Visible Label

Use an aria-label attribute that conveys the purpose or function of the control.

<div class="confirm-modal" role="dialog" aria-label="confirm identity">

Refer to a Visible Label

Use an aria-labelledby attribute that references visible text on the screen that conveys the purpose or function of the control.

<div role="radio" aria-labelledby="yes-label"></div>
<div id="yes-label">Yes</div>

Additional Resources

• Labels | Form Labels, Instructions, and Validation | Deque University
• Link Text | Semantic Structure and Navigation | Deque University
• Group Labels | Form Labels, Instructions, and Validation | Deque University
• Iframes | Semantic Structure and Navigation | Deque University