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

обзор

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

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

Более подробные сведения

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

  An image title This is the longer image description ...  

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

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

  ...  

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

 ... 

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

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

Заворачивать

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

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

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

    MathML

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

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

     
    ...

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

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

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

    SVG

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

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

      [title] [long description] ...  

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

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

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

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

    Поэтому вместо того, чтобы скрывать информацию в атрибуте, подумайте о том, чтобы разместить ее на странице как заголовок в

    рядом с секцией svg или math, или поместить текст в

    и поместить его и svg / math в элементе

    .

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

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

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

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

      A wide rectangle   

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

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

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

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

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

    Например:

     
    ...

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

    Давайте будем гением компьютера.