WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forms Question: Determining Proper Hierarchy of Information

for

From: Sailesh Panchang
Date: Apr 26, 2011 10:15AM

Elle,
My approach would be as under:
Mark up "Effective date" as a heading ...h3 perhaps to convey proper hierarchy.
The month, day and year fields should be associated with visible
label text (if present) i.e. month, day, year. If not, use title
attribute to say just that.
Mark up Hospital Insurance as a LEGEND for the first group of date fields.
Wrap the legend, date fields (and their labels) within a FIELDSET.
Do the same for Medical Insurance.
Do not markup legend text (or any other text within a fieldset) as a
heading. Use CSS to style them if needed.
Effective Date does not have to be part of label / title or
aria-describedby. The reasoning is that a user typically runs through
large forms such as this one before beginning to fill it out. With
proper structure and headings markup and quick navigation features
offered by assistive technology as user is able to navigate and fill
out the form efficiently. In fact making labels and titles to long
and verbose can also be a pain for the user.
If there was field specific instructions in text next to the fields,
that would be better suited for aria-describedby.
Sailesh Panchang
Web Accessibility Specialist
Deque Systems

On 4/26/11, 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
>