Dieser Inhalt ist derzeit nur auf Englisch verfügbar

Audit input-button-name

Ensure input buttons have discernible text

Impact:

Critical

WCAG-Konformität:

A
WCAG 4.1.2

Issue types:

failure, needs review

Button has non-empty accessible name

This rule checks that each `button` element has a non-empty accessible name.

Applicability

This rule applies to elements that are included in the accessibility tree and have a semantic role of button, except for input elements with a type attribute value of image.

Expectation

Each target element has an accessible name that is not empty ("").

Background

This rule considers an exception for "image buttons" (i.e., input elements with a type attribute value of image). Image buttons failing this rule would fail Success Criterion 4.1.2 and Success Criterion 1.1.1 which is not part of the accessibility requirements for this rule.

Assumptions

The rule assumes that all buttons are user interface components as defined by WCAG 2.

Accessibility Support

Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some elements can have a semantic role of button and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
Some elements have a role of button and a default accessible name defined by the HTML Accessibility API Mapping, for example input elements whose type attribute value is either submit or reset. This rule considers that these default names can be descriptive and therefore does not fail them.

Related rules

Image button has non-empty accessible name

Bibliography

Test Cases

Passed

Passed Example 1

This button element has an accessible name because of its text content.

<button>My button</button>

Passed Example 2

This input element has an accessible name because of its value attribute.

<input type="submit" value="Submit" />

Passed Example 3

This button element has an accessible name because of its aria-label attribute.

<button aria-label="My button"></button>

Passed Example 4

This element with a button role has an accessible name because of its aria-label attribute.

<span role="button" aria-label="My button"></span>

Passed Example 5

This button element with the disabled attribute has an accessible name because of its text content.

<button disabled>Delete</button>

Passed Example 6

This off screen button element has an accessible name because of its text content.

<html>
	<style>
		.notInPage {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<body>
		<button class="notInPage">Save</button>
	</body>
</html>

Passed Example 7

This input element has an accessible name because of the default accessible name for an input element with a type attribute set to reset.

<input type="reset" />

Failed

Failed Example 1

This button element has no accessible name because it has no content or attribute that can provide it.

<button></button>

Failed Example 2

This button element has no accessible name. The value attribute does not provide an accessible name for button elements, only when an input element's state of the type attribute is button, submit or reset.

<button type="button" value="read more"></button>

Failed Example 3

This element with the button role has no accessible name because it has no content or attribute that can provide it.

<span role="button"></span>

Failed Example 4

This off screen button element has no accessible name because it has no content or attribute that can provide it.

<html>
	<style>
		.notInPage {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<body>
		<button class="notInPage" value="delete"></button>
	</body>
</html>

Failed Example 5

This button element has an explicit role of none. However, it is focusable (by default). Thus it has a semantic role of button due to Presentational Roles Conflict Resolution. It has an empty accessible name.

<button role="none"></button>

Inapplicable

Inapplicable Example 1

This input element has a type attribute set to image. These images are tested in a separate rule which also tests success criterion 1.1.1 Non-text Content.

<input type="image" value="download" alt="Download" />

Inapplicable Example 2

This button element does not need an accessible name because it is not included in the accessibility tree.

<button style="display: none;"></button>

Inapplicable Example 3

This button element has a link role. Links are tested in a separate rule which also tests success criterion 2.4.4 Link Purpose (In Context).

<button role="link">take me somewhere</button>

Inapplicable Example 4

There is no element with a semantic role of button.

<div>Press Here</div>

Inapplicable Example 5

This button element has an explicit role of none; it is not focusable because it is disabled. Thus it has a semantic role of none.

<button role="none" disabled></button>

Autoren: Stein Erik Skotkjerra, Wilco Fiers

Finanzierung: WAI-Tools