Semantics
An input that allows for user-triggered actions when clicked or pressed.
Additional info from the ARIA specification
See related link.
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.
Abstract Role
WidgetRepresents a focusable, interactive element.
Content Categories
Phrasing ContentAn element that typically appears inline and provides semantic meaning to text content.
Allowed Descendants
Phrasing Children Allowed
No interactive content descendants, and no descendants with a tabindex attribute specified.
Note
Children Become Presentational
Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.
Usage
Allowed HTML elements
Implicit semantics
These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.
buttoninput[type=reset]input[type=submit]summary
Explicitly allowed
a[href][role=button]img[role=button]input[type=checkbox][role=button]
Elements that can have any role
abbr[role=button]address[role=button]b[role=button]blockquote[role=button]canvas[role=button]cite[role=button]code[role=button]custom-element[role=button]data[role=button]del[role=button]dfn[role=button]div[role=button]em[role=button]figure[role=button]i[role=button]ins[role=button]kbd[role=button]mark[role=button]output[role=button]p[role=button]pre[role=button]q[role=button]samp[role=button]small[role=button]span[role=button]table[role=button]tbody[role=button]tfoot[role=button]thead[role=button]time[role=button]u[role=button]var[role=button]