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.

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
   <http://w3c.github.io/aria/accname-aam/accname-aam.html#mapping_additional_nd_te>
as
   modified for SVG
   <http://rawgit.com/w3c/aria/master/svg-aam/svg-aam.html#mapping_additional>
   :
      - 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.

   - 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.)

   - 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.

   - 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!