Is using lists for forms bad?
Hi everyone,
A site that I built (as front end developer) has been assessed by an accessibility company (that I don't have contact with), and one of the comments was:
"Certain parts of the forms are placed into lists. This is semantically incorrect and makes navigating the forms confusing when using a screenreader. Use paragraphs (<p>) and divs (<div>) to lay out form elements instead."
The forms are marked up like this:
| Code: |
|
<ul> <li> <label for="id">text</label><input id="id" /> </li> <li> <label for="id2">text 2</label><input id="id2" /> </li> </ul> |
This would seem to be a very standard way to mark up forms - I certainly considered it to be semanticly correct, as have several standards aware front end developers I've spoken to.
Rather than just accept what has been said I'd like to understand the reasoning behind this comment - I don't particulary trust that the accessibility company are on top of their game (a natural bias given our relative positions...). How can mark up like this hinder accessibility?
I'd be grateful for any clarification.
Thanks
Ed.
Share: 
A form is not strictly a list of items but a group of objects so it is preferable not to use UL as it would make little sense.};-) http://www.xhtmlcoder.com/
WVYFC chose the Yorkshire Air Ambulance as the main charity to fund raise for in 2006
Share:
I can accept that; I'm would like to avoid comment on the aesthetics of the markup and instead concentrate on how this would cause problems for a real world screen reader user.
How would using a list in this way harm the experience of using the form for screen reader users?
Share:
I don't know the answer myself, but if they just ran an automated test then their comment makes sense.
Mind you I have used lists in forms for a large series of checkboxes.
my mind is on a permanent tangent
Share:
I doubt that it would present any problems for screen reader users.
The control fields are explicitly labeled, so the reader would have no difficulty in rendering the control type along with its associated label.
Have you asked the Accessibility Company why they feel it would give problems?
(Anyway, usually the user will be in 'forms mode' when entering data, so the only things that are going to be voiced are the form's field descriptions and associated label.)
.
Share:
I don't get how they think <p> would be correct if they think <li> is incorrect.
As for navigational confusion, I guess when in normal reading mode it might seem weird to be told you are about to hear a list and then hear a bunch of form controls. Maybe that's what they are talking about. But skimming the content by jumping between paragraphs would be equally confusing if it started moving through each field in a form?
<div> seems the best choice because you are simply grouping the label and the input? Form elements already have semantics and you are probably grouping them with a <fieldset> already. Plus, forms degrade more gracefully with <div>: bullet points next to form labels caused by <li> look weird while a blank line between each field caused by <p> will make them seem less associated with each other.
<div> FTW!
(EDIT) By the way, your blog makes a lot of sense:
| Ed Everett wrote: |
| If something we are doing causes an accessibility problem for someone, we should first look to see how we can create the site in a better way so that that issue just doesn’t arise in the first place. We should not try to bolt on a user specific work-around. |
Share:
Thanks for all the replies. This has confirmed what I was thinking.
I guess I ought to scrub up my understanding of how screen readers treat forms though.
@Cerbera: No one's actually meant to read my blog!
I'm sure having good HTML is 95% of the challenge, but I'm certainly lacking understanding of the reality of screen reader use.
Share:
Victor Tsaran: An Introduction to Screen Readers at Yahoo! Video is helpful for that. But as you know, tailoring your page specifically to one product just isn't cricket. Richly structuring your pages is a big help. But there's lots of non-technical things which are helpful to make the site nice to use and not just possible to use.
If you're now thinking "hmm, accessibility seems a bit like usability" then you've earned a cookie.
Share:
As Cerbera said DIV would be much better for styling if they are required at all (depending on the layout). There are allot of example forms using list and I do not think it is appropriate use. The word “bullet” is read out in JAWS and I do not find it useful... obviously it is not a problem.Johan De Silva / Portfolio
Share:
Some will argue that it's not really what a list should be for, but I don't see that it should cause any real accessibility problems. Tommy Olsson has interesting comments on lists vs sequences.Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
In the past I've deployed the seldom used definition list (dl) to structure my forms, with the dt containing the form label and the dd containing the form field. Semantically I think this is a better fit than an unordered list, but ultimately we all know both methods are wrong.
We're wrapping lists and definition lists around our form elements so we can hook CSS styles onto the form; we’re not improving the semantic meaning of the form. We wouldn’t use a list to markup multiple paragraphs, so why use a list to markup multiple form fields?
Fieldsets, labels, and the form fields themselves should be all that is needed, but if we need more containers to hook our CSS onto, we should use divs and spans - after all, that's what they were designed for.
Share:
Hi all -- my first post!
I was very interested to see this thread, as I've recently begun using lists to contain forms.
Question: Has anyone been able to empirically confirm via testing that lists do or do not confuse screen readers? If I read correctly, folks are assuming so (and it's a logical deduction), but there's not been actual confirmation. I also gather that the accessibility auditor never gave Ed a clear rationale for their finding, yes?
@Cerbera & @Johan007: I agree that an unordered list could be confusing, and in any case is not semantically correct.
But this is why I use ordered lists (OL), on the semantic basis that one is progressing through X number of (generally) progressive steps needed to complete the form. This is consistent, for example, with the Tommy Olsson discussion of lists dotjay referred us to earlier.
To quote the HTML 4 spec, "An ordered list, created using the OL element, should contain information where order should be emphasized..."
Personally, I don't feel a collection of form elements constitutes a definition list (i.e. a list of definitions), but I can see the argument in favor.
Purely from a build & design perspective, a list item is very nearly the same as a DIV in that it provides a containing block, can be styles in nearly any desirably fashion, etc. Therefore it has no negative impact on my purely visual presentation...or at least it hasn't yet!
And of course it goes without saying that one should still properly use fieldsets, labels, etc.
Share:
If you view a form wrapped in list elements when CSS is disabled, you'll see it has been indented and/or markers have been added. This looks wrong. As does having 1em gaps between controls in forms wrapped in <p> elements.
These elements add unnecessary style which confuses the purpose of the form. In the same way, I'd suggest they add unnecessary meaning which confuses the purpose of the form in non-visual media. You can hide the style but that still leaves a surplus of meaning.
You're right about this being only a deduction on my part, though. Good first message!
Share:
I haven't actually tested this myself, but from what I know, I can't think of any direct issues that a screen reader would have with a list marking up a form. It's more an argument of whether it's correct semantically.
Personally, I use labels and inputs wrapped in a div or a p, depending on the type of input. Sometimes, where I think it's appropriate - or where I can get it to work! - I'll use a fieldset instead of a div/p.
If a screen reader user encounters a form, they'll more than likely go into forms mode to interact with it, which will focus the cursor on form elements only - a list or not, it'd be irrelevant.
Bear in mind that accessibility isn't just about screen reader users though. A bit of a long-shot, but something that could be problematical is related to what Cerbera just mentioned: If a user has a custom stylesheet for some reason or another, a form marked up as a list could cause unexpected behaviour.
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
I tend to use ordered lists for form markup after a long spell of using paragraphs. My reason for this is simple: almost every physical form I have filled out in my entire life takes the form of an ordered list. For example, think of the forms involved in:
- renewing your passport;
- seeking health care;
- getting a driver's license;
- paying taxes
- applying for a university/college course;
- requesting a loan;
- entering a competition;
- filling out an exam;
- obtaining a prescription;
- even just completing a survey.
All of these forms and more are presented as numbered lists (sometimes even the options are numbered), and with good reason:
- It's easier to ask for help filling it out by phone or email: "I have a problem with question six."
- Directing people within the form becomes easier, e.g. "if 'yes', skip to question 10."
- Generally, and strongly related to the previous point, form fields are implicitly intended to be read and filled out in the order presented.
These three points are relevant to form usability in a general context. In particular, the third point is mostly relevant to those who contend that ordered lists are not semantically valid. I would invite you to compare and contrast, but it will suffice to observe that one would generally expect to follow someone's title with their name, give a street address before the town, the town before the county, and the postcode to follow all of the above items. Alternatively, on some forms, Ajax can be used to automatically generate one's full address details from just the house number and postcode; in this case, it would be rather silly if the postcode field followed the rest of one's address details!
If, as Nick Rigby suggests, using a list means that screenreaders enumerate the number of form items beforehand, I would say this is a happy bonus to the approach.
Finally, while the aforementioned Tommy Olsson article was an excellent treatment of the topic, I disagree that forms are generally an improper use of ordered lists on two counts: first, because all the forms I have marked up this way look entirely sensible with styles turned off (which is the criteria he uses to justify using unordered lists for navigation); and second, because the use of ordered lists for forms, especially for printed forms, appears to be a de facto standard which is easily justified.
Share: