Video examples
iOS Voiceover
Android Talkback
Windows Jaws Chrome
Windows NVDA Chrome
MacOS Voiceover Safari
Code examples
Use semantic HTML
- This semantic HTML contains all accessibility features by default.
- Include a search button
Search with autocomplete suggestions
<form role="search" action="/search/">
<label for="search">
Search this website:
</label>
<input list="components" type="search" id="search">
<datalist id="components">
<option value="Alert">
<option value="Animation">
<option value="Button">
<option value="Checkbox">
<option value="Date picker">
<option value="Expander accordion">
<option value="Footer / contentinfo">
<option value="Form">
<option value="Header / banner">
<option value="Heading: h1, h2, h3">
</datalist>
<button type="submit">
<span class="hidden">Search</span>
</button>
</form>
Developer notes
Name
- Use a
label
with a for="input-id
to describe the input
- Use
aria-label="Search this website"
if a label
can’t be used
Role
- Use
role="search"
for the <form>
- Use
type="search"
for the text <input>
Group
- Form identifies itself as
role="search"
- Include a search submit button.
Focus