eBay

Button

Form submit and reset buttons

Introduction

The button pattern allows the user to input a command, with one of the following possible action types:

  1. Submit form (type="submit")
  2. Reset form (type="reset")
  3. Run JavaScript (type="button")

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 the following patterns:

TIP: If left unspecified, the type attribute has a default value of "submit".


Working Examples

You can take a look at the button in action on our examples site.


Best Practices

The label must not be 'click here' or 'click me'.

The label must not be ambiguous to assistive technology. For example, 'Add to Cart', 'Place Bid' or 'Select'. Ambiguous buttons are fine for sighted users, but can present problems to users of assistive technology who may not be able to comprehend the context of the label. Use the offscreen text technique to add context for assistive technology.

A button must not open a new page. Use a link instead.

A button may update the hash fragment of the URL. For example, if building a single page app experience and explicitly managing the History API.

A button may open any kind of flyout, dialog or menu overlay.

TIP: Remember that buttons outside of forms do nothing when clicked until JavaScript is available. Either render the button on the client or disable it initially on the server.


Interaction Design

Keyboard

If button has focus, SPACEBAR and ENTER keys should activate button.

If button has focus, TAB and SHIFT-TAB keys should move to the next or previous focusable page element respectively.

Screenreader

If virtual cursor is on button, it must be invokable by virtual cursor (e.g. VO+SPACE in VoiceOver).

Role of 'button' must be announced.

Label must be announced.

Any state must be announced (e.g. expanded, haspopup).

Any description must be announced (i.e. via aria-describedby).


Developer Guide

We do not supply a developer guide for buttons because you should always use the button tag!

The only exception to this rule is an anchor tag that is progressively enhanced into a button (see below).

The button tag is straightforward, 100% accessible, and 100% stylable with CSS. However, there are three cases that might need extra care and attention:

  1. Ambiguous buttons
  2. Icon buttons
  3. Links enhanced into buttons (see lens for example)

ARIA Reference

This section lists all relevant ARIA roles, states and properties for a button.

aria-haspopup

Informs AT that the button opens a menu when clicked.

aria-controls

Informs AT that the button controls another element.

aria-expanded

Informs AT of the expanded state of any controlled element. Used in conjunction with aria-controls.

aria-label

Creates a label for the button.

Warning! This label will override any inner text that may be present. This property is most commonly used for critical icon buttons (i.e. buttons with icon and no text).

aria-describedby

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.

results matching ""

    No results matching ""