Button

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

Label). | Must | EN 301 549 9.2.5.3, 11.2.5.3 | | @!486 | Label | If the button has a graphic label, the button should have a

tooltip with a text label. | Should | WCAG 2.1: 3.3.5 (AAA); DIN EN ISO 9241-143: 9.6.11 | | @!487 | Focus visibility | If the button receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |

Use of the keyboard table). | Must | EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2 | | @!489 | Use of the keyboard | Frequently used buttons should have a

keyboard shortcut which is documented in the application and the Help option. | Should | DIN EN ISO 9241-171: 9.3.10 | | @!490 | Web: Use of the keyboard | It must be possible to skip areas of content with buttons that occur on several pages using the keyboard (see

Practical tip: efficient navigation). | Must | EN 301 549: 9.2.4.1 | | @!491 | Use of the keyboard | If a window contains areas with several buttons, a mechanism should be implemented for skipping these page areas with the keyboard (see

Practical tip: efficient navigation). | Should | DIN EN ISO 9241-171: 9.3.16, 9.3.17 | | @!492 | Use of the pointing device | It must be possible to undo or cancel the accidental enabling of the button. To do this, the button may only be enabled when it is released, i.e. only upon the up event and not upon the down event (see

Use of the pointing device). | Must | EN 301 549: 9.2.5.2, 11.2.5.2 | | @!493 | Updates | When the button is focused, no

change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!494 | Updates | If the enabling of the button causes a new window or a modal pop-up to open, the focus must be placed in the window and/or the pop-up (see

Navigation sequence). | Must | EN 301 549: 9.2.4.3, 11.2.4.3 | | @!495 | Updates | If an unannounced change of context is performed through the enabling of the button within the current program interface, this must take place according to the current position of the keyboard focus, or the focus must be placed at the beginning of the updated area. | Must | EN 301 549: 11.2.4.3 | | @!496 | Updates | If an update is performed through the enabling of the button within the current program interface that requires an interaction on the part of the user, this should take place according to the current position of the keyboard focus. The keyboard focus should remain on the button or be placed at the beginning of the updated area (see Change of context).

Note: User interaction can mean reading a piece of information or the operation of interactive elements.

Note: This applies, for example, to Delete buttons which refer to a single element.

Accessibility API). | Must | EN 301 549: 9.4.1.2, 1.4.1.2, 11.5.2.5 | | @!500 | Status | The status of the button must be communicated to the Accessibility API (see

Element status). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!501 | Name | The button must have a concise and expressive

Accessible Name. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2. | | @!502 | Name | If the button has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!503 | Name | If the purpose of the button is determined by the visual context, this context must be communicated as part of the Accessible Name or Accessible Description.

Note: The Accessible Name of a button cannot, therefore, be simply “Close” or “Delete” if only the visual context indicates which element is closed or deleted. Instead, the Accessible Name must be “Close pop-up” or “Delete file [file name]”, for instance. Alternatively, the Accessible Description must contain a reference to the element which is to be closed or deleted.

Focus indicator). | Must | EN 301 549: EN 301 549: 11.5.2.5, 11.5.2.13 |

• 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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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