Подтвердить что ты не робот

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

Обзор

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 при запуске -time.

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

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

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

Wrap-Up

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

MathML

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

Используйте role="math" вместе с aria-label в окружающем теге div (см. docs). Добавление 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>

<сильные > Ограничения/Соображения

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

Ссылки

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

Ссылки

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

Например:

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

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