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
Search results
<form role="search" action="/demos/search/">
<label for="atomic-search">
Search this website:
</label>
<input list="components" type="search" id="atomic-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>
Related search input entries