Ensure every ARIA button, link and menuitem has an accessible name
This rule checks that each `button` element has a non-empty accessible name.
Autoren: Stein Erik Skotkjerra, Wilco Fiers
Finanzierung: WAI-Tools
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.
Each target element has an accessible name that is not empty ("").
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.
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.
input type="button", input type="submit" and input type="reset"This button element has an accessible name because of its text content.
<button>My button</button>
This input element has an accessible name because of its value attribute.
<input type="submit" value="Submit" />
This button element has an accessible name because of its aria-label attribute.
<button aria-label="My button"></button>
This element with a button role has an accessible name because of its aria-label attribute.
<span role="button" aria-label="My button"></span>
This button element with the disabled attribute has an accessible name because of its text content.
<button disabled>Delete</button>
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>
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" />
This button element has no accessible name because it has no content or attribute that can provide it.
<button></button>
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>
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>
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>
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>
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" />
This button element does not need an accessible name because it is not included in the accessibility tree.
<button style="display: none;"></button>
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>
There is no element with a semantic role of button.
<div>Press Here</div>
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>