Label in Name

This information relates to criterion 2.5.3 Label in Name, which states:

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

This criterion ensures that people who use voice recognition software, such as Dragon, VoiceControl or Windows Speech, can use say what you see to activate interactive items on the page.

What are labels and names?

Most interactive elements on a web page have a visual label. Because these are usually in a consistent place in relation to the interactive element, we know what they are. Those visual words that are next to or in an interactive element are called the label.

This criterion only affects elements where the visual label includes either text or an image of text. So it excludes situations where icons are used.

If you use standard HTML, the visual label is automatically used as the accessible name. However, if this is not the case, or if additional information is needed for the accessible name, then the name must include the text that is presented visually.

Some examples

Links

Best practice for links is to make the text on the page (the label) meaningful, so that it tells a user where it will take them. If you do this, then the label will automatically also be the accessible name, so you don't have to do anything else. Here is a good example:

Web Content Accessibility Guidelines (WCAG) 2.1 Opens in new window

Here is the code for this example:

<a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1 
<img src="../Images/new-window-icon.jpg" alt="Opens in new window" class="new-window"></a>

Buttons

Best practice for buttons is to make the label the text on the button. This will automatically be used as the accessible name. Here is an example:

Here is the code for this example:

<button type="button" onclick="alert('Hello world!')">Alert</button>

Radios and checkboxes

For radio buttons and checkboxes, we expect the label to be to the right of the interactive element. Here is an example of each:

What colour hair do you have?



Here is the code for this example:

<fieldset>
  <legend>What colour hair do you have?</legend>
  
  <input type="radio" id="black" name="hair-colour">
  <label for="black">Black</label><br>
  
  <input type="radio" id="brown" name="hair-colour">
  <label for="brown">Brown</label><br>
  
  <input type="radio" id="blond" name="hair-colour">
  <label for="blond">Blond</label><br>
  
  <input type="radio" id="ginger" name="hair-colour">
  <label for="ginger">Ginger</label><br>
  
  <input type="radio" id="other" name="hair-colour">
  <label for="other">Other</label>
</fieldset>
Which of the following hot drinks do you like?


Here is the code for this example:

<fieldset>
  <legend>Which of the following hot drinks do you like?</legend>
  
  <input type="checkbox" id="tea" name="drinks">
  <label for="tea">Tea</label><br>
  
  <input type="checkbox" id="coffee" name="drinks">
  <label for="coffee">Coffee</label><br>
  
  <input type="checkbox" id="chocolate" name="drinks">
  <label for="chocolate">Hot chocolate</label><br>
  
  <input type="checkbox" id="horlicks" name="drinks">
  <label for="horlicks">Horlicks</label>
</fieldset>

In these examples, each <input> (radio or checkbox) is programmatically linked to its <label> by the id and for attributes. These must match for it to work correctly.

As a Dragon user, when I say, Click coffee, it associates the word coffee as being both the label and the accessible name for that checkbox, and it is selected.

Text inputs

Text inputs can be tricky for voice recognition users because there is often both a label and placeholder text. It can be difficult to know which of these you are supposed to say. Even worse is where there is only placeholder text. This then appears to be the visual label but it is not recognised as the accessible name.

Text boxes should be coded in a similar way to other <input> fields. Here is an example:

What is your name?

Here is the code for this example:

<fieldset>
  <legend>What is your name?</legend>
	
  <label for="fname">First name</label>
  <input type="text" id="fname" name="name" autocomplete="given-name"><br>

  <label for="lname">Last name</label>
  <input type="text" id="lname" name="name" autocomplete="family-name">
</fieldset>

You may have already noticed that in the case of text boxes, we expect the label to come first... to be on the left of the input.

Finally, let's think about a different kind of text input. This time, I will throw in some placeholder text.


The accessible name for this text field is the label - Please leave feedback here. Because the word feedback is in the label, a Dragon user can say, Click feedback and this will put the cursor inside the text box. However, the placeholder text is potentially confusing. It might not be clear now, whether the accessible name is the label or the placeholder text. It would probably be better to just leave the placeholder text off altogether.

Here is the code for this example:

<label for="feedback">Please leave feedback here:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" placeholder="I love this product because..."></textarea>
Clicky