Wrapping Form Labels
There are two forms on this page. In the first form, the LABEL tag is wrapped
around only the text to the left of the input boxes. When JAWS users enter
"Forms Mode," text to the right of the input boxes is ignored and the user
must toggle "Forms Mode" off, navigate back to the top of the form, read down
the page, return to the edit box, toggle "Forms Mode" back on and then continue
inputting the form.
Here is the HTML used to create this table:
<form name="simpleform1" id="simpleform1" method="post" action="">
<p>
<label for="user1">User name:</label>
<input type="text" name="user1" id="user1" />
(Email address: xxx@xxx.xxx)</p>
<p>
<label for="pw1">Password:</label>
<input type="text" name="pw1" id="pw1" />
(must include one number: 0-9) </p>
<p>
<input type="submit" name="Submit1" value="Login" id="Submit1" />
</p>
</form>
In the second form, below, the label tag is wrapped around all the text --
both to the left and right of the text. This insures that when JAWS users enter
"Forms Mode," they hear both the label and the instructions for what information
should be included in the edit box.
Here is the HTML used to create this table:
<form name="simpleform2" id="simpleform2" method="post" action="">
<p>
<label for="user2">User name:
<input type="text" name="user2" id="user2" />
(Email address: xxx@xxx.xxx)</label></p>
<p>
<label for="pw2">Password:
<input type="text" name="pw2" id="pw2" />
(must include one number: 0-9)</label> </p>
<p>
<input type="submit" name="Submit2" value="Login" id="Submit2" />
</p>
</form>
|