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.
45.6% done
How close this website is to fixing this issue.
HTML | Found on page | Issues |
---|---|---|
<input placeholder="Search..." class="elementor-search-form__input" type="search" name="s" title="Search" value>
|
64 | |
<input type="file" class="dz-hidden-input" accept=".jpg,.jpeg,.jpe,.gif,.png,.bmp,.tiff,.tif,.ico,.heic,.asf,.asx,.wmv,.wmx,.wm,.avi,.divx,.mov,.qt,.mpeg,.mpg,.mpe,.mp4,.m4v,.ogv,.webm,.mkv,.3gp,.3gpp,.3g2,.3gp2,.txt,.asc,.c,.cc,.h,.srt,.csv,.tsv,.ics,.rtx,.css,.vtt,.mp3,.m4a,.m4b,.aac,.ra,.ram,.wav,.ogg,.oga,.flac,.mid,.midi,.wma,.wax,.mka,.rtf,.pdf,.class,.tar,.zip,.gz,.gzip,.rar,.7z,.psd,.xcf,.doc,.pot,.pps,.ppt,.wri,.xla,.xls,.xlt,.xlw,.mpp,.docx,.docm,.dotx,.dotm,.xlsx,.xlsm,.xlsb,.xltx,.xltm,.xlam,.pptx,.pptm,.ppsx,.ppsm,.potx,.potm,.ppam,.sldx,.sldm,.onetoc,.onetoc2,.onepkg,.oxps,.xps,.odt,.odp,.ods,.odg,.odc,.odb,.odf,.wp,.wpd,.key,.numbers,.pages" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">
|
8 | |
<input type="text" name="s" class="xs-serach-filed search-field" placeholder="Search.." value>
|
1 | |
<select name="wpforms[fields][4][date][y]" id="wpforms-field_4-year" class="wpforms-field-date-time-date-year wpforms-field-required" required>...</select>
|
1 | |
<select name="wpforms[fields][4][date][m]" id="wpforms-field_4-month" class="wpforms-field-date-time-date-month wpforms-field-required" required>...</select>
|
1 | |
<input type="text" id="ufaq-ajax-text-input" class="ufaq-text-input" name="Question " placeholder="Enter your question..." value>
|
1 | |
<input type="text" id="wpforms-8695-field_16-time" class="wpforms-field-date-time-time wpforms-timepicker wpforms-field-required wpforms-field-large ui-timepicker-input" data-rule-time12h="true" data-time-format="g:i A" data-step="30" name="wpforms[fields][16][time]" required autocomplete="off">
|
1 | |
<input placeholder="Enter Website" id="url" name="url" class="form-control" type="url" value size="30">
|
1 | |
<input type="submit" class="search-submit" value>
|
1 | |
<input type="text" id="wpforms-8695-field_17-time" class="wpforms-field-date-time-time wpforms-timepicker wpforms-field-required wpforms-field-large ui-timepicker-input" data-rule-time12h="true" data-time-format="g:i A" data-step="30" name="wpforms[fields][17][time]" required autocomplete="off">
|
1 |