E-mail List Archives
Thread: <ul> for form layout?
Number of posts in this thread: 9 (In chronological order)
From: escetic
Date: Tue, Aug 08 2017 9:23PM
Subject: <ul> for form layout?
No previous message | Next message →
Hi All,
It's obviously not semantic or the intended use of <ul> to use it for form layout, for example having each label and input on a form as a separate <li>. There does seem to be some precedent for it, it was a technique back in the days of using tables for layout, but it's fallen out of favour for the same reasons we moved away from tables for layouts.
It does have the benefit of letting a screen reader user know how many inputs there are on a form, assuming a reader announces number of list items. But would most screen reader users find this to be an unexpected or confusing use of lists?
There is also the argument that it's presenting different user experiences for visual and non-visual users.
Can anyone offer more pros or cons, are there considerations that swing this firmly in the direction of for or against?
Thank you!
Rob
From: Poornima
Date: Wed, Aug 09 2017 12:21PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
Though it has one benefit of knowing the number of form fields, I would suggest NOT to use the <ul> for form fields. The cons are -
- The screen reader keyboard shortcuts are different to interpret the "list items" and "form fields"
- While in virtual cursor mode (using DOWN arrow key), it first announce the "list" in the beginning of form (e.g.) "list of 7 items". This can be confusing to understand the presence of form elements vs the list items which are considered to be different components by its interpretation
- Again, nesting of <ul> may be required for the consecutive fields (e.g. Date of Birth)?
Thanks,
Poornima.
From: Birkir R. Gunnarsson
Date: Wed, Aug 09 2017 2:57PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
You can't rely on the list as a way to pair a form field and a label.
<ul>
,li><span>label for form field</span><input type="text"></li>
..
</ul.
If you properly associate the label with the input field you can still
use the list markup, if it has some UI rasons or benefits, but I woud
advice you hide the markup from assistive technologies by putting
role="presentation" on the <ul> element. You can leave it in place,
but it adds screen reader speak on the webpage which really does not
benefit the user any.
On 8/9/17, Poornima via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
> Though it has one benefit of knowing the number of form fields, I would
> suggest NOT to use the <ul> for form fields. The cons are -
>
> - The screen reader keyboard shortcuts are different to interpret the "list
> items" and "form fields"
> - While in virtual cursor mode (using DOWN arrow key), it first announce the
> "list" in the beginning of form (e.g.) "list of 7 items". This can be
> confusing to understand the presence of form elements vs the list items
> which are considered to be different components by its interpretation
> - Again, nesting of <ul> may be required for the consecutive fields (e.g.
> Date of Birth)?
>
> Thanks,
> Poornima.
>
>
From: Patrick H. Lauke
Date: Wed, Aug 09 2017 3:27PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
On 09/08/2017 21:57, Birkir R. Gunnarsson wrote:
> You can't rely on the list as a way to pair a form field and a label.
> <ul>
> ,li><span>label for form field</span><input type="text"></li>
> ..
> </ul.
>
> If you properly associate the label with the input field you can still
> use the list markup, if it has some UI rasons or benefits, but I woud
> advice you hide the markup from assistive technologies by putting
> role="presentation" on the <ul> element. You can leave it in place,
> but it adds screen reader speak on the webpage which really does not
> benefit the user any.
...at which point you might as well not use a list and instead a set of
neutral <div> elements or similar...
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Birkir R. Gunnarsson
Date: Wed, Aug 09 2017 3:32PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
That too!
On 8/9/17, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 09/08/2017 21:57, Birkir R. Gunnarsson wrote:
>> You can't rely on the list as a way to pair a form field and a label.
>> <ul>
>> ,li><span>label for form field</span><input type="text"></li>
>> ..
>> </ul.
>>
>> If you properly associate the label with the input field you can still
>> use the list markup, if it has some UI rasons or benefits, but I woud
>> advice you hide the markup from assistive technologies by putting
>> role="presentation" on the <ul> element. You can leave it in place,
>> but it adds screen reader speak on the webpage which really does not
>> benefit the user any.
>
> ...at which point you might as well not use a list and instead a set of
> neutral <div> elements or similar...
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >
--
Work hard. Have fun. Make history.
From: escetic
Date: Thu, Aug 10 2017 8:10AM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
Thank you for the feedback, these are definitely valid concerns. Seems the consensus is decidedly against. Much appreciated!
> On Aug 9, 2017, at 5:32 PM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> That too!
>
>> On 8/9/17, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>>> On 09/08/2017 21:57, Birkir R. Gunnarsson wrote:
>>> You can't rely on the list as a way to pair a form field and a label.
>>> <ul>
>>> ,li><span>label for form field</span><input type="text"></li>
>>> ..
>>> </ul.
>>>
>>> If you properly associate the label with the input field you can still
>>> use the list markup, if it has some UI rasons or benefits, but I woud
>>> advice you hide the markup from assistive technologies by putting
>>> role="presentation" on the <ul> element. You can leave it in place,
>>> but it adds screen reader speak on the webpage which really does not
>>> benefit the user any.
>>
>> ...at which point you might as well not use a list and instead a set of
>> neutral <div> elements or similar...
>>
>> P
>> --
>> Patrick H. Lauke
>>
>> www.splintered.co.uk | https://github.com/patrickhlauke
>> http://flickr.com/photos/redux/ | http://redux.deviantart.com
>> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >
From: Graham Armfield
Date: Thu, Aug 10 2017 12:01PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
For me, I think it's a valid use of an unordered list, and pretty much
every form I've created uses <ul> and places the label + input pairs inside
an <li> tag. It is, after all, a collection of related items - in this
case, form fields.
If the screen reader announces that it's a list and tells the user how many
elements are in the list - ie how many form fields, that seems to me to be
useful information. If my form consists of 5 elements the user may have a
different expectation as to how long the form is going to take compared to
if there were 15 or more elements.
When using this construct I always ensure that any hidden fields are kept
outside the <ul>.
Regards
Graham Armfield
From: Birkir R. Gunnarsson
Date: Thu, Aug 10 2017 12:05PM
Subject: Re: <ul> for form layout?
← Previous message | Next message →
Yeah, I totally see what you're sayng there.
It is definitely not a user blocker or an outright violation. It's
just a judgment call of verbiage vs. important info.
I wouldn't fault it , but would bring it up as a decision to be made.
The important thing is not to get fooled into thinking that putting
the label and input in the same list item is enough to associate the
label with the form field.
I've seen people think that in the past, so I am always careful to point it out.
On 8/10/17, Graham Armfield < = EMAIL ADDRESS REMOVED = > wrote:
> For me, I think it's a valid use of an unordered list, and pretty much
> every form I've created uses <ul> and places the label + input pairs inside
> an <li> tag. It is, after all, a collection of related items - in this
> case, form fields.
>
> If the screen reader announces that it's a list and tells the user how many
> elements are in the list - ie how many form fields, that seems to me to be
> useful information. If my form consists of 5 elements the user may have a
> different expectation as to how long the form is going to take compared to
> if there were 15 or more elements.
>
> When using this construct I always ensure that any hidden fields are kept
> outside the <ul>.
>
> Regards
> Graham Armfield
> > > > >
--
Work hard. Have fun. Make history.
From: Jonathan Avila
Date: Thu, Aug 10 2017 12:16PM
Subject: Re: <ul> for form layout?
← Previous message | No next message
I'm with you Birkir, I don't want to hear a bunch of list and list items unless they add some value. Agree it's not a failure if other content is marked up correctly -- but I feel like a lot of people add list markup specifically to benefit screen reader users when in fact many of them may find the extra verbosity not helpful. So the value versus verbosity overload must carefully be considered with any markup that is not needed for conformance.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.