В этой небольшой статьи мы рассмотрим базовые подходы к написанию хорошего альтернативного текста для изображений.

<img src="https://image_link" alt="image_attributes"> 

Сначала давайте разберемся, что означает словосочетание “альтернативный текст”

Альтернативный текст, также известный в HTML-верстке, как атрибут alt используется для описания изображения, размещаемого на веб странице.

Альтернативный текст содержит описание картинок для скрин-ридеров и посетителей сайта. Когда пользователь не может насладиться хорошей скоростью загрузки контента, он в первую очередь видит текст, содержащийся в атрибуте alt.

Теперь давайте разберемся, как написать хороший alt для элемента img.

Никогда не забывайте про альтернативный текст

Первое и главное правило: для каждой картинки веб-сайта должен быть определен атрибут alt.

Для аббревиатуры используйте только заглавные буквы

Любую аббревиатуру в альтернативном тексте следует писать только заглавными буквами. Например: “WHO”, “MIT”, “MDN”. В этом случае скрин-ридер будет произносить название правильно: буква за буквой.

Если изображение нерелевантно, оставляйте атрибут пустым

Если картинка не соответствует смыслу сайта, или если вы не желаете предоставлять скрин-ридеру возможность прочитать описание изображения, оставляйте атрибут alt пустым.

<img src="https://image_link" alt="">

Избегайте слов “image of” или “graphic of”

Не начинайте альтернативный текст со слов “image of” или “graphic of”. Это неизбежно приведет к повторениям.

Например:

<img src="https://dog.jpg" alt="Image of a German Shepherd dog">

Будет прочитан, как:

Image of a German Shepherd dog, image

Но если Вы напишите:

<img src="https://dog.jpg" alt="German Shepherd dog">

Текст, прочитанный скрин-ридером будет более благозвучным:

German Shepherd dog, image

Будьте точны в определениях

Убедитесь, что альтернативный текст правильно и однозначно описывает картинку для любых посетителей сайта.

Будьте лаконичны

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

Спасибо за внимание.

Перевод статьи David Asaolu “How to Write Good Alt Text for your Images”.