What does this mean?
People using screen readers are not able to see the layout of a form. To make forms accessible, they must define explicit text labels for each form control.
More helpUsually the best solution is to use a <label>
element. The label may be linked to
by the form control:
<label for="name">Full name</label>
<input type="name" id="name">
or the <label>
can be wrapped around the form control:
<label>
Full name <input type="name">
</label>
Buttons are different, as their labels are specified by the code for the button, e.g.
<input type="submit" value="Send message">
<button>Send message</button>
Alternatively ARIA attributes, such as aria-label
may be used, but this information
will not be conveyed to visual users. For more information, see W3C's guide to labeling controls.
Hidden input fields (<input type="hidden">
) do not require labels.
Note that the placeholder
attribute
should not be used as an alternative to a label.
25.6% done
How close this website is to fixing this issue.
HTML | Found on page | Issues |
---|---|---|
<div id="react-autowhatever-1" role="listbox" class="react-autosuggest__suggestions-container">
|
79 | |
<input type="text" autocomplete="off" aria-autocomplete="list" aria-controls="react-autowhatever-1" class="react-autosuggest__input" placeholder="Search" name="search-list" id="search-field" tabindex="0" value>
|
79 | |
<input type="text" id="searchbox" data-testid="searchbox" autocomplete="off" class="height-45 caption font-light border-none outline-none padding-vertical-10 padding-left-10 padding-right-35 ">
|
14 | |
<select tabindex="0" title="Limit Per Page" class="search-filter_res-sel desktop">...</select>
|
3 | |
<select id="tablet-text">...</select>
|
3 | |
<button tabindex="0" class="did-you-mean_sugValue">
|
3 |