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 Consistency).MustEN 301 549: 9.3.2.3
535Desktop: 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 Consistency).ShouldWCAG 2.1: 3.2.3 (AA)
536Focus visibilityIf a menu item receives the keyboard focus, the focus indicator must be visible (see Focus indicator).MustEN 301 549: 9.2.4.7, 11.2.4.7
537ResizingThe menu must be perceptible and operable with a font size adjustment of up to 400% (and a resulting display width of 320 px) (see Zoom).

Note: The menu items can, for example,

  • wrap (i.e. they are shown in several successive rows),
  • be initialized with a menu button (e.g. with a hamburger icon (icon with three horizontal bars)),
  • 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 keyboard table).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
539Use of the keyboardFrequently used functions should have a keyboard shortcut.

Note 1: The keyboard shortcut should be displayed at the corresponding menu item.

Note 2: The keyboard shortcuts should be documented in the Help option.

ShouldDIN EN ISO 9241-171: 9.3.10; DIN EN ISO 9241-171: 9.3.11
540Use of the keyboardAll the menu items should have a shortcut key.

Note: The shortcut key should be marked by underlining the corresponding letter in the label.

ShouldDIN EN ISO 9241-171: 9.3.10; DIN EN ISO 9241-171: 9.3.11
541UpdatesWhen focusing and operating the menu, no unexpected change of context may occur.MustEN 301 549: 9.3.2.1, 11.3.2.1
542Click areaThe click area of the menu items should be at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2
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 API).MustEN 301 549:9.4.1.2, 11.4.1.2, 11.5.2.5
544RoleThe menu item, menu radio button or menu check box roles must be communicated to the Accessibility API for the menu items (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
545StatusThe status of the menu items must be communicated to the Accessibility API (see Element status).

Note: This applies, for example,

  • 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 Label and Description).

Note 1: If the page contains several menus, they must have a concise and expressive Accessible Name.

Note 2: A sub-menu can be labeled as an Accessible Name by the parent menu item.

MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8
548NameEach menu item must have a concise and expressive Accessible Name.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
549NameIf a menu item has a description, it must be communicated as an Accessible Description.MustEN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5
550NameThe group label of the menu items must (if available) be communicated to the Accessibility API.MustEN 301 549: 9.1.3.1, 11.1.3.1
551OperationIt must be possible to access, operate and exit the menu with assistive technology (see Accessibility API).MustEN 301 549: EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17
552UpdateUpdates concerning the Accessible Name or status of the menu items must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15
553Keyboard shortcut, shortcut keyIf the menu item has a keyboard shortcut or a shortcut key, these must be communicated to the Accessibility API.MustEN 301 549: 9.1.3.1, 11.1.3.1
554Desktop: PositionThe size and position of the menu and the menu items must be communicated to the Accessibility API (see Focus indicator).MustEN 301 549: 11.5.2.5, 11.5.2.13
555Desktop: Element hierarchyThe parent / child relationships of the elements within the menu must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9

Information about this article

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