Success Criterion 4.1.2 Name, Role, Value

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

Note

This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification.

WCAG Level
A
WCAG Versions
2.0
2.1
2.2

What the issue is

The use of the "aria-labelledby" attribute is a powerful way to provide accessible names for buttons, especially when text alone does not convey enough context, or when aiming to combine text from multiple sources. 

What the issue is

Toggle buttons that do not clearly communicate their state (e.g., "on" or "off") to the user can lead to confusion and difficulty in understanding the current state of the interface. This issue is often observed in buttons that change function or appearance when activated but do not provide adequate feedback to signify this change, especially to assistive technology users. An example of this issue is a "mute" button that changes function to "unmute" when activated but does not change its label or provides any other form of state indication.

What the issue is

Buttons that do not provide visual feedback when interacted with (e.g., via mouse hover, focus, or activation) can cause confusion and uncertainty for users. Visual cues such as changes in color, elevation, enclosing box,  or animation help indicate that a button can be interacted with and has indeed been activated or is currently focused. Without these cues, users, especially those with visual impairments or cognitive disabilities, may struggle to understand whether their actions have been registered.

What the issue is

Buttons that are inadequately labeled or utilize generic text such as "click here" or "submit" without providing context of the action being performed can significantly reduce accessibility. Users, especially those relying on screen readers, may not understand the purpose of the button or the action it initiates. This lack of clarity can lead to confusion and impede the ability to navigate and use a website effectively.

What the issue is

Incorrect application of ARIA (Accessible Rich Internet Applications) roles to buttons can lead to significant accessibility challenges. For example, a <div> or <span> element being used as a button without an appropriate role="button" attribute fails to convey its function to assistive technology users. Similarly, misuse of ARIA attributes, such as using "aria-pressed" on buttons that do not toggle state, can provide misleading information.

What the issue is

Links that are not accessible to screen reader users due to lack of proper ARIA labels or descriptive text result in those users being unable to understand the purpose of the link. This includes links that are entirely graphical with no textual annotation or rely solely on visual cues not conveyed to screen reader users. These practices can make navigation and understanding of web content challenging and frustrating for users who depend on assistive technologies.

What the issue is

Language selectors that do not visually or programmatically (through ARIA roles) indicate the currently selected language can confuse or disorient users. This oversight makes it difficult for users, especially those using assistive technologies, to understand which language is currently active or has been selected without encountering the content.

What the issue is

When websites offer content in multiple languages, the mechanism to select a preferred language may not be clearly indicated or accessible through keyboard navigation and screen readers. This can include language selection options without proper semantic markup or aria-labels, as well as visual indicators that do not meet color contrast requirements or are not visible to screen reader users.

What the issue is

When a language selector on a web page lists language options, but the names of the languages are not provided in their original language (for example, listing "German" instead of "Deutsch"), it can be confusing for users who are native speakers of those languages. This practice assumes that users have knowledge of the English names for their languages, which may not always be the case.