eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Introduction
  • Working Examples
  • Best Practices
  • Interaction Design
  • Developer Guide
  • ARIA Reference
  1. Input

Button

A control for executing JavaScript or submitting/resetting form values

PreviousInputNextCheckbox

Last updated 3 months ago

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 many patterns:

  • and more

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

Working Examples

Best Practices

The label must clearly indicate the purpose of the button (i.e. not 'click here' or 'click me').

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.

Interaction Design

Pointer

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).

Any change in label (e.g. a waiting/loading state) may be announced by the screen reader (NOTE: a live-region should not be used for this).

Developer Guide

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

ARIA Reference

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

aria-haspopup

aria-controls

Informs AT that the button controls another element.

aria-expanded

Informs AT of the expanded state of any associated element or content

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 icon buttons.

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.

Another type of button is the

Experience the pattern in action on our companion .

View a fully styled example on our .

For buttons with labels that are not unique to the page (e.g. 'Add to Cart', 'Edit' or 'Delete', see the technique.

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

A button may open any kind of , or overlay.

A button may display a waiting/loading state, but should not be a live-region (see: ). Some screen readers automatically announce any changes to the programmatic label, and so using a live-region would trigger a second, redundant announcement.

Buttons should not have a hand cursor. See .

Informs AT that the button opens a or etc. when clicked.

Infotip
Carousel
Menu Button
Lightbox Dialog
Toggle Button.
eBay MIND Patterns examples website
Skin CSS Framework
Ambiguous Label
link
flyout
dialog
menu
Hand Cursor on Buttons
menu
dialog
FAQ: When should a live-region be used?
Form submit and reset buttons