W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2014

Difference in behavior between HTML label and aria-labelledby

From: Karl Groves <kgroves@paciellogroup.com>
Date: Tue, 22 Apr 2014 11:00:53 -0400
Message-ID: <CABScKPCW2JVQMq1YdShYL-zVFnPZviei=YCcNfRqbYHnmtd3+A@mail.gmail.com>
To: public-pfwg-comments@w3.org, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
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:
http://karlgroves-sandbox.com/a11yVisible.html

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
Training
The Paciello Group
@karlgroves
Phone: +1 443-875-7343
Received on Tuesday, 22 April 2014 15:01:25 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:51 UTC