Доступность изображений

Изображения отлично привлекают внимание. Но страницы нужно делать так, чтобы ими могли пользоваться все, в том числе люди, которые не видят картинок. Многие слепые и слабовидящие используют программу чтения с экрана: она зачитывает страницу вслух. В этом упражнении мы сделаем наше изображение доступным для них.

Вот изображение, которое мы создали в предыдущем упражнении:

<img src="/learn/html/cats.webp">

Программа чтения с экрана не видит, что на картинке. Для изображения без описания она обычно зачитывает имя файла, что-нибудь вроде «cats точка webp», а это мало что даёт. Поэтому мы добавляем атрибут alt (альтернативный текст) с описанием изображения:

<img src="/learn/html/cats.webp" alt="Шесть фотографий домашних кошек">

Тогда программа зачитает это описание. Хорошее описание коротко говорит о том, что важно на картинке.

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

<img src="/learn/html/ornament.webp" alt="">

У альтернативного текста есть ещё одно применение: браузер показывает его, если изображение не удалось загрузить. Попробуйте, когда напишете описание: сделайте опечатку в имени файла в src, нажмите «Запустить», и вместо фотографии вы увидите своё описание. Потом исправьте имя обратно.