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.
0% done
How close this website is to fixing this issue.
HTML | Found on page | Issues |
---|---|---|
<input placeholder="Search …" name="_sf_search[]" class="sf-input-text" type="text" value title>
|
155 | |
<input autocomplete="off" class="um-form-field valid " type="text" name="username-6" id="username-6" value placeholder="E-mail Address*" data-validate="unique_email" data-key="username">
|
1 | |
<span class="select2-selection__rendered" id="select2-input_15_3-container" role="textbox" aria-readonly="true" title="Why you're reaching out">Why you're reaching out</span>
|
1 | |
<input class="um-form-field valid " type="password" name="user_password-6" id="user_password-6" value placeholder="Password*" data-validate data-key="user_password">
|
1 | |
<input placeholder="dd/mm/yyyy" class="sf-datepicker sf-input-date sf-input-text hasDatepicker" name="_sfm__event_timestamp_start_date[]" type="text" value title id="dp1649879558675">
|
1 | |
<input maxlength="100" autocomplete="off" class="um-form-field valid " type="text" name="first_name-6" id="first_name-6" value placeholder="First Name*" data-validate data-key="first_name">
|
1 | |
<input class="um-form-field valid " type="password" name="user_password-7" id="user_password-7" value placeholder="Password*" data-validate data-key="user_password">
|
1 | |
<input maxlength="100" autocomplete="off" class="um-form-field valid " type="text" name="last_name-6" id="last_name-6" value placeholder="Last Name*" data-validate data-key="last_name">
|
1 | |
<input placeholder="dd/mm/yyyy" class="sf-datepicker sf-input-date sf-input-text hasDatepicker" name="_sfm__event_timestamp_start_date[]" type="text" value title id="dp1649879558676">
|
1 | |
<button class="play-btn">...</button>
|
1 |