img, image

Как превратить элемент в картинку с помощью WAI-ARIA.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

ARIA-роль структуры документа для одного или нескольких изображений.

В WAI-ARIA 1.3 появится синоним для роли imgimage. Они делают одно и то же, но поддержка img пока лучше.

Роль img или image есть у <img> по умолчанию.

Пример

Секция статьи "Пример"
        
          
          <div role="img" aria-label="Общее описание для всех картинок.">  <img src="picture-1.png" alt="">  <img src="picture-2.png" alt=""></div>
          <div role="img" aria-label="Общее описание для всех картинок.">
  <img src="picture-1.png" alt="">
  <img src="picture-2.png" alt="">
</div>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу role="img". Лучше, чтобы это были семантически нейтральные <div> или <span>. Одно из правил использования ARIA — не перезаписывать роли без необходимости.

В большинстве случаев для одной картинки лучше использовать <img> вместо ролей img или image.

Обязательно добавляйте для элемента с img или image атрибуты aria-label или aria-labelledby. Они нужны для подписи картинки вместо alt. Также для этих ролей можно использовать все глобальные ARIA-атрибуты.

Как понять

Секция статьи "Как понять"

img или image нужны для создания контейнера для одного или нескольких изображений, когда никак не использовать возможности HTML.