如何让 JAWS 以重要顺序读取 SVG 图形中的文本

Question

我试图为基于 SVG 的图表添加辅助功能。我添加了 id 和 aria-labelledby 属性来映射标签和值：

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

但是屏幕 reader (JAWS) 正在按顺序读出：

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

我希望屏幕 reader 显示：

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

Answer 1

所以首先让我说 SVG 可访问性是一个新兴的可访问性领域，因此这些技术可能只适用于一部分浏览器），话虽如此，您现在可以通过以下方式在支持的浏览器上获得更好的可访问性这个（警告 - 仅在 OS X 上使用 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>

以下将适用于更多浏览器，例如Windows 上的 IE 和 OS X

上的 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" 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>

为了在撰写此答案时让某些东西在任何地方都能正常工作，您必须依靠本质上将 SVG 视为图像并提供替代方案作为文本描述，如上文第二个示例所示，或者使用 aria-hidden="true" 隐藏整个内容并提供 "off-screen" 替代方案，例如 table 或替代方案 HTML 演示。下面的示例将适用于任何地方并提供等于视觉显示的真实语义标记。

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

Answer 2

也许可以利用 "labelledby" 接受多个 ID 的事实。添加角色和标题元素。这似乎符合要求：

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

如何让 JAWS 以重要顺序读取 SVG 图形中的文本

How to make JAWS read texts in a SVG graph in a significant order

svg

accessibility

wai-aria

jaws-screen-reader