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

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

таким образом, вместо того, чтобы скрывать информацию в атрибуте, рассмотрите возможность размещения ее обычно на странице как подпись:<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/

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

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

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

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

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

например:

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

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