Synonyms: Menu bar

See also: Context menu , menu button , toolbar , tree structure , tab group

Menus are used for selecting functions or for navigation (see DIN EN ISO 9241-161: 8.26).

A menu has several menu items which are usually arranged horizontally and adjacent to each other. A menu item can have a sub-menu. The menu items of a sub-menu are arranged vertically. Sub-menus can be nested several times, i.e. a menu item in a sub-menu can also have a sub-menu. It is only possible to display one sub-menu per hierarchy level. A menu can contain menu items that can be selected like check boxes or radio buttons. The menu items can be grouped. The label of the groups cannot be selected.

Figure 35: Application menu
No.PropertyDescriptionClassificationReference
529ContrastIf the menu item 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
530ContrastIf the menu item 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
531ContrastThe arrow icon which refers to a sub-menu must have a contrast ratio of at least 3:1 with respect to the neighboring color.MustEN 301 549: 9.1.4.11, 11.1.4.11
532ContrastIf the selected menu item only differs from the unselected menu item 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 menu item does not have to be color coded or marked with color only. It can be marked with a check box or a radio button, for example. In this case, the contrast requirements for the color coding are eliminated as long as the check box or the radio button has sufficient contrasts.

MustEN 301 549: 9.1.4.11, 11.1.4.11
533LabelIf the menu item has a graphic label, it should have a tooltip with a text label.ShouldWCAG 2.1: 3.3.5 (AAA);DIN EN ISO 9241-143: 9.6.11
534Web: ConsistencyIf the menu is used for navigation, the menu items on each screen should be displayed in the same relative order and receive the keyboard focus (see ConsistencyFocus indicatorZoom
  • wrap (i.e. they are shown in several successive rows),
  • be initialized with a menu button
  • be designed so they are scrollable horizontally (e.g. by scrollbar or two buttons).
-@
MustEN 301 549: 9.1.4.10, 11.1.4.10
No.PropertyDescriptionClassificationReference
538Use of the keyboardIt must be possible to access, operate and exit the menu with the keyboard (see Use of the keyboardkeyboard shortcutsshortcut keychange of contextUse of the pointing device
ActionKeyClassification
Focusing of the menuDesktop:
  • Application menu: ALT, F6
  • Area menu: TAB
Web: TAB
Required
Exiting the menuDesktop:
  • Application menu: F6, ALT, selection of a menu item, ESC
  • Area menu: TAB
Web:
  • TAB
  • possible selection of a menu item
Required
Opening a sub-menu of the menu
  • Focus in the menu: UP/DOWN ARROW, ENTER
  • Focus in the application: ALT+[shortcut key]
Required
Opening a sub-menu of a sub-menu
  • RIGHT ARROW
  • ENTER
Required
Closing a sub-menu of the menuESCRequired
Closing a sub-menu of a sub-menu
  • ESC
  • LEFT ARROW
Required
Navigating through the menuRIGHT/LEFT ARROW

Note: This must also work if the focus is in a sub-menu, and the use of the arrow key is not required in order to open or close a sub-menu due to the current focus position. In this case, the open sub-menu is closed automatically, and the next sub-menu is opened and the focus is placed on the first sub-menu item.

Required
Navigating through a sub-menuUP/DOWN ARROWRequired
Navigating through the menu or sub-menu[Shortcut key]Recommended
Navigating through the menu (to a menu item before or afterwards with a defined increment)PAGE UP, PAGE DOWN

Note: The increment should match the amount of visible menu items.

Recommended
Selection of a menu itemENTER, [shortcut key]Required

Use of the pointing device: menu

Permalink "Use of the pointing device: menu"
ActionKeyClassification
Opening a sub-menu of the menu if no sub-menu is yet displayedLeft click on the parent menu itemRequired
Opening a sub-menu of the menu if a sub-menu is already displayedHovering over the parent menu itemRequired
Closing a sub-menu of the menuLeft click on the parent menu item, left click on a menu item in the sub-menu (which does not contain another submenu),
click outside the menu
Required
Opening a sub-menu of a sub-menuHovering over the parent menu itemRequired
Closing a sub-menu of a sub-menuHovering over another parent menu item, left click on a menu item in the sub-menu (which does not contain another sub-menu),
click outside the menu
Required
Selection of a menu itemLeft click on the menu itemRequired
No.PropertyDescriptionClassificationReference
543RoleThe menu role must be communicated to the Accessibility API (see Accessibility APIElement status
  • to the “open” or “closed” status for menu items with a sub-menu.
  • to the “selected” or “unselected” status for menu radio buttons and menu check boxes.
-@
MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
546OrientationThe orientation of the menu (vertical or horizontal) must be communicated to the Accessibility API.MustEN 301 549: 9.4.1.2, 11.4.1.2
547NameIf the menu has a label or description, these must be communicated as the Accessible Name and/or Accessible Description (see LabelDescriptionkeyboard shortcut or a shortcut keyFocus indicator

Information about this article

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