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.
1% done
How close this website is to fixing this issue.
HTML | Found on page | Issues |
---|---|---|
<input type="text" class="search-input" name="query" placeholder="Search" autocomplete="off" aria-labelledby="search-floater">
|
101 | |
<input id="articles-subscribe-email" type="email" placeholder="Your email address">
|
64 | |
<input type="search" id="article-list-search-text" placeholder="Search articles">
|
63 | |
<button class="module-sidenav-toggle">...</button>
|
8 | |
<select id="articles-list-year-select" class="articles-filters">...</select>
|
4 | |
<select id="articles-list-month-select" class="articles-filters">...</select>
|
4 | |
<select id="articles-list-category-select" class="articles-filters" data-val="true" data-val-required="The ActiveCategoryId field is required." name="Categories.ActiveCategoryId">...</select>
|
4 | |
<input type="text" placeholder="Company" data-val="true" data-val-length="Your company cannot be longer than 50 characters" data-val-length-max="50" data-val-regex="PLEASE ENTER LETTERS, NUMBERS, SPACES AND DASHES ONLY - OTHER CHARACTERS NOT VALID" data-val-regex-pattern="^(?![\s\S]*(([h,H][t,T][t,T][p,P]([s,S]?)\:\/\/)|(\<[\!,\/,\?,a-z,A-Z]|\&\#))[\s\S]*)[\s\S]*$" data-val-required="PLEASE ENTER YOUR COMPANY" id="Company" name="Company" value>
|
2 | |
<input type="text" placeholder="Country" data-val="true" data-val-length="Your country cannot be longer than 50 characters" data-val-length-max="50" data-val-regex="PLEASE ENTER LETTERS, NUMBERS, SPACES AND DASHES ONLY - OTHER CHARACTERS NOT VALID" data-val-regex-pattern="^(?![\s\S]*(([h,H][t,T][t,T][p,P]([s,S]?)\:\/\/)|(\<[\!,\/,\?,a-z,A-Z]|\&\#))[\s\S]*)[\s\S]*$" data-val-required="PLEASE ENTER YOUR COUNTRY" id="Country" name="Country" value>
|
2 | |
<select data-val="true" data-val-length="Your title cannot be longer than 50 characters" data-val-length-max="50" data-val-regex="PLEASE ENTER LETTERS, NUMBERS, SPACES AND DASHES ONLY - OTHER CHARACTERS NOT VALID" data-val-regex-pattern="^(?![\s\S]*(([h,H][t,T][t,T][p,P]([s,S]?)\:\/\/)|(\<[\!,\/,\?,a-z,A-Z]|\&\#))[\s\S]*)[\s\S]*$" data-val-required="PLEASE ENTER YOUR TITLE" id="Title" name="Title">...</select>
|
2 |