Use the new ARIA landmark <search> for search forms and filters

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. Search 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: Search 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 https://alvaromontoro.com/blog/68033/new-html-element-search https://www.scottohara.me/blog/2023/03/24/search-element.html

Apr 29, 2025 - 18:09

Use the new ARIA landmark <search> for search forms and filters

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