Доступность в декоративных изображениях или повторяющихся информационных изображениях

Когда вы пишете alt, вы должны иметь в виду несколько вещей. Одна из этих вещей предлагает использовать пустой alt="" когда содержимое изображения является декоративным или содержит повторяющуюся информацию.

Но какая разница между использованием:

<img alt=""
<img aria-hidden="true"
<img role="presentation"

Или все вместе?

<img alt="" aria-hidden="true" role="presentation" src="…" />
Источник

2 ответа

Решение

Короткий ответ:

Все они имеют разные цели. Атрибут image alt действителен только для элементов изображения. aria-hidden предназначен для элементов, которые скрыты для всех пользователей, а роль = презентация вроде пустого атрибута alt для всех элементов - не только для изображений (но имеет меньшую поддержку, чем пустое изображение alt).

Более длинный ответ:

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

Атрибут alt:

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

ария-скрытый:

aria-hidden, как определено в w3c, предназначен для элементов, которые "не видны или не воспринимаются любым пользователем". Это означает, что если зрячий пользователь не может его видеть, он также должен быть скрыт от пользователей, получающих доступ к API доступности. Примером использования может быть случай, когда пользователю нужно нажать кнопку, чтобы отобразить раздел - этот раздел будет скрыт для всех пользователей, а также будет иметь атрибут "aria-hidden", который будет переключаться при изменении его видимости. Следует отметить, что он не всегда используется таким образом - многие люди просто используют его, чтобы скрыть от программ чтения с экрана, хотя это не является целью, определенной в W3C. Источник: https://www.w3.org/TR/wai-aria/states_and_properties

Роль = презентация:

роль = представление определяется в w3c как: "Элемент, неявная собственная семантика роли которого не будет отображаться в API доступности". Это похоже на пустой текст alt, хотя, в отличие от атрибута alt, его можно использовать с различными другими элементами, которые не должны отображаться в API доступности. По сути, он делает то же самое, что и пустой текст alt, но не так широко поддерживается, как пустой атрибут alt (sourece: https://www.w3.org/WAI/tutorials/images/decorative/).

Определение w3c: https://www.w3.org/TR/wai-aria/roles

Почему бы не включить все 3?

Чтобы ответить на ваш последний вопрос, самая большая причина не включать все три в том, что это полное излишество. С пустым атрибутом alt элемент уже будет игнорироваться программами чтения с экрана. Один потенциальный недостаток, связанный с включением role=presentation и aria-hidden, заключается в том, что оба они удалят элемент из API специальных возможностей, что может иметь негативные последствия для пользователей, использующих API с инструментами, которые не являются программами чтения с экрана.

Источник

Когда alt атрибут установлен в пустую строку

От W3C:

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

Вторая часть о резервировании важна, например:

<h1><img alt="" src="logo.gif" />My company name</h1>

Когда вы должны использовать role=presentation

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

Вам не нужно указывать атрибут роли презентации для изображения с пустым alt атрибут как стандартная реализация стандартных браузеров:

Допустимые значения атрибута роли ARIA:
presentation только роль, для img элемент которого alt значение атрибута пустое (alt=""), иначе любое значение роли.

Когда вы должны использовать aria-hidden=true

Используйте его, если вы не хотите предоставлять информацию API доступности, но хотите предоставить ее обычным пользователям.

Зрячие люди могут использовать программу чтения с экрана (неграмотный, слабовидящий, ...), ее следует использовать с осторожностью. Для img тег, это полезно только когда alt не пусто

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

<h1>Come to visit George</h1>
<img alt="Map to reach George" src="map.gif" aria-hidden="true" />
Take the highway A13 direction London.
When you reach London follow A2 highway in direction Liverpool.

Я думаю, что это более полезно для SEO без введения избыточности.

TL; DR

Если вы не хотите предоставлять информацию читателям экрана:

  • Если SEO вызывает беспокойство, используйте не пустой alt с aria-hidden=true
  • В противном случае используйте alt=""
  • img с role=presentation должен иметь пустой alt
  • img с пустым alt иметь неявное role=presentation
Источник
Другие вопросы по тегам