Accessible diagram in SVG-CodePudding

How would you improve accessibility for diagrams in SVG?

<svg  viewBox="0 0 420 150" aria-labelledby="desc" >
  <desc id="desc">Ein Diagramm</desc>

  <g  tabindex="0" aria-describedby="bar1info">
    <rect width="40" height="18" />
    <text id="bar1info" x="45" y="9.5">4 apples</text>
  </g>
</svg>

Is the aria-attribute enough to connect the rect with its legend? Is it necessary at all?

Should the bar / diagram be tabbable or should I refrain from using tabindex="0"?

CodePudding user response：

Is the aria-attribute enough to connect the rect with its legend? Is it necessary at all?

Not necessary in this instance, the grouping having a label doesn't serve any purpose as the text element will be exposed natively.

Should the bar / diagram be tabbable or should I refrain from using tabindex="0"?

If this is static content then no as items should only be focusable if they are interactive in some way.

Screen reader users have ways to navigate the diagram if they desire that do not require it to be focusable.

Complex SVGs and graphs

You appear to be making some form of bar chart from the code provided.

Often your best option for complex SVGs, graphs etc. is to hide the SVG itself from screen readers and provide the data in a table.

You can use aria-hidden="true" on the SVG to remove it from the accessibility tree (and focusable="false" just for IE) or if including it as an external image set the alt attribute to "".

<svg aria-hidden="true" focusable="false"></svg>

<!-- or if external -->

<img src="mysvg.svg" alt="">

Then we can add a table to the page with the data used in the graph.

If your design allows the table to be visible then that would be better but in a lot of circumstances this isn't possible so we can hide it visually using a visually hidden CSS class.

Example

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<svg  viewBox="0 0 420 150" aria-hidden="true" focusable="false">
  <desc id="desc">Ein Diagramm</desc>
  <g >
    <rect width="40" height="18" />
    <text x="45" y="9.5">4 apples</text>
  </g>
</svg>

<table >
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>4</td>
  </tr>
</table>

CodePudding user response：

There are good web articles available on this topic. Including the following: