search-landmark

Ensure that search bars 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 search boxes on webpages easily if you define them within a landmark. If webpages have search bars outside landmarks, assistive technologies can’t identify them accurately, causing inconsistent user experience for users of assistive technologies.

Example

In the following example, the search bar is without any landmark element. Such cases break the search-landmark rule.

In the following example, the search bar is within a landmark using <div role="search">. This makes it easy for assistive technologies like screen readers to identify the search bar. So, this example does not break the search-landmark rule.

Similarly, the following code snippet uses <form role="search"> to accurately define the search landmark. So, this example also does not break the search-landmark rule.

How to fix?

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

• Check if your site has a search functionality.
• If so, place the search bar within a landmark using (`role=”search”’).

Reference

• WCAG 1.3.1: Info and Relationships (Level A)
• WCAG 2.4.1: Bypass Blocks (Level A)
• Using ARIA landmarks to identify regions of a page