I just finished re-reading Roger Johansson’s wonderful article entitled “Use the label element to make your HTML forms accessible<\/a>“.<\/p>\n I agree with everything he said, except I think by putting the label and the input elements as part of an un-ordered list (UL) or an ordered list (OL) the screen reader will announce how many items are in the list. By doing so you can then place an UL or OL inside a FIELDSET, which will inform you of how many fields you need to be filled in. This number might be greater than the actual number of items if you have lines of text in the middle of the form field list.<\/p>\n I found this great piece of information about using UL or OL in forms from Justin Stockton<\/a> when he was looking over a form I was building. He either asked “Why I was using the <BR> tag?” or “Why I had form elements inside of a <P> tag”. I told him that was how I learned to create my forms from articles I had read. He suggested using the UL or the OL for form items. After that, by like only a day or so I was listening to either one of Derek Featherstone<\/a>, Aaron Gustafson<\/a>, or boths podcasts about accessibile forms and they mentioned the same thing.<\/p>\n Here is a short\u00a0 code example for filling out personal information on a form:<\/p>\n <fieldset> Now here is what the code looks like as a form:<\/p>\n
\n<legend>Personal Information<\/legend>
\n<ul>
\n<li>
\n<label for=”first_name”>First Name<\/label>
\n<input type=”text” name=”first_name” id=”first_name” \/>
\n<\/li>
\n<li>
\n<label for=”last_name”>Last Name<\/label>
\n<input type=”text” name=”last_name” id=”last_name” \/>
\n<\/li>
\n<li>
\n<label for=”company”>Company<\/label>
\n<input type=”text” name=”company” id=”company” \/>
\n<\/li>
\n<li>
\n<label for=”title”>Title<\/label>
\n<input type=”text” name=”title” id=”title” \/>
\n<\/li>
\n<\/ul>
\n<\/fieldset><\/p>\n