Re: aria-labelledby and recursion

On 2015-04-29 5:55 PM, Dominic Mazzoni wrote:
> It's clear that we don't have consensus on how to interpret the spec. 
> Does anyone know what was actually intended?

The interpretation that only the first aria-labelledby is followed is 
correct.  There is an explanatory example at the end of step 2B, 
repeated below[1]:

> The following example shows the meaning of the clause "… and the 
> current node is not already part of an aria-labelledby traversal …" .
>
> * element1's accessible name is "hello" because this is a first 
> traversal of its aria-labelledby, leading to element3.
> * element2 has no accessible name. The computation involves a first 
> traversal of its aria-labelledby leading to element1, but element1's 
> aria-labelledby is not subsequently followed.
>
> <element1 id="el1" aria-labelledby="el3" />
> <element2 id="el2" aria-labelledby="el1" />
> <element3 id="el3"> hello </element3>

I think the restriction has to do with reverse relationships[2]. Like 
aria-controls and aria-flowto, aria-labelledby creates a 
'label-for/labelled-by' relationship structure in some accessibility 
APIs (in addition to a name string).  That's simple to do if there are 
only two accessible nodes in the relationship.  But, if aria-labelledby 
references are followed indefinitely, it's not clear how to create the 
label-for/labelledby relationship(s).  Is there only one such 
relationship?  Or a flat chain of relationships?  Or is it a many-to-one 
relationship with one label-for with many labelled-bys?  Or, one-to-many 
and hierarchical?  My head hurts just thinking about how the 
relationship could be represented.

Also, FWIW, I think it it's simpler for authors if only the first 
aria-labelledby is followed.  They know what they have to work with, and 
don't have to worry about indefinitely long chains of aria-labelledbys.

Regarding the credit card example:

> <input aria-labelledby="label1">
> <div id="label1">
>   Enter your
>     <img src="visa.png" aria-labelledby="visa">
>   or
>     <img src="mastercard.png" aria-labelledby="mastercard">
>   credit card number now.
> </div>
> <div hidden id="visa">Visa</div>
> <div hidden id="mastercard">Mastercard</div>

The desired result could be accomplished using @aria-label or @alt on 
the <img> elements.  Since that doesn't involve following a second 
aria-labelledby reference, the alternative text of the images is 
captured by the recursion at step 2B:

<input aria-labelledby="label1">
<div id="label1">
   Enter your
     <img src="visa.png" aria-label="Visa">
   or
     <img src="mastercard.png" aria-label="Mastercard">
   credit card number now.
</div>

or:

<input aria-labelledby="label1">
<div id="label1">
   Enter your
     <img src="visa.png" alt="Visa">
   or
     <img src="mastercard.png" alt="Mastercard">
   credit card number now.
</div>

Those work in FireFox.

[1] http://www.w3.org/TR/accname-aam-1.1/#step2B
[2] 
http://www.w3.org/TR/core-aam-1.1/#mapping_additional_relations_reverse_relations

-- 
;;;;joseph.

'Array(16).join("wat" - 1) + " Batman!"'
            - G. Bernhardt -

Received on Thursday, 30 April 2015 14:45:28 UTC