WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: <ul> for form layout?

for

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