Role

Role and Aria-role

• A search input should have a container around it with role="search" not on the input itself.
• The header, Nav, main, and footer elements have good support for role (eg, <nav role="navigation">. . .<nav>).
• The input could have a type="search" (is commonly available to screen readers, access keys and browsers), but beware it’ll need a prefix of -webkit-appearance: none for styling it, else you’ll get a pill shaped input (very rounded corners) on iOS/macOS, and needs testing in other browsers for defaults.
• The aria-label is to let a user know what the search does because it could be site-wide, or specific to News articles.
• For aria-expanded to work, you need to apply a role to the collection, role="group" is handy for this if there’s no natural role available. eg, a toggle switch

<input type="search" id="site-search" name="q" aria-label="Search through site content">

<div class="o-search" role="search">
    <form action="/search" class="o-form o-form--search">
        <input type="search" name="query" id="search" aria-label="Search Girlguiding Shop - Enter 3 or more characters to search">
        <button type="submit" class="c-search__button">Search</button>
    </form>
</div>