✎ Technique: Site search

Source: https://accessibility.huit.harvard.edu/technique-site-search Parent: https://accessibility.huit.harvard.edu/support-navigation-and-wayfinding

People use different methods to find web content. Screen-reader users might prefer navigation regions, people with dyslexia might prefer the logic of a site map, and people with motor impairments might prefer to type in a search term using a search facility.

So it's important the search facility on your site is logically and conventionally placed and constructed for optimal accessibility.

Example

To maximize comprehension for people scanning the page visually, you should provide a text field with a helpful placeholder and a suitably labelled button (such as "search") rather than a symbol or icon. The search feature should appear above the main content of the page, typically inside or below the page header and navigation.

In terms of markup, there are some specifics you should take into account, as shown in this snippet:

<search role="search">\ <form>\ <label for="search" class="vh">Search the site</label>\ <input type="text" id="search" placeholder="Eg. chocolates" />\ <button type="submit">search</button>\ </form>\ </search>

Notes

There is a hidden <label> for screen reader users that is announced when they focus the input. This can be hidden using an accessible hiding technique like:

.visually-hidden {\ position: absolute !important;\ clip: rect(1px, 1px, 1px, 1px);\ padding:0 !important;\ border:0 !important;\ height: 1px !important;\ width: 1px !important\ ; overflow: hidden;\ }

Placeholder attributes are not reliably read in assistive technologies, and since the "search" label of the button will not have been focused first, this is the most reliable way to tell the user what the input is for. - The search form is placed within a <search> element. This means screen reader users should be told they are in a search region when they focus the input. It also means that the area will turn up in "landmarks" (regions) navigation dialogs, and it can be reached using keyboard shortcuts such as the "r" key in JAWS. The <search> element is relatively new, added to modern browsers in 2023; adding a role="search" attribute ensures it's recognized as a landmark in older browsers. - For browsers that support placeholder styling, the text color should be made a darker gray than is often the browser default, allowing for easier reading.