Как правильно написать alt-текст
Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.
Когда alt-текст нужен
Как правильно писать
Примеры использования
Картинка
Так можно описать, если в статье есть текст, который рассказывает о фотографии.
Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:
Ссылка
Диаграмма
Если текста со статистикой нет, то придётся всю статистику вынести в alt :
Картинка с текстом
Просто переносим текст в alt :
Figure и figcaption
Когда alt-текст не нужен
Когда картинка декоративная и не имеет смысла.
Как не стоит писать
Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).
Что будет, если забыть про alt-текст
Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.
Чаще всего в такой ситуации вообще удаляют alt :
Искусственный интеллект и alt
ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.
Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».
С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.
Alt-текст — капля в море фронтенда
Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −30% на подписку в первую неделю.
Нажатие на кнопку — согласие на обработку персональных данных
Руководство по alt-text от слабовидящего веб-разработчика
Эта статья содержит всё, что вам нужно знать об alt-text! Когда их использовать и как идеально их подготовить. Подготовил я, Дэниель, веб-разработчик с частичной потерей зрения, который ежедневно использует скринридер.
Мой опыт с картинками в вебе
Во время сёрфинга в вебе я использую сочетание увелителя экрана и скринридера. Как показывает практика, увеличение экрана удобнее на дисплеях большого размера, а скринридер — на меньших устройствах.
Как и всем остальным, мне попадается в интернете большое количество изображений. При использовании скринридера я завишу от текстового описания картинок — alt-text — которое произносится вслух.
Часто alt-text не помогает, часто это просто потеря времени, потому что не передаёт никакого смысла.
Проиллюстрирую на примере главной страницы The Verge. Вот как она выглядит для зрячих:
А ниже то, что вижу я. Я заменил картинки на текст, который читает мой скринридер:
Не очень помогает, правда?
Вот наиболее типичные ошибки alt-text, с которыми я сталкиваюсь:
Что такое alt-text
Alt-text — это описание изображения, что демонстрируется людям, которые по каким-то причинам не могут увидеть картинку. Среди прочего, alt-text помогает:
Они очень важны! Настолько важны, что в правилах Web Content Accessibility Guidelines (WCAG) они указаны самым первым пунктом:
Любое нетекстовый контент, который демонстрируется пользователю, должен иметь текстовую альтернативу, которая служит эквивалентной цели.
— Правило WCAG 1.1.1
Как добавить alt-text?
В HTML alt-text является атрибутом элемента img:
Большинство систем управления контентом (CMS), вроде WordPress, позволяют ввести alt-text при загрузке изображения:
Соответствующее поле обычно называется “Alt-text”, “Alternative text” или “Alt”, но в некоторых интерфейсах оно именуется как «Описание изображения» или что-нибудь подобное.
Создадим идеальный alt-text!
Вот шаги для создания великолепных текстовых атрибутов.
Опишите изображение
Это может показаться очевидным, но alt-text должен описывать изображение. Например:
«Группа людей на железнодорожной станции»
«Счастливый ребёнок, играющий в песочнице»
«Очередь из пяти человек в супермаркете»
Что не стоит включать в описание:
Содержимое alt-text зависит от контекста
Как описать изображение — зависит от контекста. Позвольте привести пример:
Если бы это изображение было в статье по фотографии, то alt-text мог бы звучать так:
«Чёрно-белая фотография крупным планом человека на улице, лицо в фокусе, фон размыт».
Если изображение находится на сайте о телесериалах, то соответствующий alt-text может быть совершенно иным:
«Звезда сериала Адам Ли напряжённо смотрит через дождь».
Так что пишите максимально осмысленный alt-text для пользователей в том контексте, в котором они находятся.
Будьте лаконичны
Читая предыдущий раздел, вы могли подумать: «Я как зрячий человек вижу на картинке много деталей, вроде того, кто там изображён, как сделан снимок, тип куртки, примерный возраст мужчины и так далее. Почему бы не сделать детальное, длинное описание, так что пользователь с нарушением зрения получит столько же информации, сколько я?»
Рад, что вы спросили!
Если честно, вы можете получить всю необходимую информацию об изображении одним взглядом — именно этого эффекта мы пытаемся достичь для пользователей со скринридерами. Дайте необходимую информацию в описании alt-text, но сделайте его максимально лаконичным и точным.
Один из нескольких случаев, когда уместен длинный alt-text — если вы описываете изображение с важным текстом. В идеале у вас не должно быть изображений с текстом, но иногда приходится их использовать. Например, как на скриншотах или фотографиях знаков.
Но общее правило — сохранять лаконичность и избегать многословности.
Не говорите, что это изображение
Не начинайте alt-text словами «Изображение. », «Фотография. » и тому подобными. Скринридер добавляет это по умолчанию. Так что если вы напишете «Изображение. » в alt-text, то скринридер прочитает «Изображение изображение. », когда пользователь наведёт на него фокус. Не очень приятно.
Единственное, вы можете закончить alt-text сообщением, что это особый вид изображения, например, иллюстрация.
«Пёс прыгает через обруч. Иллюстрация».
Завершение точкой.
Завершайте alt-text точкой. Это позволит скринридеру сделать небольшую паузу после последнего слова alt-text, что более приятно звучит.
Не используйте атрибут title
Во многих интерфейсах есть поле для добавления в тег изображения атрибута title-text рядом с alt-text. Не нужно его использовать! Никто их не использует — они не работают на тачскринах, а на десктопах отображаются, если пользователь наведёт курсор на изображение и ненадолго задержит его там, чего никто не делает. Кроме того, добавление title-text заставляет некоторые скринридеры читать и title-text, и alt-text, что является избыточным. Так что просто не добавляйте title-text.
Когда не следует использовать alt-text
Повторяющиеся изображения в фидах
Представьте, что вы просматриваете фид в твиттере. Каждый раз, когда хотите прочитать новый твит, вам сначала нужно прослушать «Изображение из профиля пользователя ». По-моему, это будет очень раздражать!
Другие примеры фидов:
Иконки с текстом
Рядом с иконками всегда должно быть текстовое описание. Если так, то у иконки не должно быть alt-text. Позвольте объяснить!
В качестве примера посмотрите на кнопки социальных сетей:
Если вы укажете текст в атрибуте alt-text для иконки Facebook, то скринридер произнесёт что-то вроде «Facebook Facebook». Очень избыточно!
Окей, технически это не касается alt-text, но всё равно важно: убедитесь, что у иконки и текста ссылки одинаковый атрибут link, для большего удобства пользователей. Примерно так:
Другая типичная ошибка — это иконки на кнопках меню:
Если на кнопке меню отсутствует текстовая надпись — что, по-моему, очень неудобно для пользователей — тогда нужно добавить к ней alt-text (или, как вариант, описать её функциональность в самом коде, как aria-label). Объясните функцию иконки, например, «Меню». Не пишите «Три горизонтальные линии» или «Основной гамбургер» — к сожалению, это реальные примеры, которые мне встречались.
Если на иконке меню есть надпись, то поле alt-text следует оставить пустым. Я часто встречаю кнопки меню, которые звучат как «Меню меню». Однажды мне даже попался «Гамбургер меню меню». Немного сбивает с толку, вы не находите?
Изображения в ссылках
Обычно изображение с ссылкой сопровождается текстовой ссылкой. Как в этом примере:
В этом случае изображение и ссылка должны иметь одинаковый link-tag в HTML. Поле alt-text можно оставить пустым. Пользователю важно услышать текст по ссылке. Описание alt-text для изображения только отвлечёт, добавив ненужную информацию. Скорее всего, это изображение будет в статье по ссылке, и там уже можно дать хорошее описание в alt-text.
Если вам очень, очень нужно поместить в ссылку изображение без сопутствующего текста, тогда alt-text должен описать, куда ведёт ссылка, а не само изображение.
Декоративные изображения
По возможности, не несущие смысловой нагрузки декоративные изображения лучше публиковать как фоновые изображения в CSS. Наверное, само собой понятно, что для них вообще не нужен alt-text.
Я бы классифицировал как декоративные большинство изображений, которые вы вставляете в текст. Там не нужен alt-text. Например, картинка на заглавной странице Netflix:
Особые случаи
Логотипы в баннере
Логотипы в баннерах почти всегда ссылаются на главные страницы веб-сайтов. По поводу атрибута alt-text в логотипе мнения немного отличаются.
Некоторые говорят, что там следует указывать название компании, тот факт, что это логотип, и направление ссылки. Например, так:
«Axess Lab, логотип, ссылка на главную страницу».
По-моему, это слегка многословно. Слишком много шума! Поскольку мой скринридер уже сказал, что это картинка со ссылкой, то мне кажется, достаточно названия компании. Из того факта, что это картинка, я предположу, что это логотип, а из того факта, что это ссылка — предположу, что она следует конвенциям и ведёт на заглавную страницу.
Масштабируемая векторная графика (SVG) — это формат изображений, который становится всё более популярен в интернете. И он мне нравится! Такие изображения остаются резкими при масштабировании, занимают меньше места и быстрее загружаются.
Есть два основных способа добавить SVG на страницу HTML.
Разве компьютер не может сделать это за меня?
Хотя машинное обучение и искусственный интеллект быстро улучшаются и могут довольно точно описать некоторые изображения, пока они недостаточно хороши в понимании релевантного контекста. Кроме того, машины недостаточно хорошо понимают смысл «краткости» и часто используют слишком много или слишком мало слов.
В реальности Facebook разработал функцию для автоматического описания изображений. Но мне такие описания кажутся слишком обобщёнными. Прямо сейчас одно изображение в моём фиде описано как «Кот в помещении». В реальности на фотографии кот охотится за игрушечной мышью.
Так что извините, вам всё ещё придётся писать атрибуты alt-text самостоятельно!
Alt-текст для SEO: как оптимизировать изображения
Статистика статьи
Показывает, сколько различных веб-сайтов ссылаются на этот контент. Как правило, чем больше сайтов ссылаются на вас, тем выше вы ранжируетесь в Google.
Показывает ежемесячный рассчетный поисковый трафик на эту статью по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3–5 раз больше.
Количество ретвитов этой статьи в Twitter.
Поделиться этой статьей
Но чем он тогда важен? И как его можно использовать, чтобы улучшить поисковую оптимизацию и повысить уровень удобства пользователей?
Из этого руководства вы узнаете:
Чем важен alt-текст?
Alt-текст является важным фактором по четырем основным причинам.
1. Alt-текст повышает уровень доступности
Миллионы людей страдают от нарушений работы органов зрения и могут пользоваться программами для чтения информации с экрана, чтобы потреблять онлайн-контент. Такие программы преобразуют контент на экране, в том числе изображения, в звук.
Изображения без замещающего текста создают определенные проблемы для этих программ, поскольку они не позволяют полноценно передать пользователю содержимое страницы. Обычно программы пропускают такие изображения или, хуже того, зачитывают длинные и бесполезные названия файлов.
Google рассказывает о важности alt-текста для тех, кто пользуется программами для чтения информации с экрана, в своем Руководстве по поисковой оптимизации для начинающих.
2. Alt-текст может улучшить «тематическую релевантность»
Google изучает слова на странице, чтобы определить ее тематику.
К примеру, если на странице упоминаются пудели, лабрадоры и ретриверы, Google поймет, что на ней представлена информация о породах собак.
Как это связано с изображениями?
Дело в том, что иногда контекст «спрятан» в изображениях, которые Google не может распознать.
Использование alt-текста помогает поисковику «увидеть» эти изображения, а значит, лучше понять вашу страницу и ее содержимое.
3. Alt-текст может повысить рейтинг страницы в Google Images
Google Images — вторая по величине поисковая система в мире. Она выполняет обработку 20,45 % всех поисковых запросов в сети Интернет, что больше доли YouTube, Bing и прочих поисковых систем вместе взятых.
Это значит, что у вас есть возможность привлечь трафик с Google Images.
Просто взгляните на количество переходов на блог Ahrefs из Google Images за последние три месяца:
Джон Мюллер из Google говорит, что alt-текст — это важная часть оптимизации для Google Images:
Alt-текст чрезвычайно полезен для Google Images — если вы хотите, чтобы ваши изображения попали в их выдачу. Даже при использовании «ленивой загрузки» вы знаете, какое изображение будет загружено, поэтому как можно раньше добавьте к нему эту информацию и проверьте, как она отрисовывается.
4. Alt-текст служит якорным текстом для ссылок-изображений
Якорный текст — это кликабельный текст ссылки, позволяющей перейти с одной страницы на другую. Google использует его, чтобы лучше понять тематику той страницы, на которую ведет ссылка.
Но не все ссылки являются текстовыми — некоторые закреплены за изображениями.
Если вы все-таки решите использовать изображение в качестве ссылки, приведение для него alt-текста поможет Google больше узнать о странице, на которую вы ссылаетесь. Представьте, что вы пишите якорный текст для текстовой ссылки.
Как добавить alt-текст к изображениям
Просто добавьте атрибут alt в тег в коде HTML.
Изображение с атрибутом alt:
Если вы пользуетесь современной системой управления контентом (CMS), то в ней наверняка можно добавить alt-текст, не забираясь в сам код HTML.
Например, в WordPress, когда вы добавляете изображение к странице или определенной записи, на экране появляется поле для alt-текста:
В других CMS это делается схожим образом.
Вот инструкции для некоторых из наиболее популярных CMS:
Нужно ли добавлять alt-текст ко всем изображениям?
Нет, это распространенное заблуждение.
Если изображение предназначено для декоративных целей и не несет важной информации, добавлять к нему alt-текст не следует.
Например, на некоторых сайтах для разделения контента используются пиктограммы:
Они нужны только лишь для красоты, поэтому добавлять к ним alt-текст не нужно. Такой текст будет только раздражать посетителей с программами для чтения информации с экрана, не добавляя при этом никакой «ценности для SEO».
То же самое относится к фоновым или стоковым изображениям наподобие этого:
Наличие alt-текста «ванна и свеча» не принесет пользы читателям с нарушениями зрения, поскольку эта информация им ни к чему. Лучше будет, если программа для чтения полностью проигнорирует это изображение.
Но есть один важный момент…
Если изображение не требует наличия alt-текста, тогда лучше всего добавить пустой атрибут alt. Это нужно сделать, поскольку некоторые программы для чтения информации с экрана при отсутствии alt-текста читают названия файлов, в то время как большинство из них пропускает пустой alt-текст.
Вот как это должно выглядеть:
Как составить хороший alt-текст
Alt-текст — это не квантовая физика. Четко выполняйте приведенные ниже пять рекомендаций, и все будет хорошо.
Кроме того, не забывайте добавлять alt-текст к кнопкам на используемых формах. Иначе программы для чтения могут пропустить их, и часть пользователей не сможет должным образом взаимодействовать с вашим сайтом.
Примеры хорошего и плохого alt-текста
Давайте проверим, насколько хорошо мы поняли приведенные выше правила, рассмотрев несколько примеров.
Плохо: 
Нормально:
Хорошо:
Идеально:
Плохо: 
Нормально:
Хорошо:
Идеально:
Плохо: 
Нормально:
Хорошо:
Идеально:
Обратите внимание на то, что в последнем примере в текст включен номер модели. Это хорошее решение, особенно для изображений на страницах товаров в интернет-магазинах.
Как найти и исправить проблемы с атрибутами alt
Существует множество служб, которые могут просканировать ваш сайт и найти недостающие атрибуты alt; один из них — Site Audit от Ahrefs.
Но отсутствие alt-текста — это не обязательно проблема, ведь он требуется не для всех изображений.
К примеру, взгляните на эти ссылки с отсутствующими атрибутами alt:
Даже по названиям ясно, что для них alt-текст не нужен. Это декоративные изображения, а значит, нам хотелось бы, чтобы программы для чтения их пропускали.
Поэтому вместо того, чтобы прочесывать свой сайт и корпеть над каждым недостающим атрибутом alt (а их обычно довольно много), полезнее проверить и улучшить alt-текст на тех страницах, у которых уже есть трафик.
На это есть две веские причины:
Итак, какова же последовательность действий:
Шаг 1. Определите страницы с наибольшим естественным трафиком
Воспользуйтесь сервисами Google Analytics, Google Search Console или отчетом «Top pages» («Самые популярные страницы») в Site Explorer от Ahrefs.
Шаг 2. Проверьте свои атрибуты alt
Установите бесплатное расширение для Chrome Alt Text Tester, откройте свою наиболее посещаемую страницу и активируйте данное расширение.
Расширение будет отображать alt-текст при наведении курсора на изображение.
Если атрибут alt отсутствует, расширение сообщит об этом.
Проверьте alt-текст для нескольких изображений на странице. Вскоре у вас появится представление о том, где они оптимизированы хорошо, где — плохо, а где вообще не оптимизированы.
Например, понадобится всего несколько секунд, чтобы пролистать эту статью и убедиться в том, что все изображения в ней хорошо оптимизированы…
…или сделать обратный вывод для этой страницы на сайте The Mirror:
Шаг 3. Сделайте то же самое с другими страницами
Выполните ту же процедуру для самых посещаемых страниц вашего сайта. В ходе работы вы поймете, хорошо ли оптимизирован alt-текст на вашем сайте, или над ним еще нужно поработать.
Это не должно занять много времени, поскольку большинство сайтов получают основную долю трафика всего от нескольких страниц.
Например, 51 % месячного естественного трафика блогу Ahrefs приносят всего десять записей…
…что позволяет нам легко и быстро проверить и оптимизировать alt-текст для наиболее часто посещаемых страниц.
Напоследок
Улучшение alt-текста является крайне важным аспектом, однако это не единственный пункт в программе поисковой оптимизации изображений. Также нужно оптимизировать названия файлов, использовать адаптивные изображения, предусмотреть «ленивую загрузку» и сделать многое другое.
