Menus Tutorial

Menus are used for navigation and to provide functionality which are critical parts of web page operability.

• Structure: Mark up menus in a way that reflects their structure and appropriately labels them.

• Styling: Use commonly recognized design patterns to distinguish menus and the state of menu items.

• Fly-out Menus: Ensure fly-out (drop-down) submenus can be used appropriately by mouse and keyboard.

• Application Menus: Add specific markup and keyboard behavior to resemble desktop application menus.

Why is this important?

Navigation menus reflect the underlying structure of websites. Application menus provide access to the essential functionality of an application. Thus menus are critical parts of web pages and applications and require particular attention during design and development.

• Screen reader and keyboard users benefit from keyboard interoperability and markup that allows them to operate menus in different ways.

• Users with fine motor difficulties and touch screen users require larger targets to click or tap on. In fly-out menus, submenus should not disappear immediately after the mouse has left the clickable area.

• People with limited attention or short-term memory benefit from clear and distinct menus with easily identifiable states, such as the current page.