1

I was trying to add accessibility to my chart based on SVG. I added id and aria-labelledby attributes to map the labels and values:

<svg width="400" height="200" tabindex="0">
    <g class="subjects">
        <text id="subject1">Maths</text>
        <text id="subject2">Physics</text>
        <text id="subject3">English</text>
        <text id="subject4">Chemistry</text>
    </g>
    <g class="marks">
        <text aria-labelledby="subject1">90%</text>
        <text aria-labelledby="subject2">85%</text>
        <text aria-labelledby="subject3">80%</text>
        <text aria-labelledby="subject4">95%</text>
    </g>
</svg>

But the screen reader (JAWS) is reading out in sequence:

Maths Physics English Chemistry 90% 85% 80% 95%

I want the screen reader to read:

Maths 90% Physics 85% English 80% Chemistry 95%

2 Answers 2

3

So firstly let me say that SVG accessibility is an emerging area of accessibility and so these techniques may only work on a subset of browsers), that having been said, you could get better accessibility now on the supporting browsers by doing this (caveat - tested only on OS X with Safari):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" tabindex="0">
    <g class="subjects">
        <text y="25" aria-label="Maths 90%">Maths</text>
        <text y="75" aria-label="Physics 85%">Physics</text>
        <text y="125" aria-label="English 80%">English</text>
        <text y="175" aria-label="Chemistry 95%">Chemistry</text>
    </g>
    <g class="marks" aria-hidden="true">
        <text x="100" y="25">90%</text>
        <text x="100" y="75">85%</text>
        <text x="100" y="125">80%</text>
        <text x="100" y="175">95%</text>
    </g>
</svg>

The following will work on more browsers e.g. IE on Windows and Safari on OS X

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" tabindex="0" aria-labelledby="svgDesc">
    <title id="svgDesc">
        Maths 90%, Physics 85%, English 80%, Chemistry 95%
    </title>
    <g class="subjects" aria-hidden="true">
        <text y="25">Maths</text>
        <text y="75">Physics</text>
        <text y="125">English</text>
        <text y="175">Chemistry</text>
    </g>
    <g class="marks" aria-hidden="true">
        <text x="100" y="25">90%</text>
        <text x="100" y="75">85%</text>
        <text x="100" y="125">80%</text>
        <text x="100" y="175">95%</text>
    </g>
</svg>

In order to get something to work everywhere as of the writing of this answer, you have to rely on essentially treating the SVG as an image and providing an alternative as a text description as shown above in the second example, or hiding the entire thing with aria-hidden="true" and providing an "off-screen" alternative such as a table or alternative HTML presentation. The example below will work everywhere for and provide real semantic markup that equals the visual display.

<!doctype html>
<html>
<head>
    <style>
    .screen-reader-text {
        position: absolute !important;
        height: 1px; width: 1px; 
        overflow: hidden;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
    }
    </style>
</head>
<body>
    <table class="screen-reader-text">
        <tr>
            <th scope="col">Subject</th>
            <th scope="col">Percentage</th>
        </tr>
        <tr>
            <th scope="row">Maths</th>
            <td scope="col">90%</td>
        </tr>
        <tr>
            <th scope="row">Physics</th>
            <td scope="col">85%</td>
        </tr>
        <tr>
            <th scope="row">English</th>
            <td scope="col">80%</td>
        </tr>
        <tr>
            <th scope="row">Chemistry</th>
            <td scope="col">95%</td>
        </tr>
    </table>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="400px" height="200px" viewBox="0 0 400 200" aria-hidden="true">
        <g class="subjects">
            <text y="25">Maths</text>
            <text y="75">Physics</text>
            <text y="125">English</text>
            <text y="175">Chemistry</text>
        </g>
        <g class="marks">
            <text x="100" y="25">90%</text>
            <text x="100" y="75">85%</text>
            <text x="100" y="125">80%</text>
            <text x="100" y="175">95%</text>
        </g>
    </svg>
</body>
</html>
2
  • Yes, it answers perfectly to the question. I would add that for perfect accessibility requirements, he might also add a title to the SVG and could use the description tag to describe the content.
    – Adam
    Feb 25, 2015 at 7:44
  • I had tried aria-label, but it didn't work for me. I was trying Windows Chrome + JAWS. aria-label works in other places, but not inside <text>. May be my browser+OS combo does not recognize aria-label inside <text>. However, aria-hidden works just fine.
    – gerin
    Feb 25, 2015 at 8:24
0

Maybe exploit the fact that "labelledby" will accept multiple ids. added roles and title element. This seems to read as desired:

<svg width="400" height="200" tabindex="0" role="img"
    aria-labelledby="chart-title subject1 val1 subject2 val2 subject3 val3 subject4 val4">
    <title id="chart-title">Student's grades for quarter:</title>
    <g class="subjects" role="presentation">
        <text id="subject1">Maths</text>
        <text id="subject2">Physics</text>
        <text id="subject3">English</text>
        <text id="subject4">Chemistry</text>
    </g>
    <g id="marks" role="presentation">
        <text id="val1">90%</text>
        <text id="val2">85%</text>
        <text id="val3">80%</text>
        <text id="val4">95%</text>
    </g>  
</svg>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.