eBay MIND Patterns
Form submit and reset buttons
The button pattern allows the user to input a command, with one of the following possible action types:
Submit form (type="submit")
Reset form (type="reset")
The first two types of button are for use inside of a form only, due to their specific behaviour.
The third type is a general purpose button used for running client-side script. This type of button appears in many patterns:
If left unspecified, the type attribute has a default value of "submit".
Experience the pattern in action on our companion
eBay MIND Patterns examples website
View a fully styled example on our
Skin CSS Framework
clearly indicate the purpose of the button (i.e. not 'click here' or 'click me').
For buttons with labels that are not unique to the page (e.g. 'Add to Cart', 'Edit' or 'Delete', see the
open a new page. Use a
update the hash fragment of the URL. For example, if building a single page app experience and explicitly managing the History API.
open any kind of
If button has focus,
keys should activate button.
If button has focus,
keys should move to the next or previous focusable page element respectively.
If virtual cursor is on button, it must be invokable by virtual cursor (e.g. VO+SPACE in VoiceOver).
Role of 'button'
be announced (e.g. expanded, haspopup).
be announced (i.e. via aria-describedby).
We do not supply a developer guide for buttons because you should
always use the button tag
to this rule is an anchor tag that is progressively enhanced into a button.
The button tag is straightforward, 100% accessible, and 100% style-able with CSS. However, there are three cases that might need extra care and attention:
This section lists all relevant ARIA roles, states and properties for a button.
Informs AT that the button opens a
etc. when clicked.
Informs AT that the button controls another element.
Informs AT of the expanded state of any associated element or content
Creates a label for the button.
This label will override any inner text that may be present. This property is most commonly used for icon buttons.
Informs AT of any extended description or context related to the button. Note that this property has no effect on the accessible label of the button.