E-mail List Archives
Re: <ul> for form layout?
From: Birkir R. Gunnarsson
Date: Aug 9, 2017 2:57PM
- Next message: Patrick H. Lauke: "Re:
- for form layout?"
- Previous message: Jim Allan: "Re: using .svg images accessibly"
- Next message in Thread: Patrick H. Lauke: "Re:
- for form layout?"
- Previous message in Thread: Poornima: "Re:
- for form layout?"
- View all messages in this Thread
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 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.
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ]
> Sent: Tuesday, August 08, 2017 11:24 PM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] <ul> for form layout?
>
>
> 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
> > > > >
--
Work hard. Have fun. Make history.
- Next message: Patrick H. Lauke: "Re:
- for form layout?"
- Previous message: Jim Allan: "Re: using .svg images accessibly"
- Next message in Thread: Patrick H. Lauke: "Re:
- for form layout?"
- Previous message in Thread: Poornima: "Re:
- for form layout?"
- View all messages in this Thread