Label in Name (2.5.3 – Level A)

“Label in Name’ requires that where a component has a text label, the name of the component also contains the text displayed.

Introduction

Some users rely on the programmatic names of components and controls, rather than text that is visually displayed on them. This is especially useful for users relying on assistive technology such as screen readers as the name of the control and the text displayed on it will match.

For speech-input users, mismatched labels and names may present them from effectively interacting with a control as they will need to use a name different to that displayed.

How to Pass ‘Label in Name’

• Ensure that the text label and programmatic name of components match.

• Abort actions where the pointer is released outside the boundary of the target.
  

Exceptions

• Where there is no visible label for a component. 
  
• Where text is used symbolically, for example ‘ABC” used to indicate a spellchecker.

‘Label in Name’ Tips

• Labels include:
  • Text to the left of dropdown lists and text inputs
    
  • Text to the right of checkboxes and radio buttons
    
  • Text inside buttons and tabs
    
  • Text below icons used as buttons
    
• Programmatic names include alt text, aria-label and aria-labelledby attributes.
  
• Programmatic names can be simplified versions of the display text if they begin with the same word. For example, ‘Search this page’ could use a name of ‘Search’.

• When deciding how much text counts as a visual label, take a commonsense approach. The text immediately adjacent to the control will be enough.

See Also

Understanding Success Criterion 2.5.3 (W3C)