Доступность: рекомендуемое альт-текстовое соглашение для 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-элементах.

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

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

Answer 1

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

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

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>

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

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

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

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

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
• http://www.w3.org/TR/wai-aria/roles

Answer 2

Все ответы здесь очень старые; вот обновление, основанное на статье CSS Tricks от 2016 года, которая, к сожалению, настолько нова, насколько я смог найти из авторитетного источника. Обратите внимание, что это краткое изложение, предполагающее, что вы знакомы с возможностями доступа и не ориентируетесь на современные браузеры. См. Статью для более полного обсуждения.

Для svg с тегом

• Добавьте и значение к <img> ярлык.

      <img src="https://some/domain/some.svg" alt="description of image here"> 

Обратите внимание, что если изображение чисто декоративное, вы должны включить alt но оставьте поле пустым - alt="".

Для встроенных

• Добавить <title>элемент; это будет включено как визуальная всплывающая подсказка и будет доступно для Accessability API.
• На теге добавьте role="img".

      <svg role="img">
 <title>Descriptive Title Here</title>
 <use xlink:href="#some-icon"></use>
</svg>

Для декоративных рядных

• Включить aria-hidden="true" на <svg> ярлык.

      <svg aria-hidden="true">
  <use xlink:href="#some-icon"></use>
</svg>

Answer 3

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

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

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

Answer 4

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

<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 5

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

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

Answer 6

Ответ Андрея хорош. Кроме того, если вы используете значки реакции, вы можете просто добавить атрибуты к значку, и будет добавлен тег заголовка или скрытый атрибут. Например:

      import { FiX } from 'react-icons/fi'

<FiX title='Close' />

<FiX aria-hidden='true' />

Answer 7

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

Например:

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

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