The global and local search components each include
This Page does not document search results or filtering. Choosing a suggestion based on a search term takes the user directly to the suggested permalink, whereas pressing the submit button will take the user to the www.bbc.co.uk/search page to browse and filter results.
Whether local or global, the search component must be marked up as a
role="search" landmark, making it available to screen reader shortcuts. The
role="search" attribution must not be placed on the form, but instead on a wrapping element. ARIA roles suppress implicit roles, and remove their associated behaviors. Screen readers should still be able to identify the form as a form.
<div class="gel-search" role="search"> <form class="gel-search-controls"> <!-- search functionality here --> </form> </div>
The search component is composed of two main parts: the search controls (
class="gel-search-controls"), and the associated search suggestions (
The following example is for a global search region. It would be revealed by pressing the search button in the page's Masthead, and includes a close button to dismiss it again. SVG data is elided. There are notes to follow.
<form class="gel-search-controls" method="get" action="https://search.bbc.co.uk/search"> <label for="search" hidden>Search the BBC</label> <input type="text" id="search" name="search" /> <button type="submit"> <span class="gel-sr">Search</span> <svg class="gel-icon gel-icon--text" focusable="false"> ... </svg> </button> <button type="button" class="gel-search-close"> <span class="gel-sr">Close</span> <svg class="gel-icon gel-icon--text" focusable="false"> ... </svg> </button> </form>
- "Search the BBC": Because this is a global search region, the label for the search input simply reads "Search the BBC". This text is
hiddenbut associated with the input, and available to screen readers, by making the
forattribute and the input's
idshare a value.
- Buttons: Each button uses the native button element. The close button takes
type="button"to differentiate it from a submit button and prevent it from erroneously submitting the form.
- SVG: Each SVG must take
aria-hidden="true"to ensure it is unavailable to assistive technologies and not focusable by keyboard.
A local search region differs in three ways:
- A logo is included for branding purposes.
- The input label reads "Search BBC [site name]" (a non-visual equivalent of the logo).
- The close button is omitted, since local search is a permanent fixture placed under the masthead.
placeholdermay be included, but not as a replacement for the
<label>which must remain intact. As GEL's local search documentation recommends, the placeholder should contain search suggestions, for example "enter a town, city, or postcode"
Where available, typing into the search input populates a region below the search controls with suggested links. This region looks like the following in its initial state (with notes to follow):
<aside class="gel-search-suggestions" aria-label="Search suggestions" aria-hidden="true" hidden> <h2 class="gel-search-suggestions-label" role="status" aria-live="polite"></h2> <div class="gel-search-suggestions-links"></div> </aside>
<aside>: The suggestions region is provided as a complementary landmark. This makes it easy to locate using screen reader software (while it is available) and allows for the descriptive label: "Search suggestions". When a screen reader user enters the region and focuses a suggestion link they will hear something similar to, "search suggestions, complementary region, list of 5 items, first item, [item text], link" (where 5 suggestions are available and presented in a list — which is recommended).
hidden: In the initial state, the region is not visible, on account of having zero height and
overflow: hidden(see the Recommended layout section. To achieve parity for screen reader users,
aria-hidden="true"'hides' the region from their software. The
role="status": When suggestions become available, screen reader users should be informed — and without stealing their focus. A live region is populated with text following the template "We have [n] suggestions for you<span class="gel-sr">, please find them below</span>:". The "please find them below" portion is only helpful non-visually, so is visually hidden using the
aria-live="polite"attribution is equivalent to
role="status". Some browsers only support one of the two attributes, so this maximizes compatibility.
.gel-search-suggestions-links: A function provided by the developer would be used to populate lists of suggestions (see the Reference implementations)