Input type search with Accessibility compatibe?

Question

<input type="search" placeholder="search" /> 

The screen reader ignores this when search field is focused! What attribute to be added so that the screen reader would say "This is a search box " Thanks.

Answer 1

The way to make it accessible is use text and markup around the input element rather than attributes. This way, you don’t rely on any specific support to some special attributes (which greatly varies across browsers). Example:

<form action=... role="search">
<h2>Search this site</h2>
<label for="q">Keywords:</label>
<input type="search" id="q" name="q">
<input type="submit" value="Search">
</form> 

Then it is OK that the input field is spoken as a normal text field, since the user already knows it’s for entering keywords for a search.

If you are forced to play with small input box without a label, due to site layout requirements, then accessibility is inevitably reduced. You can try to help some users with some attributes that might get recognized and used by some browsers, e.g.

<input type="search" name="q" placeholder="keywords"
       title="Keywords for a site-wide search"
       aria-label="Keywords for a site-wide search"> 

Note: The placeholder attribute should contain text that acts a hint of the expected input, rather than a general name for some functionality.

Reference for role and aria-* attributes: Using WAI-ARIA in HTML (WD).