Итак, во-первых, позвольте мне сказать, что 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>
Ниже будет работать на более браузеров, например, IE на Windows, и Safari на 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>
Для того, чтобы получить что-то, чтобы работать везде, как на момент написания этого ответа, вы должны полагаться на по существу обработки SVG, как изображения и обеспечивая альтернативу в виде текста описание, как показано выше во втором примере, или скрыть всю вещь с помощью aria-hidden = «true» и предоставить альтернативу «за пределами экрана», например, таблицу или альтернативную 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>
Да, это прекрасно отвечает на вопрос. Я бы добавил, что для отличных требований к доступности он также может добавить заголовок в SVG и использовать тег описания для описания содержимого. – Adam
Я попробовал 'aria-label', но это не сработало для меня. Я пробовал Windows Chrome + JAWS. 'aria-label' работает в других местах, но не внутри' '. Возможно, мой браузер + OS combo не распознает 'aria-label' внутри' '. Однако «ария-скрытая» работает просто отлично. –
gerin