Accessible name missing

Rule

For each user interface component that includes a visible text label, the accessible name MUST match (or include) the visible text in the label.

Background

Speech input users can interact with a webpage by speaking the visible text labels of menus, links, and buttons that appear on the screen. It is confusing to speech input users when they say a visible text label they see, but the speech command does not work because the component's accessible (programmatic) name does not contain the visible label. When a user interface component has a visible text label - whether it be real text or an image of text - that text must also be found in the component's accessible (programmatic) name. When the visible label and accessible (programmatic) name for interactive components are in sync, speech input users can effectively interact with those components.

How to Fix

Fix this issue by using ONE of the following techniques to associate the visible text label with the control:

1. Explicit label: Under 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="fname">First Name:</label> <input type="text" name="fn" id="fname">

2. Use an aria-label attribute. Be sure that the aria-label value contains the text of the visible label in the same order that it appears in the visible label.

<span >Preferred Nickname:</span> <input type="text" aria-label="Preferred Nickname">

3. 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">

4. Implicit label (explicit label method is strongly preferred): Wrap the form element within the <label> element.

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