Search Form Creation Available: label vs aria-labels vs aria-labelledby
The current HTML for my search form looks like this:
<form action="/search/" method="post">
<input onclick="this.value='';" type="text" name="searchquery" id="searchbox" value="Search this site" class="swap_value" />
<input type="image" src="/images/searchbutton.gif" id="searchbutton" alt="" />
</form>
I would like to make the search form available. Since I understand the accessibility from W3.org: https://www.w3.org/WAI/tutorials/forms/labels/ and a11ymatters.com: http://www.a11ymatters.com/pattern/accessible-search/ I you need to add a label that will not be displayed visually and describe the search button, for example:
<form action="#" method="post">
<label class="search-label" for="search">Search this site:</label>
<input onclick="this.value='';" type="text" name="searchquery" id="searchbox" value="Search this site" class="swap_value" />
<input type="image" src="/searchbutton.gif" id="searchbutton" alt="Search Button" />
</form>
With CSS added:
.search-label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The W3.org article says you can use label, aria-label, or aria-labelledby to identify the form control, but it doesn't say which is the best practice. Does anyone know which one is preferable / better? And is the alt tag sufficient to identify my search button, or is that also needed for the tag?
Many thanks!
source to share
The best practice is probably to use <label>
. It provides a large hit area and offers a visual shortcut that does not disappear when the field receives focus (which is what your example does).
Since projects sometimes visually hide the label text, there is no benefit to using it <label>
and hiding it entirely. In this case, the usage aria-label
is probably good in the context of a search form.
aria-labelledby
must point to id
some text in order to act as a label, so if you're going to do it in this context, you can revert to using <label>
.
For your submit button, the attribute alt
is the correct thing to use, but will be less verbose.
In your case, you can get away from this:
<input type="text" value="" placeholder="Search" aria-label="Search">
<input type="image" src="/searchbutton.gif" alt="Submit">
placeholder
does what you are trying to do, leaving the value in the field, which you then clear. The screen reader will announce an Input, Text, Search field and a Button, Search button. Labels, effective actions work best.
For other code and examples, I've made an accessible search box that only launches as an icon (as requested by the client): http://codepen.io/aardrian/pen/bVQzJj
source to share
If you want to be accessible (not just for scrolling users), you must provide visible instructions .
This can be achieved:
- G167: Use adjacent button to designate field target .
- relying on the attribute
placeholder
in the fieldinput
(but this will not be enough, without interactive settings, since the instructions will disappear after filling the field)
It doesn't stop you from showing the shortcut , visible or not, for users checking the screen:
-
H44: Using label elements to associate text labels with form controls . If you are using this solution, never hide the text. People without firmware will not use the instructions.
-
H65: Using the title attribute to identify form controls when a label element cannot be used .
-
ARIA6: Using the aria label to provide labels for objects . Note that using ARIA alone is never a good idea, as it will not provide guidance for people not using firmware.
Note that it is recommended to use both the H65 and ARIA6 methods for better support.
source to share