MethodScript.com Accessibility - Labels are not attached to search form fields
LeigerGaming opened this issue ยท 0 comments
The search form does not include accessible labels that can be interpreted by a screen reader.
2 violations detected:
<select id="theme-select" name="theme-select">
<option value="default">Default Theme</option>
<option value="Dark">Dark</option>
<option value="Nilleke Dark">Nilleke Dark</option>
</select>
<input id="search" name="search" value="" type="search" class="sb-search-input">
Why is this important?
When on-screen labels are present, they must be programmatically associated with form fields. When on-screen labels are not present, form fields must be given an accessible label.
When form fields do not have a programmatic (accessible) label, assistive technologies may incorrectly render the label or provide no label at all to users. When labels are not present or are incorrect, users of assistive technologies may not be able to complete a form.
The HTML5 specification has a new form field attribute called
placeholder
. This represents a label or hint, such as a word or short phrase, that is assigned to a form field such as an input field. The label or hint appears within the form field and goes away when users start typing. When theplaceholder
attribute is used, the label or hint may not be detected by assistive technologies. Therefore, developers should provide off-screen text in thelabel
element of the form field or provide atitle