Re: Canvas and ARIA alternatives

On Sat, Aug 4, 2012 at 5:47 AM, Pierre Dubois <duboisp2@gmail.com> wrote:
> Once the graphic are generated, I decided to auto set the attribute
> aria-describedby on the figure element to provide a better accessibility.
> The aria-describedby attribute have a reference to the HTML table.
> Do you think that is a sufficient technique to set the accessibility for the
> Canva / SVG element in my case ?

Yeah, I think ARIA has generated a lot of confusion over usage of
aria-describedby.

UAs are required to reduce the referent of aria-describedby (your
table) to a plain text string for exposure as an "accessible
description" for the canvas.

http://www.w3.org/WAI.new/PF/aria/roles#namecalculation

That some UAs might additionally expose a mechanism for navigating to
the accessible description doesn't mean you can safely refer to
content that cannot be easily consumed when its structure and
semantics are stripped away to plain text. Basically aria-describedby
is only suitable for short descriptions. Unfortunately ARIA provides
no mechanism for separating out what contributes to the accessible
description and the navigational link. There's been a bit of
discussion around adding an @aria-describedat attribute, reusing
@longdesc, or minting a new HTML attribute for this purpose.

So I don't think your technique is ideal.

For now, I think you're better off just making reference to the long
text alternative via the short text alternative, like so:

  <figure>
    <figcaption>
       <strong>2011 Sales</strong>
       <p id="desc">Sales grew from $595,304 per month to $847,390.</p>
    </figcaption>
    <svg role="img" aria-label="2011 Sales Chart. Details in table
following." aria-describedby="desc"></svg>
    <details>
       <summary>2011 Sales Table</summary>
       <details>
          <table aria-label="2011 Sales Table"
aria-describedby="desc">...</table>
       </details>
  </figure>

A short visible summary is included of what the chart actually tells
us - more digestible than either chart or table, potentially. It is
explicitly designated as the short accessible description for both
canvas and table. <strong> is used to distinguish the reference title
of the figure from the rest of the caption.

The short text alternative for the <svg> element makes reference to
the long text alternative that follows, for the aid of users with
visual impairments jumping between images on the page; compare this
technique:

http://www.w3.org/TR/WCAG20-TECHS/G74.html

In theory <svg> has its own accessibility semantics (e.g. the
<description> element), but as these are poorly supported I've
overridden them at the ARIA level using role="img", with aria-label
and aria-describedby to provide text alternatives.

The table should is available in a visible form, e.g. for users who
have difficulty understanding the chart and for users who want to
extract the data. (Could also leave it fully visible or hide it
off-page behind a link.)

--
Benjamin Hawkes-Lewis

Received on Sunday, 5 August 2012 10:02:35 UTC