WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Forms Question: Determining Proper Hierarchy of Information

for

Number of posts in this thread: 4 (In chronological order)

From: Elle
Date: Tue, Apr 26 2011 7:42AM
Subject: Forms Question: Determining Proper Hierarchy of Information
No previous message | Next message →

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

From: Jared Smith
Date: Tue, Apr 26 2011 8:39AM
Subject: Re: Forms Question: Determining Proper Hierarchy of Information
← Previous message | Next message →

If I understand correctly, you have a situation where each date field
is visually labeled by 3 things - "Month", "Effective Date", and
"Hospital Insurance", for example. Is this correct? If so, you could
use (as I think you are) <label> of "Month" and also use
aria-describedby that points to "Effective Date" and "Hospital
Insurance". This would associate all three texts with the control. The
reading order might be a bit confusing, however, as it will generally
read <label> first then aria-describedby items in the order listed.
This is technically accessible, but might be a bit confusing. And as
you note, this would not be very useful if ARIA is not supported.

One option is to not use label, fieldset, or aria-describedby at all,
but to use the title attribute to provide all necessary information.
Title will be read if no label or aria-labelledby/describedby values
are present. For example, the title attribute value might be
"Effective date month for Hospital Insurance". The only minor downside
to this approach is that without "Month" being a <label>, it would not
be clickable to set focus to the control.

Another option that would address this is to use <label> and visually
hide the portions that are already apparent visually:
<label for="hospitalmonth"><span class="hidden">Effective date
</span>Month <span class="hidden">for Hospital
Insurance</span></label> <input id="hospitalmonth" ....>

This would provide all of the information via a standard, clickable
label element.

All of this may also be made a bit easier by combining the three
month/day/year fields into one date field.

If I've entirely misunderstood this, please send a screenshot.

Jared

From: John Foliot
Date: Tue, Apr 26 2011 9:42AM
Subject: Re: Forms Question: Determining Proper Hierarchy of Information
← Previous message | Next message →

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 ADDRESS 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
>

From: Sailesh Panchang
Date: Tue, Apr 26 2011 10:15AM
Subject: Re: Forms Question: Determining Proper Hierarchy of Information
← Previous message | No next message

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 ADDRESS 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
>