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.
Presentation
Permalink "Presentation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 529 | Contrast | If the menu item has a text label, this must have a contrast ratio of at least 4.5:1 with respect to the background. | Must | EN 301 549: 9.1.4.3, 11.1.4.3 |
| 530 | Contrast | If the menu item has a graphic label, this must have a contrast ratio of at least 3:1 with respect to the background. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 531 | Contrast | The arrow icon which refers to a sub-menu 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 |
| 532 | Contrast | If 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. | Must | EN 301 549: 9.1.4.11, 11.1.4.11 |
| 533 | Label | If the menu item has a graphic label, it should have a tooltip with a text label. | Should | WCAG 2.1: 3.3.5 (AAA);DIN EN ISO 9241-143: 9.6.11 |
| 534 | Web: 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). | 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,
| Must | EN 301 549: 9.1.4.10, 11.1.4.10 |
Operation
Permalink "Operation"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 538 | Use of the keyboard | It must be possible to access, operate and exit the menu with the keyboard (see 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 |
Use of the keyboard: menu
Permalink "Use of the keyboard: menu"| Action | Key | Classification |
|---|---|---|
| Focusing of the menu | Desktop:
| Required |
| Exiting the menu | Desktop:
| Required |
| Opening a sub-menu of the menu |
| Required |
| Opening a sub-menu of a sub-menu |
| Required |
| Closing a sub-menu of the menu | ESC | Required |
| Closing a sub-menu of a sub-menu |
| Required |
| Navigating through the menu | RIGHT/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-menu | UP/DOWN ARROW | Required |
| 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 item | ENTER, [shortcut key] | Required |
Use of the pointing device: menu
Permalink "Use of the pointing device: menu"| Action | Key | Classification |
|---|---|---|
| Opening a sub-menu of the menu if no sub-menu is yet displayed | Left click on the parent menu item | Required |
| Opening a sub-menu of the menu if a sub-menu is already displayed | Hovering over the parent menu item | Required |
| Closing a sub-menu of the menu | Left 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-menu | Hovering over the parent menu item | Required |
| Closing a sub-menu of a sub-menu | Hovering 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 item | Left click on the menu item | Required |
Programming/interfaces
Permalink "Programming/interfaces"| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 543 | Role | The menu role 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.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,
| 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 |
Information about this article
You are welcome to send feedback by email about our handout!