WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Forms Question: Determining Proper Hierarchy of Information


From: Jared Smith
Date: Apr 26, 2011 8:39AM

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.