Accessible Forms
🏠 | « | »
Required fields
On the web, it is common to indicate required form fields by color or bold
text. However, neither of these is enough by itself. Not all
screen readers distinguish bold text. Color alone is no help to a screen
reader user or to a color-blind user. The most common solution is to include
an asterisk as part of the label. But, some screen readers may not speak
the * (star) depending on the user setting.
- Inform the user first:
- ALWAYS put "which fields are required" messages at the beginning of the form
- Visual indicator of required is REQUIRED — so sighted folks know the form control is required.
- use word "required" in the <label> (works everywhere), or
- use an "asterisk", and
- make sure "required" (word or symbol) is close to label (proximity)
https://knowbility.org/blog/2019/animating-form-labels/ use aria-hidden on the * so it doesn't speak, but is still present visually
- Use "required" attribute on the form control
- invokes browser validation,
- alerts the user, and
- will not allow form submission until required fields are valid.
- Radio buttons - place "required" attribute on any one of a named group of radio buttons;
- forces the user to select one of the radio buttons.
- Checkbox - do NOT use "required" attribute on a group of checkboxes. Must use scripting.
- for older browsers and screen readers use ARIA "aria-required" attribute and HTML5 "required" attribute together
- aria-required ONLY causes the screen reader to say "required". There is no validation, or making the user fill in that form control.
- Resources below.
Alternative view
The Form:
The HTML:
<form>
<label for="namereq2">Name (required):</label>
<input id="namereq2" name="namereq2" value="" type="text" />
</form>
...
>> Do this for all required controls
<label for="namereq3">Name *:</label>
<input id="namereq3" name="namereq3" value="" type="text" aria-required="true" required/>
Example of Proximity problem ("Required on right edge of input)
More info:
