WebAIM - Web Accessibility In Mind

E-mail List Archives

Forms Question: Determining Proper Hierarchy of Information


From: Elle
Date: Apr 26, 2011 7:42AM


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,