Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

A: Custom controls have associated labels (WCAG 4.1.2)

custom-controls-labels

This means

Custom interactive elements, such as buttons, drop-down menus, or sliders, that are not native HTML elements must have unique labels. These labels are recognized and read aloud by assistive technologies (e.g., screen readers) via attributes such as aria-label or aria-labelledby.

 

Impact

If the label is missing, users with screen readers cannot understand what the control does. This leads to massive usability barriers and violations of WCAG 4.1.2 (A) “Name, role, value”.

 

Recommendation

  • Every interactive element (e.g., buttons, switches, custom inputs) must be assigned an accessible name.
  • Labels should be understandable, unambiguous, and functional (“Start search” instead of “OK”).
  • Visible labels, if present, should match the accessible label.
  • If no visible text is available, use an aria-label or refer to a visible label via aria-labelledby.

 

Examples

Problematic: Custom buttons or switches without text or ARIA labels.

Better: Each interactive area has a clearly recognizable function and is correctly announced by screen readers.

 

Note

This criterion does not check the visual design, but whether semantic labeling is present and correctly linked.

 

Related WCAG criterion:

WCAG 4.1.2 – Name, Role, Value

To the official WCAG documentation →