Split button - Accessible design of user interface elements

Synonyms: Bifurcated switch

See also: Drop-down list , menu button , context menu , button

Split buttons are for the execution of a command that can be configured using a menu , a selection list or a dialog window .

Alternatively, split buttons are used for grouping related functions, where the primary function can be initialized directly using the button and the secondary functions can be initialized using the menu at the button.

A split button consists of a text or graphic label and a visual indicator in order to identify the button as such (usually a border). The split button also has additional buttons (with arrow icon), with which the secondary functions can be shown and hidden.

Figure 33: Split button for the selection of a color

Presentation

The requirements concerning buttons are described in the “buttons” section. Here, only the additional requirements are described which result from the fact that it is a button with primary and secondary functions. The requirements regarding the elements that can be shown are described at the respective element.

No.	Property	Description	Classification	Reference
519	Contrast	The arrow icon for opening and closing the menu or similar must have a contrast ratio of at least 3:1 with respect to the neighboring color.	Must	EN 301 549: 9.1.4.11, 11.1.4.11
520	Contrast	If the selected entry only differs from the unselected entry in the open state due to its color (e.g. foreground or background color), the colors must have a contrast ratio of at least 3:1. Note: The selected entry does not have to be color coded or marked with color only. It can be marked with a check box, for example. In this case, the contrast requirements for the color coding are eliminated as long as the check box has sufficient contrasts.	Must	EN 301 549: 9.1.4.11, 11.1.4.11

Operation

change of context may occur during or after the configuration. | Must | EN 301 549: 9.3.2.2, 11.3.2.2 |

No.	Property	Description	Classification	Reference
521	Use of the keyboard	It must be possible to access, operate and exit the split button with the keyboard (see Use of the keyboard table, below). Note: The button for showing and hiding the secondary functions should not receive the keyboard focus separately.	Must	EN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
522	Updates	If the function of the split button can be configured, no unexpected

Use of the keyboard: split button

Action	Key	Classification
Enabling the split button	SPACE ENTER	Required
Opening the menu or similar	ALT+DOWN ARROW	Required
Closing the menu or similar	ESC ALT+ UP ARROW [Selection of a menu item or similar]	Required

Use of the pointing device: split button

Action	Key	Classification
Enabling the split button	Left click on the button label	Required
Opening the menu or similar	Left click on the arrow icon	Required
Closing the menu or similar	Left click on the arrow icon Left click on an entry in the menu or similar Left click outside the split button	Required

Programming/interfaces

Note: If this is not possible, the value must be communicated as part of the label or description.

| Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 |

No.	Property	Description	Classification	Reference
522	Role	The split button role must be communicated to the Accessibility API (see

Practical tip: split buttons in Web applications

HTML

There is no element for split buttons in HTML. Instead, two buttons with expressive labeling (e.g. “Assign text color” and/or “Select text color”) can be used which receive the focus with TAB.

ARIA

There is no role for split buttons in ARIA. Instead, two separate buttons can be used as described above.

Date:: 15.01.2024
License:: CC-BY-SA 4.0
Version:: 1.0

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