Доступность: рекомендуемое соглашение alt-text для SVG и MathML?

таким образом, вместо того, чтобы скрывать информацию в атрибуте, рассмотрите возможность размещения его обычно на странице как заголовок в <p> тег рядом с разделом svg или math, или поместите текст в <figcaption> тег и поместите его и раздел svg / math в <figure> элемент.

Если вы действительно не хотите, чтобы зрячие пользователи видели информацию, я считаю, что стандартный метод заключается в том, чтобы абсолютно позиционировать заголовок с большим отрицательным "левым" значением, по крайней мере, до тех пор, пока читатели экрана не догонят HTML5.

Что касается SVG, аналогичного, но не идентичного приведенным выше предложениям, то, по-видимому, лучшим текущим подходом может быть использование Aria-labelledby со ссылкой на идентификатор элемента, содержащего "alt text" (а не сам текст alt).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

вы также можете использовать элементы title и desc, установив Aria-labelledby="svg1title svg1desc".

Источник:http://www.sitepoint.com/tips-accessible-svg/

досадно, если вы сделаете это, вы нужно (как-то) убедиться, что идентификаторы уникальны на всей странице (другими словами, если вы используете много SVG, все они должны иметь разные идентификаторы для заголовка). Это также относится к другим идентификаторам в SVG и является общим серьезным раздражением с встроенным SVG.

(Если это серьезно проблематично, вы можете изучить внедрение SVG с помощью тега img - вы все равно можете сделать это "встроенным" без внешнего файла, если вы используете URL-адрес данных и base64-кодируете SVG.)

теоретически изображение svg должно быть более доступным, чем растровое изображение с alt-тегом. Во-первых, текст может быть сохранен как текст в svg, целые фрагменты текста, а не только короткое предложение. Это печально, если утилита для чтения с экрана игнорировать эту дополнительную информацию. Однако не все текстовое содержимое может быть видно в любой момент времени, как и для html. Многие изображения svg являются статическими изображениями, но растущая тенденция (основанная на фактическом использовании в открытом интернете), похоже, использует более динамические SVG, например, для отображения графиков или диаграммы, которые можно редактировать или складывать.

еще одна вещь, чтобы быть в курсе, что <title> элементы будут отображаться в виде всплывающих подсказок (для зрячих пользователей) во всех браузерах AFAIK с поддержкой svg (по крайней мере, последнего поколения), и что вы можете поместить их в другие элементы svg тоже (название применяется к элементу, к которому он является прямым потомком).

не проверяли это, но вы можете попробовать добавить alt="whatever" в контейнер DIV. Да, это не допустимый атрибут для DIV, но я вижу, что старые программы чтения с экрана не заботятся о том, где появляется alt.

например:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

очевидно, это в предположении, что программы чтения с экрана будут читать атрибуты alt (неправильно) на элементах, отличных от IMG. Не проверял, но это лучше, чем ждать, пока читатели экрана догонят, если это сработает.