Alt — обязательный атрибут тега <img>. Он появился ещё в 1995 году, в HTML 2.0. Это альтернативное описание для изображений, которые не видят пользователи:

  • из-за медленного соединения;
  • из-за неправильного пути или имени файла в атрибуте src;
  • так как пользуются скринридерами.

Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.

Когда alt-текст нужен

У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге <a>, если у ссылки нет текстового содержимого.

<a href="/courses">
  <img src="keks.jpg" alt="Кекс приглашает на курсы">
</a>

Как правильно писать

  • Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
  • Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
  • Уникально. Не повторяйте текст, который уже есть на странице.
  • Не начинайте со слов «картинка» или «изображение».
  • Отталкивайтесь от окружающего контента.
  • Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.

Примеры использования

Картинка

Динозавры
<img src="ml.jpg" alt="Динозавры">

Так можно описать, если в статье есть текст, который рассказывает о фотографии.

Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:

<img src="ml.jpg" alt="Два динозавра в национальном парке Анза-Боррего на фоне звёздного неба. Один большой, другой маленький">

Ссылка

<a href="/blog">
  <img src="blog.jpg" alt="Перейти на главную страницу блога">
</a>

Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег <a>.

Диаграмма

Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке
<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">

Если текста со статистикой нет, то придётся всю статистику вынести в alt:

<img src="chart.png" alt="Еда — 10%, соседи — 15% ...">

Картинка с текстом

Бесплатные онлайн курсы HTML и CSS

Просто переносим текст в alt:

<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">

Figure и figcaption

Рабочее место Тани

Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:

<figure>
  <img src="image.jpg" alt="Рабочее место Тани">
  <figcaption>Таня ушла на разминку</figcaption>
<figure>

Когда alt-текст не нужен

Когда картинка декоративная и не имеет смысла.

  • Аватарка: имя пользователя и так у нас уже есть.
  • Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
  • Иконки в кнопке.

Как не стоит писать

Если картинка оформительская и не требует alt, то не нужно писать в туда пробел или его аналоги.

Плохие примеры:

<img src="image.png" alt=" ">

<img src="image.png" alt="&nbsp;">

Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).

Что будет, если забыть про alt-текст

Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.

Но иногда бывают картинки, которым не добавляют alt. Например, это поиск «рыжий кот», и в поисковой выдаче показываются тысячи рыжих котов. Смысла указывать alt нет.

Чаще всего в такой ситуации вообще удаляют alt:

<img src="orange-cat-1.jpg">

Но в этом случае некоторые скринридеры начнут читать src, что ещё хуже. Поэтому лучше оставлять пустой alt. Из двух зол выбирают наименьшее.

<img src="orange-cat-2.jpg" alt="">

Искусственный интеллект и alt

ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.

Примеры текстов, сгенерированных искуственным интеллектом

Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».

Абстрактная картина

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.

Alt-текст — капля в море фронтенда

Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −30% на подписку в первую неделю.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Литература