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

Question

Обзор

HTML5 теперь допускает разметку <svg> и <math> с документом HTML без зависимости от внешних пространств имен (достойный обзор здесь ). Оба имеют свои собственные alt -атрибуты-аналоги (см. Ниже), которые эффективно игнорируются современным программным обеспечением для чтения с экрана. Таким образом, эти элементы недоступны для слепых пользователей.

Планируется ли реализовать стандартное альт-текстовое соглашение для этих новых элементов? Я просмотрел документы и пришел в себя!

Подробнее

Относительно SVG: альтернативный текст SVG может рассматриваться как содержимое корневого тега title или desc.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

Я нашел одну программу чтения с экрана, которая читает его как таковую, но является ли это стандартом? Предыдущие способы вставки SVG также имели проблемы с доступностью, поскольку <object> теги трактуются программами чтения с экрана непоследовательным образом.

Относительно MathML: Альтернативный текст MathML должен храниться в атрибуте alttext .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Поскольку программы чтения с экрана, похоже, не признают этого, библиотека математической визуализации MathJax вставляет текст в атрибут aria-label во время выполнения.

<span aria-label="[alttext contents]">...</span>

К сожалению, NVDA, JAWS и другие тоже пока не читают эти надписи надежно. (Подробнее о WAI-ARIA )

Относительно обоих: не удалось добиться успеха с в значительной степени неподдерживаемыми атрибутами ARIA, я попытался использовать атрибуты title. Они также, кажется, игнорируются в этих «чужих» HTML-элементах.

Wrap-Up

Более чем быстрый взлом, я ищу рекомендуемый способ для размещения альтернативного текста на этих новых HTML-элементах. Возможно есть спецификация W3C, которую я пропускаю? Или все еще слишком рано в игре?

Answer 1

После некоторых копаний я нашел несколько официальных рекомендаций.К сожалению, большинство из них не работают в данный момент.И браузеры, и программы чтения с экрана должны многое реализовать, прежде чем математика и SVG будут считаться доступными, но вещи * начинают искать.

Отказ от ответственности: приведенные ниже рекомендацииэто то, что я почерпнул за последние несколько месяцев кодирования.Если что-то не так, пожалуйста, дайте мне знать.Я постараюсь поддерживать это в актуальном состоянии по мере продвижения браузеров и программного обеспечения.

MathML

Рекомендация

Использование role="math" вместес aria-label на окружающем теге div (см. документы ).Добавление tabindex="0" позволяет программам чтения с экрана сосредоточиться именно на этом элементе;aria-label этого элемента можно произносить с помощью специального сочетания клавиш (например, NVDA+Tab).

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Ограничения / Соображения

• Эскизный экранподдержка чтения на aria-label (и менее важно role="math"). Обновление: Соответствующие билеты NVDA относительно aria-label здесь и здесь .
• Упаковка в тег div или span кажется ненужной, посколькуmath - это элемент первого класса в HTML5.
• Я нашел очень мало ссылок на тег MathML alttext. Обновление: Похоже, это DAISY -специфическое добавление, описанное здесь .

Ссылки

• http://www.w3.org/TR/wai-aria/roles#math
• http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
• http://www.w3.org/TR/wai-aria-practices/#math

SVG

Рекомендация

Используйте теги верхнего уровня <title> и <desc> вместе с role="img" и aria-label в корневом теге SVG.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Ограничения / соображения

• По состоянию на февраль 2011 года бета-версия IE 9 читает все <title> и <desc> теги, что, вероятно, нежелательно,Однако NVDA, JAWS и WindowEyes будут читать aria-label, когда элемент также содержит role="img".
• При загрузке файла SVG (т. Е. Не встроенного в HTML) корневой уровень <title> тег станет заголовком страницы браузера, который будет будет прочитан программой чтения с экрана.

Ссылки

• http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html
• http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html
• http://www.w3.org/TR/wai-aria/roles#img
• http://www.w3.org/TR/wai-aria/roles#namecalculation

Answer 2

Что касается SVG, похожего, но не идентичного приведенным выше предложениям, кажется, что наилучшим текущим подходом может быть использование aria-labelledby со ссылкой на id элемента, который содержит «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-адрес данных и кодируете SVG в base64.)

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

Например:

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

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