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. use aria-hidden on the * so it doesn't speak, but is still present visually

Alternative view

The Form:

Fields marked (required) are required. (plain text example)


Fields marked * are required. (aria-required + HTML5 required example)



<label for="namereq2">Name (required):</label>
<input id="namereq2" name="namereq2" value="" type="text" />

>> 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: