E-mail List Archives
Thread: Ordered Lists and Forms
Number of posts in this thread: 9 (In chronological order)
From: Seth Kane
Date: Mon, Jun 29 2009 9:05AM
Subject: Ordered Lists and Forms
No previous message | Next message →
I just came across some HTML this morning that had FORM FIELDS inside of an Ordered List.
i.e.
<form action="" method="post">
<ol>
<li class="first">
<label for="firstName">First Name</label>
<input id="firstName" type="text" class="text first required" />
</li>
I have never seen this done and I wanted to see if anyone understood the methodology or if it served a true purpose towards Accessibility?
From: Steve Green
Date: Mon, Jun 29 2009 9:20AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
I have seen this many times including a site we tested this weekend. In my
opinion it is totally unnecessary and just adds visual and audio clutter.
There may occasionally be an appropriate use for this markup but 99% of the
time it's wrong.
Steve
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Seth Kane
Sent: 29 June 2009 16:03
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Ordered Lists and Forms
I just came across some HTML this morning that had FORM FIELDS inside of an
Ordered List.
i.e.
<form action="" method="post">
<ol>
<li class="first">
<label for="firstName">First Name</label> <input id="firstName" type="text"
class="text first required" />
</li>
I have never seen this done and I wanted to see if anyone understood the
methodology or if it served a true purpose towards Accessibility?
From: Justin Svetlik
Date: Mon, Jun 29 2009 9:25AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
I have used this method myself, it makes creating forms without the use
of tables much easier.
A List Apart has an article
<http://www.alistapart.com/articles/prettyaccessibleforms/>; on this method.
Steve, I can see how this would cause audio clutter but not visual as
you would set list-style:none;, what method do you use for marking up forms?
Justin
From: Dan Conley
Date: Mon, Jun 29 2009 9:30AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
I only skimmed the article, but wouldn't it be easier to use a div as a
container than an ol/li? I use the styling given in Charles Wyke-Smith's
Stylin' with CSS pretty much verbatim, and I think it accomplishes the
same result with more appropriate markup (similar to using a dl for
indentations)
Dan Conley
Justin Svetlik wrote:
> I have used this method myself, it makes creating forms without the use
> of tables much easier.
> A List Apart has an article
> <http://www.alistapart.com/articles/prettyaccessibleforms/>; on this method.
>
> Steve, I can see how this would cause audio clutter but not visual as
> you would set list-style:none;, what method do you use for marking up forms?
>
> Justin
>
From: Steve Green
Date: Mon, Jun 29 2009 10:00AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Justin Svetlik
Sent: 29 June 2009 16:21
To: WebAIM Discussion List
Subject: Re: [WebAIM] Ordered Lists and Forms
I have used this method myself, it makes creating forms without the use of
tables much easier.
A List Apart has an article
<http://www.alistapart.com/articles/prettyaccessibleforms/>; on this method.
Steve, I can see how this would cause audio clutter but not visual as you
would set list-style:none;, what method do you use for marking up forms?
Justin
I mean it creates visual clutter in the source code.
I generally don't use any structural elements at all such as divs, tables
etc. Just put the form controls and labels into the <form> element and
position everything with CSS.
Steve
From: Caleb Tang
Date: Mon, Jun 29 2009 10:30AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
I agree to have it done using div or br rather than ol/li. Apart form audio
clutter, it is also semantically confusing.
Caleb Tang
Accessibility & Usability Consultant
On 29/06/2009 16:29, "Dan Conley" < = EMAIL ADDRESS REMOVED = > wrote:
> I only skimmed the article, but wouldn't it be easier to use a div as a
> container than an ol/li? I use the styling given in Charles Wyke-Smith's
> Stylin' with CSS pretty much verbatim, and I think it accomplishes the
> same result with more appropriate markup (similar to using a dl for
> indentations)
>
> Dan Conley
>
> Justin Svetlik wrote:
>> I have used this method myself, it makes creating forms without the use
>> of tables much easier.
>> A List Apart has an article
>> <http://www.alistapart.com/articles/prettyaccessibleforms/>; on this method.
>>
>> Steve, I can see how this would cause audio clutter but not visual as
>> you would set list-style:none;, what method do you use for marking up forms?
>>
>> Justin
>>
From: Justin Svetlik
Date: Mon, Jun 29 2009 10:45AM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
When I first encountered this method I did not notice the arguments
against using it.
Though I still do not believe that it is 100% wrong to use, I can see
its potential for abuse (http://green-beast.com/blog/?p=259), and its
semantic/clutter issues.
I wonder, is it confusing to an AT user? (i.e. navigating the page in
forms mode or by lists)
Justin
From: Dean Hamack
Date: Mon, Jun 29 2009 12:25PM
Subject: Re: Ordered Lists and Forms
← Previous message | Next message →
I've been using the list method for a while now.
To me, it makes it easier to style, and it's semantically correct. After
all, a form is a list of items you need to fill out in no particular order.
Ergo, it is an unordered list.
From: Steve Green
Date: Mon, Jun 29 2009 1:30PM
Subject: Re: Ordered Lists and Forms
← Previous message | No next message
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Dean Hamack
Sent: 29 June 2009 19:22
To: WebAIM Discussion List
Subject: Re: [WebAIM] Ordered Lists and Forms
I've been using the list method for a while now.
To me, it makes it easier to style, and it's semantically correct. After
all, a form is a list of items you need to fill out in no particular order.
Ergo, it is an unordered list.
-----
Of course it's not a list, any more than a book is a list of paragraphs. The
<form> element groups the form controls together and fieldsets can be used
if subgroups are semantically appropriate.
Adding unnecessary semantic structure does not benefit anyone and does not
make the page more semantically correct. There is no upside and plenty of
downside.
Steve