Re: aside and figure elements

Steven Faulkner, Mon, 7 Jun 2010 11:18:24 +0100:
> hi laura,
> we haven't discussed the <figure> element.
> 
> my take on the figure element is that the
> # <figure> should be mapped to accessibility APIs as a grouping
> element like <p> or <div>
> # decorative images should not be allowed as content of a <figure>
> element as the HTML5 semantics imply that the content of the figure
> should be meaningful, so no <img alt="">

Unless I misinterpret what you say, then WAI-ARIA disagrees with you 
(and Shelley has been using the same example in her discussion of the 
issue). WAI-ARIA "blesses" a construct which is 100% identical to a 
<figure> containing a presentational <img> in combination with a 
caption: [1]

]]
In the following code sample, the containing div element has a WAI-ARIA 
role of img and is appropriately labeled by the caption paragraph. In 
this example the img element can be marked as presentation because the 
role and the text alternatives are provided by the containing element.

<div role="img" aria-labelledby="caption">
  <img src="example.png" role="presentation" alt="">
  <p id="caption">A visible text caption labeling the image.</p>
</div>
[[

> # when a figure has a <figcaption> the content of the <figcaption>
> should act as the accessible name for the image(s) inside the <figure>
> if the image(s) do not have a text alternative provided using the alt
> attribute.
> #if the image(s) inside the figure have alt then the <figcaption>
> content could act as the accessible description unless for example the
> figcaption is referenced by an aria labelledby on an img:

I agree that img with *both* content inside @alt as well as a <figure> 
caption, is a problem. We will sure see many cases where the @alt and 
the caption contains the same text.

> In this case the accessible name is "Dog on a bike. Chester can ride
> without using his paws."
> 
> <figure>
> <img id="img1" alt="dog on a bike." aria-labelledby="img1 cap">
> <figcaption id="cap"> Chester can ride without using his paws.</figcaption>
> </figure>
> 
> In this case the accessible name is "Dog on a bike." and the
> accessible description is "Chester can ride without using his paws."
> 
> <figure>
> <img id="img1" alt="dog on a bike." aria-labelledby="img1 cap">
> <figcaption id="cap"> Chester can ride without using his paws.</figcaption>
> </figure>

And what happens to the @alt text here? Does it get ignored in UAs that 
*are* ARIA compatible?

> In this case the accessible name is "Chester can ride without using
> his paws." which I think is an unsatisfactory text alternative as it
> does not provide adequate information about what is depicted visually
> in the image.
> 
> <figure>
> <img >
> <figcaption >Chester can ride without using his paws.</figcaption>
> </figure>
> 
> while this would be better, but it is still currently problematic from
> a practical point of view as no browsers or AT provide the
> programmatic mapping between the <figcaption> and the img. So the
> accessible name provided through an accessibility API is ""
> 
> <figure>
> <img >
> <figcaption>Chester the dog riding a bike without using his 
> paws.</figcaption>
> </figure>
> 
> Using aria-labelledby is better in this case because for users of
> AT/browsers that support aria-labelledby the programmatic association
> will be provided,
> <figure>
> <img aria-labelledby="cap">
> <figcaption id="cap">Chester the dog riding a bike without using his
> paws.</figcaption>
> </figure>
> 
> but again aria-labelledby is only supported by a subset of browsers/AT

I suppose you meant ARIA in general and not specifically 
aria-labelledby.

> so the safest bet is to provide an adequate accessible name using alt
> attribute.
> 
> <figure>
> <img aria-describedby="cap" alt="dog on a bike">
> <figcaption id="cap">Chester the dog riding a bike without using his
> paws.</figcaption>
> </figure>

And just because you used content inside @alt, you also used 
@aria-describedby instead of @aria-labelledby? (I'll suppose you just 
didn't take care to make your text and your code congruent.) Is this 
also the reason why you filled the @alt with content? 

It is not very satisfying if we "should" use 
@aria-describedby/-labelledby *and* fill the @alt with content, even 
when using <figure> - then it doesn't live up to (all) the 
expectations. 

[1] http://www.w3.org/TR/wai-aria/roles#presentation
-- 
leif halvard silli

Received on Monday, 7 June 2010 12:02:37 UTC