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, and 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 * depending on the user setting.
- Inform the user first: ALWAYS put messages before the
form controls
- use word (required) in the <label> or
- use an "asterisk" image (or image of your choice) with alt="required",
image with alt MUST be in the <label>
The Form:
The HTML:
<form>
<p>Fields marked
<img src="asterisk.gif" width="13" height="12" alt="Required!" /> are required.</p>
<label for="namereq">Name
<img src="asterisk.gif" width="13" height="12" alt="Required!" /> </label>:
<input id="namereq" name="namereq" value="" type="text" />
...
<label for="namereq2">Name
(required):</label>
<input id="namereq2" name="namereq2" value="" type="text" />
</form>