WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: A List of Form Elements?

for

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer Sutton
Sent: 13 March 2012 00:43
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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: 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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Steve Green
Sent: Tuesday, March 13, 2012 10:33 AM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] A List of Form Elements?

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer Sutton
Sent: 13 March 2012 00:43
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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: 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 =
-----Original Message-----
From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 13, 2012 1:33 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] A List of Form Elements?

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer
Sutton
Sent: 13 March 2012 00:43
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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: 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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis, Sunshine
T.
Sent: 14 March 2012 17:37
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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 = ida.
com
-----Original Message-----
From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Tuesday, March 13, 2012 1:33 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] A List of Form Elements?

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer Sutton
Sent: 13 March 2012 00:43
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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: 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis, Sunshine
> T.
> Sent: 14 March 2012 17:37
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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 = ida.
> com
> -----Original Message-----
> From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, March 13, 2012 1:33 PM
> To: 'WebAIM Discussion List'
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer Sutton
> Sent: 13 March 2012 00:43
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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: 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.

-----Original Message-----
From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 14, 2012 5:53 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis,
> Sunshine T.
> Sent: 14 March 2012 17:37
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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 = ida.
> com
> -----Original Message-----
> From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, March 13, 2012 1:33 PM
> To: 'WebAIM Discussion List'
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer
> Sutton
> Sent: 13 March 2012 00:43
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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: 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.

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis, Sunshine
T.
Sent: 15 March 2012 21:07
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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.

-----Original Message-----
From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, March 14, 2012 5:53 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] A List of Form Elements?

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis,
> Sunshine T.
> Sent: 14 March 2012 17:37
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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 = ida.
> com
> -----Original Message-----
> From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Tuesday, March 13, 2012 1:33 PM
> To: 'WebAIM Discussion List'
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer
> Sutton
> Sent: 13 March 2012 00:43
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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: 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.
>
> -----Original Message-----
> From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Wednesday, March 14, 2012 5:53 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] A List of Form Elements?
>
> 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
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lewis,
>> Sunshine T.
>> Sent: 14 March 2012 17:37
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] A List of Form Elements?
>>
>> 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 = ida.
>> com
>> -----Original Message-----
>> From: Steve Green [mailto: = EMAIL ADDRESS REMOVED = ]
>> Sent: Tuesday, March 13, 2012 1:33 PM
>> To: 'WebAIM Discussion List'
>> Subject: Re: [WebAIM] A List of Form Elements?
>>
>> 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
>>
>> -----Original Message-----
>> From: = EMAIL ADDRESS REMOVED =
>> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jennifer
>> Sutton
>> Sent: 13 March 2012 00:43
>> To: WebAIM Discussion List
>> Subject: Re: [WebAIM] A List of Form Elements?
>>
>> 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
>>>