menu-landmark

Ensure that menus are placed within a landmark region so that assistive technologies like screen readers can easily discover them.

Description

Assistive technologies like screen readers can detect menus on webpages easily if you define them within a landmark. If webpages have menus outside landmarks, assistive technologies can’t identify them accurately, causing inconsistent user experience for users of assistive technologies.

You can use HTML5’s nav element or include a role attribute that equals to navigation to indicate a navigation landmark for screen readers.

Example

In the following example, the menu is without any landmark element. Such cases fail the menu-landmark rule.

In the following example, the menu is within the landmark element nav. This makes it easy for assistive technologies like screen readers to identify the menu. So, this example does not break the menu-landmark rule.

Similarly, the following code snippet uses role="navigation" to accurately define the navigational landmark. So, this example also does not break the menu-landmark rule.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if your site has menus. If so, place the menu within a nav landmark.
• As an alternative, add role="navigation" to enhance accessibility.

Reference

• WCAG 1.3.1: Info and Relationships (Level A)
• WCAG 2.4.1: Bypass Blocks (Level A)
• Technique H101: Using semantic HTML elements to identify regions of a page