ARIA landmark roles are sections of a web site that are so important to the page that they warrant their own dynamically generated navigation in assistive technologies. There are eight total landmarks, but there were previously only seven semantic HTML tags to correspond to those landmarks. Now finally the missing semantic tag is available in browsers and is compatible under Baseline 2023 Newly Available.

How to use

Wrap the tag around your search form (and any relevant filters or quick search results). The full search results should not be within the but rather within the main body of the page.

for="search-input">Search
     type="text" id="search-input" name="search-input" />

Older method using the attribute role="search"

Before the element, you could use the "search" role on a form to designate it as a landmark:

role="search">
   for="search-input">Search
   type="text" id="search-input" name="search-input" />

I'll admit I wasn't aware I was missing role="search" at first until I had built many search forms, but using that or the newer element is a very easy change to implement.

ARIA landmarks and corresponding HTML tags

Here's the complete list of landmarks and their respective tags/elements. Be sure if you use the

tag that you use an ARIA label with it, such as tying it to the ID of the highest heading within.

ARIA landmark Corresponding HTML
Main
Banner
Navigation
Contentinfo
Complementary
Region
or
Form
Search

For more information