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

Presentation

Permalink "Presentation"

Consistency). | Must | EN 301 549: 9.3.2.3 | | @!535 | Desktop: Consistency | If 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). | Should | WCAG 2.1: 3.2.3 (AA) | | @!536 | Focus visibility | If a menu item 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 | | @!537 | Resizing | The 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).

| Must | EN 301 549: 9.1.4.10, 11.1.4.10 |

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

Operation

Permalink "Operation"

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 | | @!539 | Use of the keyboard | Frequently 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.

| Should | DIN EN ISO 9241-171: 9.3.10; DIN EN ISO 9241-171: 9.3.11 | | @!540 | Use of the keyboard | All the menu items should have a

shortcut key.

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

| Should | DIN EN ISO 9241-171: 9.3.10; DIN EN ISO 9241-171: 9.3.11 | | @!541 | Updates | When focusing and operating the menu, no unexpected

change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1 | | @!542 | Click area | The click area of the menu items should be at least 24 x 24 px (see

Use of the pointing device). | Should | WCAG 2.2 |

No.PropertyDescriptionClassificationReference
538Use of the keyboardIt must be possible to access, operate and exit the menu with the keyboard (see

Use of the keyboard: menu

Permalink "Use of the keyboard: menu"
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

Programming/interfaces

Permalink "Programming/interfaces"

Accessibility API). | Must | EN 301 549:9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!544 | Role | The menu item, menu radio button or menu check box roles must be communicated to the Accessibility API for the menu items (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!545 | Status | The 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.

| Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!546 | Orientation | The orientation of the menu (vertical or horizontal) must be communicated to the Accessibility API. | Must | EN 301 549: 9.4.1.2, 11.4.1.2 | | @!547 | Name | If 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.

| Must | EN 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 | | @!548 | Name | Each menu item 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.5 | | @!549 | Name | If a menu item has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!550 | Name | The group label of the menu items must (if available) be communicated to the Accessibility API. | Must | EN 301 549: 9.1.3.1, 11.1.3.1 | | @!551 | Operation | It must be possible to access, operate and exit the menu with assistive technology (see Accessibility API). | Must | EN 301 549: EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 | | @!552 | Update | Updates concerning the Accessible Name or status of the menu items must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 | | @!553 | Keyboard shortcut, shortcut key | If the menu item has a

keyboard shortcut or a shortcut key, these must be communicated to the Accessibility API. | Must | EN 301 549: 9.1.3.1, 11.1.3.1 | | @!554 | Desktop: Position | The size and position of the menu and the menu items must be communicated to the Accessibility API (see

Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 | | @!555 | Desktop: Element hierarchy | The parent / child relationships of the elements within the menu must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 |

No.PropertyDescriptionClassificationReference
543RoleThe menu role must be communicated to the Accessibility API (see

Information about this article

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

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