Re: Difference in behavior between HTML label and aria-labelledby

Hi Karl -- What browser / screen reader version was used?
These are my findings (voice output is within quotes):
With JAWS 13 / IE 8 / Win 7:
First example: "Normal edit type in text"
Second example: "Foo edit three type in text"
Third example: "Label A Label B edit type in text"
Fourth example: "Bar edit Bar Bat Baz Bat Baz"
Interesting to note that the fourth example voiced 'Bat baz' twice.

With NVDA 2014.1 / IE 8 / Win 7:
First example: "Normal edit Blank"
Second example: "Foo edit selected three"
Third example: "Label A Label B edit blank"
Fourth example: "Bar edit selected bar"

I have a question regarding the spec: It says "Skip hidden elements unless
the author specifies to use them via an aria-labelledby or aria-describedby
being used in the current computation" (
http://www.w3.org/WAI/PF/aria-implementation/#mapping_additional_nd) --
does the fourth example (with NVDA) then goes against the spec?

-Devarshi

On Tue, Apr 22, 2014 at 11:00 AM, Karl Groves <kgroves@paciellogroup.com>wrote:

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