Difference in behavior between HTML label and aria-labelledby

Working on an audit recently I observed a client who had reused ID
attributes for form controls in a tabpanel interface. They do this because
some form fields are shared across panels. The duplicate fields are hidden
with a CSS declaration of display:none.  I came across this on the heels of
a discussion with my good friend and co-worker, Steve Faulkner about this
same topic and I wanted to bring it up here.

I've created a test file and uploaded it at:

The first field is a normally labelled field, using label[for] pointing to
the field's ID

The second example is a single label with 'for' with 3 fields sharing the
same ID.  The first two fields are hidden with display:none and
visibility:hidden, respectively.  JAWS and VoiceOver recognize the third
field, skipping the first two.

The third example uses aria-labelledby to reference two IDREFs, one of
which is hidden with display:none. JAWS and VO read both. This behavior is
correct according to ARIA spec[1]

The fourth example uses a label[for] and aria-describedby.  JAWS and VO
behave differently, from what I can tell. JAWS behaves as according top
ARIA spec[1] but VO does not.

This raises a few questions for me.  First, for those who may also be
inclined to test the URL above: are your results similar.

Second, and more importantly, why the difference between the behavior of
label[for] and aria-labelledby?  The ARIA spec says "Skip hidden elements
unless the author specifies to use them via an aria-labelledby or
aria-describedby being used in the current computation."   If the
definition of "hidden" says "Indicates that the element is not visible or
perceivable to any user. "  and "Authors are reminded that
visibility:hidden and display:none apply to all CSS media types; therefore,
use of either will hide the content from assistive technologies that access
the DOM through a rendering engine."

If that's the case, why allow an exception when authors use
'aria-labeledby' and 'aria-describedby'?  Further, why the difference in
behavior from how the label element behaves?

Last, how will the proposed labelfor behave?

1 - http://www.w3.org/WAI/PF/aria-implementation/#mapping_additional_nd
2 - http://www.w3.org/WAI/PF/aria-implementation/#def_hidden

Karl Groves
Senior Technical Lead Accessibility Software Consultant & Director of
The Paciello Group
Phone: +1 443-875-7343

Received on Tuesday, 22 April 2014 15:01:25 UTC