button
Characteristics
Superclass Role:
- command
Base Concept:
- HTML button
Related Concepts:
- link
- XForms trigger
See Related:
- link
Supported States and Properties:
- aria-expanded (state)
- aria-pressed (state)
Inherited States and Properties:
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-describedby
- aria-disabled (state)
- aria-dropeffect
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
Name From:
- contents
- author
Accessible Name Required:
- True
Children Presentational:
- True
An input that allows for user-triggered actions when clicked or pressed.
The button role is used when the element is designed to look like a button but is coded as a link. Sometimes an image will be used in place of button. Adding scripting for that image will help the mouse users, but the screen reader users will not be able to understand that it is a button.
For various reasons, on web pages we find the functionalities such as Continue, Next, Confirm, Cancel etc and are coded as links. As per the semantics, these elements must be coded as buttons but not links. To ensure that the element is read as button by the screen readers role="button" can be used.
Buttons are mostly used for discrete actions. Standardizing the appearance of buttons enhances the user's recognition of the widgets as buttons and allows for a more compact display in toolbars.
Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.
Syntax
<a href="/continue.html" role="button">Continue</a>
Microsoft Active Accessibility accRole Property:
- ROLE_SYSTEM_PUSHBUTTON
UI Automation ControlType Property:
- button
UI Automation AriaRole Property:
- button