WebAIM - Web Accessibility In Mind

E-mail List Archives

A List of Form Elements?

for

From: Jesse Hausler
Date: Mar 12, 2012 4:54PM

There's a conversation going on here about using a <ul> to separate items in a form:

<form class="aform">
<ul class=" listMedium">
<li>
<label for="xyz">My Label1</label>
<input class="ainput" name="xyzname" id="xyz" />
</li>
<li>
<label for="xyz2">My Label2</label>
<input class="ainput" name="xyzname2" id="xyz2" />
</li>
...
</ul>
</form>

The accessibility folk are looking at this as being similar to "tables for layout", and are suggesting using a div around each label and it's input to provide layout and spacing.

<div class="form-row">...<label>...<input>...</div>
<div class="form-row">...<label>...<input>...</div>

The arguments for using the list include:

- A list is a list, of anything: data, images, posts, inputs, etc..

- Lists can add value because AT can be used to announce how many items are in a form.

The arguments against are pretty much:

- This semantic doesn't belong here because it's not a list of inputs, it's a form, and superflous semantics are a bad thing.

- Use of list gives AT extra information that is not relevant.

- A <dl> would be more appropriate because it would draw a further connection between input and label.. but <dl> is probably overkill/redundant in this use case.



Assuming fieldsets and legends are being used appropriately, what do you all think?

Thanks!

---
Jesse Hausler
Sr. Accessibility Specialist | salesforce.com<http://www.salesforce.com/>;
Tel (415) 536-8902 | Fax (415) 944-1762