Use of UL or OL in HTML Forms

I just finished re-reading Roger Johansson’s wonderful article entitled “Use the label element to make your HTML forms accessible“.

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.

I found this great piece of information about using UL or OL in forms from Justin Stockton 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, Aaron Gustafson, or boths podcasts about accessibile forms and they mentioned the same thing.

Here is a short  code example for filling out personal information on a form:

<fieldset>
<legend>Personal Information</legend>
<ul>
<li>
<label for=”first_name”>First Name</label>
<input type=”text” name=”first_name” id=”first_name” />
</li>
<li>
<label for=”last_name”>Last Name</label>
<input type=”text” name=”last_name” id=”last_name” />
</li>
<li>
<label for=”company”>Company</label>
<input type=”text” name=”company” id=”company” />
</li>
<li>
<label for=”title”>Title</label>
<input type=”text” name=”title” id=”title” />
</li>
</ul>
</fieldset>

Now here is what the code looks like as a form:

Personal Information




Of course you will need to use a bit of CSS to make this look better. You can remove such things as the fieldset border and do a bunch of other things to it. Here is the same example with CSS added, nothing fancy. When you use UL or OL in the fieldset you will be improving the accessibility of the form in my opinion.Please give me your thoughts on this matter of using UL or OL inside a fieldset.

4 thoughts on “Use of UL or OL in HTML Forms

  1. Pingback: John F Croston III » Blog Archive » Further Explanation of My Accessibility Presentation

Comments are closed.