Button

Referred HTML Tags

<button>, <input type=”button” />, <input type=”submit” />, <input type=”reset” />, <input type=”image” />

Accessible name

Any interactable HTML element requires an accessible name, which is a name that is announced or displayed by assistive technologies. A button element can get its accessible name by a text node wrapped within it, or from a labeling attribute (e.g. aria-label). Where buttons are implemented using the input tag, the “value” attribute is used as the accessible name, with the exception of <input type=”image” /> which does not support the value attribute, but uses an alt attribute instead. The element's accessible name should imply its purpose and the expected outcome of the interaction. The accessible name should therefore be clear and as descriptive as possible. Accessible names should be unique. Screen readers use accessible names also to allow the user quick access to elements on the interface via dedicated lists. If more than one element on the list has the same name, the user will find it hard to distinguish between the list's different links. Learn more about accessible names here

Color contrast

The WCAG's AA conformance level requires that the color contrast ratio of texts and their backgrounds is at least 4.5:1 If the font size is larger than 24 CSS pixels (e.g., font-size: 24px), or if the text is bold and larger than 18.5 CSS pixels, a contrast ratio of 3:1 is sufficient. Learn more about color contrast here, or test your contrast ratios using the WCAG Contrast Checker.

Visual focus indicator

Any interactable HTML element must have a discernible focus indication. People who use only the keyboard or other sequential navigation devices must get an indication of the currently active item. Unlike mouse users who point and click directly on elements or screen reader users who receive a voice prompt about the active element, keyboard users depend on a visual indication that marks the active element. Most user agents have a default focus indicator. It is the author's responsibility to provide an alternative focus indication if the default one is overriding. Note that focus indication must not be uttered only by a change of color as visually impaired or color blind people may find it difficult to distinguish.

Equivalent WAI-ARIA Role

role=”button”

Required properties/attributes/context

Ensure that the element is focusable
Ensure that the element has an accessible name
On a “disabeled” state:
- Ensure that the element is not focusable
- Ensure the element has an aria-disabeled=”true” attribute

Semantics Enhancements

These are WAI-ARIA attributes and patterns that support common specific use cases of the element.

The Menu Button opens a menu. It is often styled as a typical push button with a downward pointing arrow or triangle to hint that activating the button will display a menu.

Push Button

The Push Button supports two states. Similar to "checkbox", the checked/unchecked states are replaced with pressed and not-pressed, and these states are defined by the "aria-pressed" attribute, which receives true or false values respectively. When the "aria-pressed" attribute is used, screen readers will announce the button as a "press button". Note that if you intend to change the accessible name between states (e.g., stop/play), the "aria-pressed" is redundant since the button's state is implied from its name.