Re: Comments on SVG Accessibility Mappings -- Default and Allowed Semantics

Rich Schwerdtfeger

Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com> wrote on 01/21/2015
03:59:18 PM:

> From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
> To: Richard Schwerdtfeger/Austin/IBM@IBMUS
> Cc: public-svg-a11y@w3.org
> Date: 01/21/2015 03:59 PM
> Subject: Re: Comments on SVG Accessibility Mappings -- Default and
> Allowed Semantics
>
> Thanks for the feedback Richard,
>
> One question on the following:
>
> >   * Default role none/presentation, no role may be applied.
> >   * However, it should be clear that authors are still allowed to
> > give these elements *other* accessibility attributes and child
> > content, in order to reference it through another element's `aria-
> > labelledby` or `aria-describedby` properties.  For example, if
> > colored gradients (or `<solidColor>` elements) are used to
> > categorize content on a map or chart, the author could add `<desc>`
> > elements to each gradient, explaining its semantic meaning.  Then,
> > whenever a shape is set to use that gradient as a fill, the author
> > could also set it to point to that element as `aria-describedby`.
> > Similarly, when an animation is triggered, that animation's label or
> > description could be added to the description of the target element.
> >  (Note: might need to clarify the accessible name/description
> > computation to ensure that this works!)
> If a role is none there is nothing to map. Perhaps that needs to be
> made clearer. If there is no role there is no accessible object. We
> need to discuss this more.
> If you want these to map we need to know what they are mapped to.
> Would it be group?
>
> Can't an element that *isn't* in the accessibility tree (i.e., an
> element with default role of none/presentation) still be used for
> describedby/labelledby of another element?  That's what I was
> suggesting here.
>
I see. You are right from that perspective. I misunderstood you. What you
cannot do is have a description applied to an object that can have no role
whatsoever as there is no accessible object to map to. I thought this was
what you were trying to say.


    <radialGradient id="flame" fy="70%" aria-describedby="flame2">
       <stop stop-color="red" offset="0" />
       <stop stop-color="yellow" offset="1" />
   </radialGradient>


   <polygon points="0 100, 50 0, 100 100"
            fill="url(#flame)"
            aria-describedby="flame" >
      <desc>Current Status</desc>
   </polygon>


We do this in HTML in that you can have an object with a description in it
with display:none that can be referenced by another object that uses it as
description. The description is mapped to the accessibleDescription in the
Accessibility API.


You can grab a description from anywhere else in the document and apply it
to an element that has a role.



> Here are a couple simple-yet-realistic examples, and how I *think*
> they would be processed.
>
> Example 1, annotating the descriptive meaning of a paint server or
> other graphical effect:
>
> <svg viewBox="0 0 100 100" >
>    <title>Connection Quality</title>
>    <radialGradient id="flame" fy="70%">
>       <desc>Highlighting to indicate danger state.</desc>
>       <stop stop-color="red" offset="0" />
>       <stop stop-color="yellow" offset="1" />
>   </radialGradient>
>
>   <polygon points="0 100, 50 0, 100 100"
>            fill="url(#flame)"
>            aria-describedby="flame" >
>      <title>Current Status</title>
>   </polygon>
>
> </svg>
> Live example: http://codepen.io/AmeliaBR/pen/xbdBzG
> The accessibility tree would have two objects: the SVG and the
> polygon as a child.
> The SVG's accessible name would be calculated from its <title> since
> there are no other ARIA attributes.  It would be identified as
> "Connection Quality graphic" (or "Connection Quality group" for now)
> Similarly, the polygon's accessible name would be "Current Status
> shape" or "Current Status group".
> For the polygon's description, following the computation as modified for
SVG:
> Start with the polygon itself.  It's not hidden, so step A is passed.
> For step B, process the ID tokens in the aria-describedby
>  attribute.  There's only one, and it points to radialGradient#flame.
> The radialGradient node therefore becomes the current node for
> processing, restarting at step A.  Because it was referenced from
> aria-describedby, the fact that it is hidden (never displayed
> directly) doesn't have an effect.
> The radialGradient doesn't have aria attributes, so steps B and C are
skipped.
> From step D, the content of the <desc> element gets used as the
> accessible text alternative for the radialGradient.
> This description is therefore returned as the accessible description
> for the polygon as well.
> Example 2, changing the name of an object when it is animated.  A
> little more complex, and this time with full XML markup:
>
> <svg viewBox="0 0 100 100"
>      xmlns="http://www.w3.org/2000/svg"
>      xmlns:xlink="http://www.w3.org/1999/xlink"
>      xmlns:aria="http://www.w3.org/ns/wai-aria/"
>      aria:role="region">
>   <title>Roll that Ball</title>
>
>   <a id="go" xlink:href="#move"
>      aria:role="button"
>      aria:aria-controls="b" >
>     <text x="50%" dy="1em" text-anchor="middle"
>           aria:role="none presentation">Go!</text>
>   </a>
>
>   <circle id="b" r="5" fill="red"
>           aria:aria-label="Ball"
>           aria:aria-live="polite"
>        />
>
>   <animateMotion id="move" xlink:href="#b"
>        begin="indefinite" dur="10s"
>        additive="replace"
>        path="M10,10 L10,90 90,90 90,10 Z" >
>     <title>rolling around the edges of the canvas</title>
>   </animateMotion>
>   <set xlink:href="#b"
>        attributeName="aria:aria-labelledby"
>        to="b move"
>        begin="move.begin" end="move.end"
>        />
>   <set xlink:href="#b"
>        attributeName="stroke"
>        to="blue"
>        begin="move.begin" end="move.end"
>        />
> </svg>
>
> Live example: http://codepen.io/AmeliaBR/pen/Ggmedv
> The accessibility tree again only represents perceivable objects:
> svg
> a
> circle

> The SVG gets its label from the <title>, nothing new there.

agreed.

> The link is recognized as a button because of the role attribute.
> It has no label/description accessibility attributes, so it's name
> is derived from its contents, as "Go! Button".  The effect of using
> the button is suggested by the aria-controls attribute.

> The text element has been explicitly excluded from the accessibility
> tree with an ARIA role of none, so its content is only used to
> generate the name of the link-as-button.

> The circle element has an aria-label attribute, so it's accessible
> name is initially "Ball group" (or "Ball shape" or "Ball
> graphic" once more specific role names are available).  It also has an
> aria-live attribute, to indicate that its properties may be changed.

> When you activate the link, it targets the main animation, which
> causes that animation to begin.

> For the exact duration of the main animation, two other changes are
> made to the circle: a stroke change, which doesn't affect
> accessibility calculations, and a change to the aria-labelledby
>  attribute.  (Unfortunately, this doesn't currently work; with or
> without the explicit XML namespaces, in HTML 5 or pure SVG, neither
> Chrome nor Firefox apply SVG animation to attributes they don't
recognize.)


One of the things that is not clear is whether animation will stay in SVG
the way it is. Microsoft does not want to support it in IE or at least they
have not up to this point. The approach I believe is to use CSS to perform
animations.

There is discussion on merging these namespaces. so stay stuned. That is
why it is REALLY IMPORTANT that we have the core mapping spec. as we are
now treating HTML and SVG as one DOM.


> If the aria-labelledby attribute was correctly updated by the <set>
> element, it would become a list of two ID tokens: "b move".  The two
> tokens are required because aria-labelledby takes precedence
over aria-label.

yes

> With the new attribute, the accessible name for the circle is
> calculated from the accessible names of the two referenced elements,
> concatenated together:
> The first ID token (b) just refers back to the circle itself.  On a
> recursive reference like this, the aria-labelledby is ignored and the
> aria-label ("Ball") is used instead.
> The second token (move) refers to the main animation element.  It's
> label is generated from its <title>, so that "rolling around the
> edges of the canvas" is appended to circle's computed label.
> The resulting name for the circle, while the animation is in effect,
> is therefore "Ball rolling around the edges of the canvas graphic".
>
> Please let me know if I've missed or confused any important details
> in either of those examples!