Title и alt: оптимизация картинок

Перевод статьи Dudley Storey, автора блога www.demosthenes.info. Источник

Сеть черпает свою силу в многообразии: и чем удобнее ресурс, тем лучше. Атрибут alt был ранним примером этого, но написание хороших, точных описательных текстов требует знания некоторых правил.

Alt

Атрибут alt представляет собой альтернативное текстовое представление изображения. Если изображение не загружается или заблокировано, значение этого атрибута выводится на экран. Для удобства пользователей текст может переводиться на язык пользователя с помощью сервиса text-to-speech или text-to-Braille. Alt также используется для SEO, так как помогает поисковикам распознавать содержание картинки и определять соответствие вашего сайта поисковому запросу.

Атрибут alt (зачастую ошибочно упоминается как «тег alt») необходим для каждого элемента <img> на вашем сайте. В большинстве случаев самый простой способ составить текст alt – это писать так, будто вы описываете картинку.

Например, фото, находящееся вверху данной статьи может быть описано как
<img src="singel.jpg" alt="Сумрак в Йордане, Амстердам, Северная Голландия">
Но лучше:
<img src="singel.jpg" alt="Ряд домов со светящимися окнами вдоль амстердамского канала">

Общее правило: чем точнее текст описывает, тем лучше.

Исключения Alt: логотипы

Если основной контент изображения – текст, то правила меняются. Изображение, в котором текст, «впечатан» внутрь, например, как это:

…должно иметь атрибут alt, который полностью будет соответствовать тексту на картинке.

<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">

Причина проста: большинство экранных считывателей еще не могут распознать текст, напечатанный в картинке, делая его непонятным для поисковиков и слепых людей. Размещая текстовое описание через значение alt, вы переводите описание и для тех, и для других.

Часто вы можете увидеть скудно написанную разметку:
<img src="logo.gif" alt="Logo">
Не надо так.

Кстати, это хороший повод рассмотреть соответствующую разметку для векторной графики (svg) или разметку для логотипов. Правильно созданный текст в разметке логотипа будет настоящим текстом, таким образом, он будет читаем. Важно знать, что если текст не был воспринят разметкой svg, то семантическая составляющая текста будет утрачена. Альтернативным (возможно, даже лучшим) решением будет сохранить графическую составляющую логотипа в svg, а остальное записать через стилизированную разметку. Конечно, обе версии будут сопоставлены во время загрузки встроенного шрифта.

Пустой alt

Есть 2 условия, когда alt может остаться пустым:

• изображение скудно наполнено, нет информации, которую можно описать;
• изображение подробно описано соответствующим элементом семантической верстки: обычно это <figcaption>.

Но если вы хотите сохранить «вес» страницы, то alt должен быть прописан для всех изображений.
Чтобы оставить атрибут пустым, задайте значение в виде двойных кавычек без пробела: <img src="flourish.png" alt="">.

Также вы можете не задавать значение alt в HTML5: <img src="flourish.png" alt>.

Бывают редкие случаи, когда значение атрибута картинки схоже с ее <figcaption>. В таком случае значение alt будет избыточным и может быть опущено:

<figure>
<img src="рио-ди-сан-барнаба.jpg" alt>
<figcaption>Фотография канала Рио ди Сан Барнаба, Венеция</figcaption>
</figure>

Различия могут быть очень тонкими: alt описывает изображение, тогда как <figcaption> озаглавливает содержание элемента <figure>. В большинстве случаев эти значения будут разными, поэтому оба должны быть представлены:

<figure>
<img src="doge-portrait.jpg" alt="Портрет маслом. Старик в остроконечной шляпе и вышитой мантии">
<figcaption>Портрет Дожа Леонардо Лоредано кисти Джованни Беллини</figcaption>
</figure>

Не путайте alt с title

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

Стиль текста в атрибуте alt

Поскольку читатели будут просматривать картинку в составе общего контента страницы, то и alt стоит прописывать в том же стиле, что и весь остальной текст.

Не пренебрегайте другими форматами

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

P.S. Подробнее о том, как работать с картинками, чтобы они нравились не только поисковикам, но и пользователям читайте в статье.

Правила комментирования блога