Synonyms: Command button, push button

See also: Menu button , link , toggle switch , switch , tab , accordion

Buttons are used to execute a command (see DIN EN ISO 9241-161: 8.32).

A button consists of a text or graphic label and a visual indicator in order to identify the button as such. A border is usually used as a visual indicator for buttons.

Buttons can be used within other elements, e.g. in tables , tree structures , toolbars , scrollbars , tab panels containing tabs , accordions , input fields , spin buttons , drop-down lists and combined input fields . Deviating requirements concerning the buttons are described in the sections about these elements

Figure 30: Confirm button
No.PropertyDescriptionClassificationReference
482ContrastIf the button has a text label, this must have a contrast ratio of at least 4.5:1 with respect to the background.MustEN 301 549: 9.1.4.3, 11.1.4.3
483ContrastIf the button has a graphic label, this must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
484ContrastIf the button is only identifiable as such on the basis of its color design, the color must have a contrast ratio of at least 3:1 with respect to the neighboring colors.

Note 1: A button might be recognizable as an interactive element on the basis of its border or its background color, for example.

Note 2: The requirement does not apply if the button is clearly identifiable as a button, because of its position or labeling, for example.

MustEN 301 549: 9.1.4.11, 11.1.4.11
485LabelThe visible label of the button must correspond to or be contained in the name of the button which is communicated to the Accessibility API (see LabeltooltipFocus indicator
No.PropertyDescriptionClassificationReference
488Use of the keyboardIt must be possible to access, operate and exit the button with the keyboard (see Use of the keyboardkeyboard shortcutPractical tip: efficient navigationPractical tip: efficient navigationUse of the pointing devicechange of contextNavigation sequence

Use of the keyboard: button

Permalink "Use of the keyboard: button"
ActionKeyClassification
Focusing of the buttonTABRequired
Exiting the buttonTABRequired
Enabling the buttonSPACE, ENTERRequired

Use of the pointing device: button

Permalink "Use of the pointing device: button"
ActionKeyClassification
Enabling the buttonLeft clickRequired
No.PropertyDescriptionClassificationReference
499RoleThe button role must be communicated to the Accessibility API (see Accessibility APIElement statusAccessible NameFocus indicator

Practical tip: buttons in Web applications

Permalink "Practical tip: buttons in Web applications"
  • JAWS: [label] button [note on operation with the Enter key]
  • NVDA: [label] button | graphics button
  • Windows Narrator: [label] button

Please note:

  • The type of button (type=reset, type=submit, type=button) is not perceptible with the screen readers.
  • Only NVDA outputs the element <input type=image> as a “graphic button”.

The button should be implemented with the HTML elements <button> or <input type=button>. For graphic buttons, <input type=image> can be used. In forms, <input type=submit> and/or <input type=reset> can be used for the buttons for sending and resetting the inputs.

Label:

  • The labeling of the buttons that are labeled with <button> should take place using the text content.
  • The labeling of the buttons that are labeled with <input> should take place using the value attribute.
  • Buttons that are labeled with <input type=submit> or <input type=reset> do not need to be explicitly labeled because they are labeled automatically by the browser (with “Send” and “Reset”, for instance). The default labeling of the browser can be overridden with the value attribute, however. This is recommended if reference is made to these buttons in the application or the Help option, because the label of the buttons is otherwise different according to the browser.
  • In the case of graphic buttons, the labeling takes place using the alternative text of the graphic (e. g. <input type=image alt=…> and/or <button><img alt=…></button>) or with aria-label. It should be noted that the button label does not describe the graphic, but the purpose of the button.
  • The labeling of the buttons should be concise, unambiguous and expressive. Buttons labeled “Click here” or “Detailed view” are not considered expressive. The label should either be expressive (e.g. “Detailed view of Joe Bloggs”), or the description should explain the purpose of the button (with aria-describedby or title, for example).

Status and type:

  • Buttons can be marked as disabled (disabled).
  • With buttons that are used for navigation or pagination, aria-current can be used to mark the button which refers to the current element.
  • Buttons that are used to show and hide areas should be marked with aria-expanded to communicate the status of the areas (shown or hidden).
  • Buttons that open a pop-up should not be labeled aria-haspopup, even if the attribute is intended for that purpose. This is because, when combined with a button, aria-haspopup causes the element to be output as a menu button . Instead, links should be used with aria-haspopup r buttons that have a text note in the description.

Further information: 4.10.6 The button element - HTML Standard (whatwg.org), 4.10.5.1.21 Button state (type=button) - HTML Standard (whatwg.org), 4.10.5.1.19 Image Button state (type=image) - HTML Standard (whatwg.org), 4.10.5.1.18 Submit Button state (type=submit) - HTML Standard (whatwg.org), 4.10.5.1.20 Reset Button state (type=reset) - HTML Standard (whatwg.org)

If the button is not implemented with the HTML element, in addition to the notes on HTML buttons, it is necessary to take account of the following:

  • The role is communicated with role=button.
  • Disabled buttons can be marked with aria-disabled.
  • The buttons should be visually marked (with a border, for example) so that their role is also perceptible with the use of Windows Contrast Adjustment.

Further information: button role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org), Button Pattern | APG | WAI | W3C

Information about this article

You are welcome to send feedback by email about our handout!