Firefox A11y Audit со встроенными SVG - контент с изображениями должен быть помечен

Например, если у меня есть следующее изображение SVG:

<svg role="img" viewbox="0 0 100 50" height="100px">
  <title>Site Logo</title>
  <rect x="0" y="00" width="100" height="10" fill="red"></rect>
  <rect x="0" y="10" width="100" height="10" fill="salmon"></rect>
  <rect x="0" y="20" width="100" height="10" fill="pink"></rect>
  <rect x="0" y="30" width="100" height="10" fill="aqua"></rect>
  <rect x="0" y="40" width="100" height="10" fill="blue"></rect>
</svg>

Я должен выполнить правила svg, установив role=img и включив элемент <title>

Однако когда я запускаю Аудит доступности в Firefox, он добавляет предупреждение для каждого элемента / изображения внутри SVG (путь, прямоугольник, круг) со следующим предупреждением:

Контент с изображениями должен быть помечен. Подробнее…

Пример предупреждения

Но, конечно, мне не нужно размечать каждый отдельный путь в svg?

Что мне делать, чтобы улучшить a11y или указать FF, какой правильный альтернативный текст?

Вот демонстрационная страница в скрипте, на которой будет воспроизведена эта проблема


svg html firefox-developer-tools firefox accessibility
person KyleMit    schedule 18.09.2019    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Я почти уверен, что это ошибка или недоработка в инструменте доступности FF. Я сообщил об этом здесь.

Помните, что автоматический аудит доступности не может выявить все проблемы и часто сообщает о ложных срабатываниях. Попробуйте установить (например) надстройку доступности WAVE, которая является еще одним автоматическим аудитором доступности. Он не предъявляет такой жалобы.

w3 говорит

Img представляет собой отдельный графический объект в документе, независимо от того, сформирован он набором графических объектов или нет.

Итак, вы правы, что role="img" в корне SVG должен делать все правильно. API специальных возможностей не будет пытаться раскрыть детей, но текущая бета-версия инструмента специальных возможностей Firefox, очевидно, делает.

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

Я также попытался поместить элемент <g role="presentation"> вокруг содержимого svg, но инструмент специальных возможностей по-прежнему отмечал предупреждения для всех дочерних элементов. В этом не должно быть необходимости.

Итак, я думаю, ты в порядке.

person brennanyoung    schedule 19.09.2019

arrow_upward
1
arrow_downward

Элементы с img ролью имеют дочерние элементы презентации для свойства установлено значение true. Таким образом, rect элементам не может быть альтернативного имени.

Вероятно, это связано с ошибкой в ​​этом плагине Firefox.

Обратите внимание, что (что любопытно?) В рекомендациях по доступным именам и описаниям указано, что имя может быть:

генерируется с помощью [...] механизма маркировки основного языка, такого как атрибут alt или title в HTML или элемент desc в SVG.

Итак, в соответствии с этим утверждением вы должны использовать элемент desc. Я не уверен, что это ошибка в документации, поскольку элемент title кажется более подходящим выбором.

person Adam    schedule 19.09.2019

arrow_upward
1
arrow_downward

Я обнаружил, что включение тега <title>Image title</title> в теги <svg role="img"></svg> привело к тому, что FireFox перестал показывать ошибку. Обратите внимание на включение атрибута role в тег svg (как отмечалось в предыдущем комментарии) вместе с любыми другими атрибутами, которые могут вам понадобиться для открывающего тега.

Согласно MDN Web Docs:

Элемент предоставляет доступное краткое текстовое описание любого элемента контейнера SVG или графического элемента.

Итак, как тег alt для элемента <img>. Похоже, что тег <desc> можно использовать для дополнительной описательной информации.

person apmeyer    schedule 15.06.2020

arrow_upward
0
arrow_downward

Это может прийти поздно, но помогает все время.

Поскольку в svg нет текста, включение aria-label="descriptive text here" и alt="svg description here" должно помочь с проверками текстовых меток. Однако, если svg предназначен только для презентационных целей, также помогает использование пустого alt. Это сделано для того, чтобы программы чтения с экрана распознали svg, но не будут описывать изображение (вместо этого они просто скажут изображение или что-то подобное).

person O G A    schedule 24.03.2021