E-mail List Archives
Thread: A List of Form Elements?
Number of posts in this thread: 12 (In chronological order)
From: Jesse Hausler
Date: Mon, Mar 12 2012 4:54PM
Subject: A List of Form Elements?
No previous message | Next message →
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
From: Jared Smith
Date: Mon, Mar 12 2012 5:18PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
I'm not a fan of lists to differentiate form items. You adequately
note the disadvantages, which I think outweigh any perceived benefits.
In most cases, the form is navigated from form control to form control
anyway (i.e., hitting the Tab key), so the only real advantage (that
the number of items is identified) often doesn't occur anyway.
The <div> markup could probably be simplified even more with
<form class="aform">
<div>...<label>...<input>...</div>
</form>
and
.aform div { }
to define the necessary styling.
Jared Smith
WebAIM.org
From: Ryan E. Benson
Date: Mon, Mar 12 2012 5:24PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
Jesse,
I am more in the in the use divs and <fieldset>s to lay out the form.
In JAWS, at least, you can press insert+f5 to get a list of controls
per page. Using that + labels + effectively using fieldsets (as you
noted) will let a user know where they are.
--
Ryan E. Benson
On Mon, Mar 12, 2012 at 6:56 PM, Jesse Hausler < = EMAIL ADDRESS REMOVED = > wrote:
> 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
>
>
From: Jennifer Sutton
Date: Mon, Mar 12 2012 6:42PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
I'm not a fan of list-items in forms, either. I've rarely seen it
done and have often argued against it. When I'm in a form, I find
the indication of list-items distracting and disorienting from the
task at hand. Honestly, it just feels semantically wrong to me.
Jennifer
At 04:18 PM 3/12/2012, you wrote:
>I'm not a fan of lists to differentiate form items. You adequately
>note the disadvantages, which I think outweigh any perceived benefits.
>In most cases, the form is navigated from form control to form control
>anyway (i.e., hitting the Tab key), so the only real advantage (that
>the number of items is identified) often doesn't occur anyway.
>
>The <div> markup could probably be simplified even more with
><form class="aform">
><div>...<label>...<input>...</div>
></form>
>and
>.aform div { }
>to define the necessary styling.
>
>Jared Smith
>WebAIM.org
>
From: Steve Green
Date: Tue, Mar 13 2012 11:30AM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
I am also totally opposed to the use of lists for forms. It's semantically
incorrect and it's an appalling user experience for screen reader users -
the additional verbiage decreases comprehensibility rather than increasing
it.
Steve Green
Managing Director
Test Partners Ltd
From: Jesse Hausler
Date: Tue, Mar 13 2012 4:06PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
Thanks for the advice everyone!
Jesse
From: Lewis, Sunshine T.
Date: Wed, Mar 14 2012 11:36AM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
Does the dislike of lists for forms also apply to lists for checkboxes
and radio buttons?
<fieldset><legend>
<ul>
<li><input ></li>
<li><input ></li>
</ul>
</fieldset>
Markup seems semantically appropriate to me but I'm curious if that
would introduce the same issues?
Florida is headed in the right direction! View Florida's Jobs Growth Chart: http://www.flgov.com/photoview/jobcreationchart.jpg
The Department of State is leading the commemoration of Florida's 500th anniversary in 2013. For more information, please go to www.fla500.com.
The Department of State is committed to excellence. Please take our Customer Satisfaction Survey: http://survey.dos.state.fl.us/index.aspx?email= = EMAIL ADDRESS REMOVED =
From: Steve Green
Date: Wed, Mar 14 2012 1:18PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
Yes it does - even more so. Radio buttons are already semantically grouped
by means of their attributes, so adding list markup is even less appropriate
(if less than zero is possible) than it is for textboxes. <form> and
<fieldset> elements are all that is needed.
Steve
From: Ryan E. Benson
Date: Wed, Mar 14 2012 3:51PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
I'll also add that if radio/checkboxes are correctly grouped together
via the name attribute, a screen reader will say how many are in the
group.
--
Ryan E. Benson
On Wed, Mar 14, 2012 at 3:21 PM, Steve Green < = EMAIL ADDRESS REMOVED = > wrote:
> Yes it does - even more so. Radio buttons are already semantically grouped
> by means of their attributes, so adding list markup is even less appropriate
> (if less than zero is possible) than it is for textboxes. <form> and
> <fieldset> elements are all that is needed.
>
> Steve
>
>
From: Lewis, Sunshine T.
Date: Thu, Mar 15 2012 3:06PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
Thank you for the feedback.
Radio buttons are grouped semantically but it's not a relationship that translates to visual structure (I can't target the input and matching label in my stylesheet).
So what is the appropriate markup for grouping a radio button and label to apply visual structure (with or without developer styles)? Paragraphs? Divs? Neither of those seem correct if you think solely in terms of describing the structure of the content. Same for span and div since those offer no additional information. Maybe instead of grouping the two pieces they should just get a <br>.
It also sounds like some of this comes down to personal preference for screen reader users. (correct me if I'm wrong) Would lists be ok semantically if not for the overhead?
Thanks for indulging me. It's difficult to have these conversations with your family :D.
From: Steve Green
Date: Thu, Mar 15 2012 8:03PM
Subject: Re: A List of Form Elements?
← Previous message | Next message →
A <fieldset> element is the correct one for grouping radio buttons or
checkboxes. If that doesn't allow you to target the elements specifically
enough, use 'class' and 'id' attributes. It is not good practice to put in
redundant elements just to hang visual styles on, but if you must then it's
best to use semantically neutral ones like <div>.
To my mind lists are definitely wrong in your case, and it's got nothing to
do with screen readers or any other assistive technology. Someone else
(Patrick Lauke?) once suggested that if you believe that a form is a list of
form controls, then presumably you believe that a page is a list of
paragraphs and maybe even that a paragraph is a list of words (ordered lists
of course, because the sequence is important).
Steve.
From: Ryan E. Benson
Date: Thu, Mar 15 2012 8:24PM
Subject: Re: A List of Form Elements?
← Previous message | No next message
Sunshine,
I am not 100% what you mean by:
> Radio buttons are grouped semantically but it's not a
> relationship that translates to visual structure (I can't target the input
> and matching label in my stylesheet).
I am guessing you want something like:
http://css-tricks.com/improved-current-field-highlighting-in-forms/
--
Ryan E. Benson
On Thu, Mar 15, 2012 at 5:07 PM, Lewis, Sunshine T.
< = EMAIL ADDRESS REMOVED = > wrote:
> Thank you for the feedback.
>
> Radio buttons are grouped semantically but it's not a relationship that translates to visual structure (I can't target the input and matching label in my stylesheet).
>
> So what is the appropriate markup for grouping a radio button and label to apply visual structure (with or without developer styles)? Paragraphs? Divs? Neither of those seem correct if you think solely in terms of describing the structure of the content. Same for span and div since those offer no additional information. Maybe instead of grouping the two pieces they should just get a <br>.
>
> It also sounds like some of this comes down to personal preference for screen reader users. (correct me if I'm wrong) Would lists be ok semantically if not for the overhead?
>
> Thanks for indulging me. It's difficult to have these conversations with your family :D.
>
>