Альт-теги появились еще на заре HTML и создания веб-сайтов. Однако для некоторых людей (включая меня) они никогда не были главным приоритетом.
Давайте изменим это поведение!
И я расскажу вам почему. Как насчет слабовидящих людей, которые не могут видеть то, на что мы смотрим?
Или, предположим, вы находитесь в поездке и у вас на секунду пропал интернет. Вы можете отключить изображения или читать через RSS-ридер, который отключает их для вас.
Некоторые писатели, в том числе и я в прошлом, размещали эти забавные изображения графиков, а под ними – “Как видно на графике выше”.
Да, Крис, но что именно мы должны увидеть в этом графике, если мы не знаем, о чем он?
Именно поэтому теги alt так важны, чтобы помочь людям, которые не могут видеть ваши изображения, понять, на что они должны смотреть.
Примечание: Помните, что это касается не только людей с ослабленным зрением!
Как должен выглядеть тег alt
Во-первых, важно отметить, что мы можем не использовать “picture of” или “image of”, так как программы чтения с экрана уже сообщают об этом пользователю.
Например:
❌: Изображение гоночного автомобиля
✔: гоночный автомобиль
Что же должен описывать оптимальный тег alt?
Ответ прост: посмотрите на картинку так, как будто вы ее не видите.
Какие слова лучше всего описывают картинку?
Иногда вы можете захотеть быть очень конкретным, если это позволяет контекст.
Но в некоторых случаях вам, скорее всего, захочется передать эмоции, запечатленные на фотографии.
Возьмем следующий пример.
Для невизуальных зрителей: мы видим изображение Криса, держащего массивную церковную дверь.
Однако, в зависимости от контекста, это изображение может иметь разные значения.
Сценарий 1: Это киноафиша к новому сезону “Игры престолов”.
В таком случае здесь может быть написано следующее: “Главный герой Ходор держит двери, чтобы не пустить белых ходоков”.
Сценарий 2: Изображение используется в качестве рекламы для недавно отремонтированной церковной двери.
В этом случае alt может выглядеть следующим образом: “Подрядчик держит недавно отремонтированную церковную дверь”.
Эти примеры показывают, что каждый сценарий может иметь совершенно разные атрибуты alt.
Но пока мы думаем об этом, в этом есть полный смысл.
Наши изображения должны улучшать то, что пользователь уже читает, и обогащать его опыт.
Для визуальных читателей контекст изображения часто более очевиден, поэтому, обращаясь к невизуальным пользователям, мы должны максимально помочь им.
Не пишите для SEO
Распространенная ошибка заключается в том, что ваши alt-теги должны быть сосредоточены на ваших ключевых словах.
Не будьте тем, кто так делает!
Оптимизируйте для читателей! Google ценит читателей намного, намного больше, чем ваши SEO-оптимизации.
Он покажет это, если найдет на вашем сайте хороший релевантный контент!
Оптимизировать для пользователя, а не для SEO
Что делать, если изображение чисто декоративное?
Рад, что вы задали этот вопрос. Некоторые изображения имеют чисто декоративное назначение.
Например, простые фоновые изображения или изображения, которые мы добавляем для оформления сайта.
Во-первых, стоит отметить, что мы всегда должны добавлять теги alt. Их отсутствие никогда не будет хорошей ситуацией.
Но, несмотря на это, мы можем иметь пустые alt-теги.
<img src="bg.jpg" alt="" />
Это хорошо, если изображение ничего не добавляет!
Считыватели экрана не будут читать изображение.
Однако небольшой совет: к этим изображениям хорошо бы добавить role="presentation".
Это облегчит понимание того, что пустые теги alt существуют не просто так.
И вы даже можете использовать CSS для демонстрации отсутствующих тегов alt и опускать те, на которых есть этот тег.
А что насчет сложных графиков
Если ваш график очень важен, как, например, поддержка браузера, лучше всего добавить его в виде визуально скрытого элемента таблицы.
Таким образом, программы чтения с экрана все равно смогут прочитать вашу таблицу, что важно для контекста.
Однако это, конечно, требует больших усилий, и, возможно, вы можете выбрать только демонстрацию наиболее важных выводов из графика?
В других случаях вы могли бы дать более описательный текст, поясняющий график.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.