Aria gridcell label always blank inside SVG rect

Question

I'm trying to develop an accessible Bar Chart. As there is no formal ARIA role for graphics just yet, I decided to add role="grid" to my SVG. Most of the stuff is working OK, but the gridcell is always blank when I test my chart using Voice Over.

This is the codepen that illustrates my graph. And this is a video of my testing using Voice Over.

This is how I've configured the gridcell for my rect tag:

<g className={barClass} role="gridcell" aria-label={bar.count + ' ' + bar.fruit}>
  <rect width={bar.count * 10} height="19" y={20 * index}/>
</g>

Question: Am I doing something wrong? Why voiceover does not recognize the aria label?

UPDATE 1: I'm using Chrome and Safari and the issue is present in both browsers.

While using [NVDA](http://www.nvaccess.org/), the bars read out their label correctly on mouseover as long as I copy the generated HTML and run it outside of an `iframe`. Can you try again outside of CodePen? You may also want to make your `` tabbable with `tabindex="0"`. — zero298, Feb 09 '16 at 20:03
Thanks for your help. I did test outside codepen and I'm facing the same issue. Regarding tabindex, i don't want the inner svg elements to be focusable. I'm using active descendant to keep focus in the root svg and while pressing left, right, top, down, change the active element using javascript. I removed that from the existing code to avoid confusion. — Alan Souza, Feb 09 '16 at 20:07
Don't add `tabindex` to ``. That isn't working for me. Also, what browsers are you using, because I am getting variances between FireFox and Chrome. — zero298, Feb 09 '16 at 20:07

score 0 · Answer 1 · edited May 23 '17 at 12:22

Use the <title> and <desc> elements with the aria-label attribute and the img role as a fallback:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Network</title>
  <desc>An example of a computer network based on a hub</desc>
<!-- add graphic content here, and so on for the other components-->
  </g>
  <g id="ComputerA" aria-label="computer A: A common desktop PC" role="img">
    <title>Computer A</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="ComputerB">
    <title>Computer B</title>
    <desc>A common desktop PC</desc>
  </g>
  <g id="CableA" aria-label="Cable A: 10BaseT twisted pair cables" role="img">
     <title>Cable A</title>
     <desc>10BaseT twisted pair cable</desc>
  </g>
  <g id="CableB">
    <title>Cable B</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
  <g id="CableN">
    <title>Cable N</title>
    <desc>10BaseT twisted pair cable</desc>
  </g>
</svg>

The simplest way to specify a text equivalent for an SVG graphic is to include the following elements in any SVG container or graphics element:

title
    Provides a human-readable title for the element that contains it. The title element may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer.
desc
    Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.

References

Aria gridcell label always blank inside SVG rect

1 Answers1