Re: How the W3C Text Alternative Computation Works

On Tue, Dec 22, 2015 at 1:35 AM Steve Faulkner <faulkner.steve@gmail.com>
wrote:

> I don't see in the spec[1] where the difference between CSS display:none
> and CSS visbility:hidden is defined.
>

They are different in the CSS spec. visibility is inherited, and display is
not.

You can't ignore that difference in the text alternative calculation
algorithm because the browser's style resolution algorithm is already
taking that into account. Let me give some examples.

(1) <input aria-labelledby="a">
     <label id="a">
         One
         <span style="visibility:hidden">Two</span>
         <span style="display:none">Three</span>
     </label>

In this example, when we get to the first span, the accessible name
calculation algorithm says that if the element is invisible, and not
referenced by aria-labelledby, then we return the empty string. Same for
the second span. So Two and Three are ignored, and the accessible name of
the input will just be "One".

(2) <input aria-labelledby="a">
     <label id="a" style="display:none">
         One
         <span style="visibility:hidden">Two</span>
         <span style="display:none">Three</span>
     </label>

In this second example, the label is display:none, however the accessible
name calculation algorithm says that if the element is referenced by
aria-labelledby or aria-describedby, then we keep going, so we recurse into
its descendants and compute its name. When we get to Two and Three, they
are invisible and NOT referenced by aria-labelledby, so they get excluded
from the name.

So I think the accessible name here will still be "One".

(3) <input aria-labelledby="a">
     <label id="a" style="visibility:hidden">
         One
         <span style="visibility:hidden">Two</span>
         <span style="display:none">Three</span>
     </label>

In this last example, the label is visibility:hidden, but since it's
referenced by aria-labelledby, we compute its accessible name anyway and
recurse into its children. However, because visibility is inherited, all of
its children are hidden too, so we don't include them! So the accessible
name here is the empty string "".

It's tempting to say we should just ignore the CSS spec and make visibility
and display work the same way from the perspective of the name calculation,
but how? The computed style of an element is quite complex, it requires
resolving stylesheets, inline styles, default styles, and inherited styles.

Consider one last example:

(4) <input aria-labelledby="a">
     <label id="a" style="visibility:hidden">
         One
         <span style="visibility:hidden">Two</span>
         <span style="display:none">Three</span>
         <span style="visibility:visible">Four</span>
     </label>

In this case the accessible name will be "Four", because the last span
overrides the inherited visibility explicitly.