DEV Community

Diana Le
Diana Le

Posted on

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 <search> is available in browsers and is compatible under Baseline 2023 Newly Available.

How to use

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

<search>
  <form>
    <label for="search-input">Search</label>
    <input type="text" id="search-input" name="search-input" />
  </form>
</search>
<!-- Search Results Below -->
Enter fullscreen mode Exit fullscreen mode

Older method using the attribute role="search"

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

<form role="search">
  <label for="search-input">Search</label>
  <input type="text" id="search-input" name="search-input" />
</form>
Enter fullscreen mode Exit fullscreen mode

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 <search> 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 <section> 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 <main>
Banner <header>
Navigation <nav>
Contentinfo <footer>
Complementary <aside>
Region <section aria-labelledby=""> or <section aria-label="">
Form <form aria-label="">
Search <search>

For more information

Top comments (1)

Collapse
 
sejutaimpian profile image
Eris Sulistina

Nice post!