CommandHelper icon indicating copy to clipboard operation
CommandHelper copied to clipboard

MethodScript.com Accessibility - Labels are not attached to search form fields

Open LeigerGaming opened this issue 3 years ago • 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 the placeholder attribute is used, the label or hint may not be detected by assistive technologies. Therefore, developers should provide off-screen text in the label element of the form field or provide a title

https://www.webaccessibility.com/results/?url=https%3A%2F%2Fmethodscript.com%2Fdocs%2F3.3.4%2Findex.html

LeigerGaming avatar Mar 11 '21 09:03 LeigerGaming