WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forms Question: Determining Proper Hierarchy of Information

for

From: John Foliot
Date: Apr 26, 2011 9:42AM

Without seeing wireframes, this sounds like a job for fieldset and legend (with some CSS). If you want to forward some wireframes Elle, I can do a double check, but fieldset does your grouping/associations.

John Foliot
Program Manager
Stanford Online Accessibility Program
http://soap.stanford.edu
Tel: 650-468-5785

Elle < <EMAIL REMOVED> > wrote:

>All:
>
>We are building a new enrollment form at my company for one of our websites,
>and it requires specific information to be gathered related to the health
>care plan. I have advised our development team about how to use headings,
>fieldsets, legends, and labels properly in a general context, but we've run
>into something of a judgment call that I'd like users on this list to weigh
>in on, if possible. If anyone would like a screenshot of the wireframe,
>email me and I'll be happy to send it to you. For the purposes of this
>digest and for those with visual impairments, I'll list the pieces of
>information and their relationship to one another. Hope it makes sense. If
>anyone can tell me what you would use to mark up this particular area of
>content, I'd be really grateful.
>
>At the top of the page is a title that reads "Enrollment: Medical and
>Personal Information" which makes sense to be the <H1> tag. Then, "* >required" which is pretty self-explanatory. Then, "Medical Information"
>which displays visually as a section title, generally agreed by the team to
>be an <H2> heading. Underneath "Medical Information" there are two
>sections "Beneficiary Information" and "Effective Dates" that contain
>several form elements in each one.
>
>Within the "Beneficiary Information" section, there are standard form labels
>with text input elements (ex. "First Name" "Middle Initial" "Last Name" and
>"Sex"). On the right side of the page, with equal weight as "Beneficiary
>Information" there is another section, with the words "Effective Dates" and
>two grouping of 3 date elements (month/day/year) underneath it. Each
>grouping displays a single explanatory phrase of text. So, under "Effective
>Dates" a user finds "Hospital Insurance" and "Medical Insurance" each with
>a month/day/year set of form elements.
>
>My question is this. Knowing that a user needs to understand each
>month/day/year grouping out of context, how do I mark up the following
>pieces of content: "Beneficiary Information" "Effective Dates" "Hospital
>Insurance" and "Medical Insurance" to retain the proper association?
> Initially, I recommended using a <H2> for "Medical Information", <H3> for
>"Beneficiary Information" and "Effective Dates", and <legend> for "Hospital
>Insurance" and "Medical Insurance." All of the <H*> elements are using
>aria-describedby, too, in order to reinforce the association. However,
>without ARIA, how will a user understand that "Hospital Insurance" and
>"Medical Insurance" refers to "Effective Dates" in the form?
>
>Sorry if this is cumbersome to explain.
>
>
>
>Thanks very much,
>Elle
>