Что такое alt текст
Как правильно написать 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.
Есть в SEO некоторые архаичные вещи, которые лично мне совсем не нравятся, но которые я, будучи вебмастером, должен соблюдать.
Один из таких примеров, это альтернативный текст к картинкам, который проставляется при помощи html атрибута — ALT.
Что такое альтернативный текст Alt
Когда-то, очень давно, но в нашей галактике, интернет работал, скажем так, чуть медленней чем сегодня. Да и цена его, была дороже. И что-бы прочитать страницы, в браузерах была функция отключения показа картинок.
К слову сказать, в браузере FireFox, возможность отключения показа картинок убрали еще в 23 версии кажется, при том, что сейчас уже 81 версия.
При отключении этой пользовательской функции, картинки не отображались. Вместо них, отображалось просто место, и чтобы посетитель сайта мог понять, о чем вообще была эта картинка, по html спецификации, использовался альтернативный текст, где вебмастер текстом описывал, что это за картинка и вставлялся этот текст в виде атрибута alt.
Посетитель, заходя на такой сайт, и не видя картинки, видел альтернативный текст, что давало ему представление, о чем собственно, была картинка.
Почему альтернативный текст важен для SEO.
Тем не менее, хотя для пользователей действительно эта функция уже давно не актуальна, но кроме пользователя, эту картинку также видят поисковые системы, и поскольку настоящего зрения у поисковиков нет, то они могут полагаться только на мощь своего искусственного интеллекта.
Но несмотря на все достижения в области искусственного интеллекта за последние годы, по настоящему, поисковики не могут определить, что показано на картинке.
Да, наверное они смогут понять, что на картинке изображен человек или кошка, но вот определить, что на картинке изображен фантастический закат в горах, поисковики не смогут. Точнее говоря, закат поисковики тоже определят, но по прежнему остаётся много картинок, смысл которых поисковики определить не смогут.
Но ведь вы помните, что основная задача поисковиков, это понять о чём статья? Подробнее об этом, я писал в статье — Как работают поисковики Яндекс и Гугл. Если вкратце, то основная задача поисковиков, определить, о чём та или иная статья в интернете и определить, какая статья из всех тех миллиардов страниц в интернете, лучше всего ответит на конкретный запрос обычного пользователя.
Это что-то вроде воплощения знаменитой сказки А.С.Пушкина, в которой говорится — Свет мой зеркальце скажи, да всю правду доложи.
Вот так и поисковики, они должны определить, какая-же из страниц, даст самый лучший ответ на запрос пользователя.
Если с анализом текста всё более-менее понятно, то вот изображения анализировать, поисковикам намного сложнее. И вот тут на помощь приходит альтернативный текст, который обозначается атрибутом Alt.
Видя текст в атрибуте Alt, поисковики лучше понимают, что изображено на картинке. Зная это, Гугл и Яндекс лучше смогут определить, о чем собственно, статья. И вывести соответствующую статью пользователю.
Если же, поисковики не смогут до конца понять, о чем эта картинка, и если при этом, картинки занимают существенную часть содержимого страницы, то они просто не будут хорошо ранжировать эту страницу, а это уже означает, что страница не войдет в топ поисковой выдачи. Точнее, это будет сделать сложнее, и придется загонять статью в топ поисковой выдачи за счет усиления других факторов ранжирования, таких как ссылки, текст, улучшения структуры сайта и тому подобного.
Как проставляется alt.
Вот как выглядит обычный тег для отображения картинки на сайте.
Чтобы добавить альтернативный текст, просто допишите атрибут alt и добавьте в него нужный вам текст.
Как правильно прописать Alt?
Прежде всего, не нужно делать так:
Точнее говоря, так делать можно и даже нужно, но только для картинок, которые не имеют прямого отношения к содержимому страницы. Это в первую очередь, вся графическая реклама, в которой атрибут Alt должен быть либо вообще пропущен, либо быть пустым.
Более улучшенный вариант, но все равно плохой, если вы прописываете альтернативный текст, такой-же, как у тегов Title или h1.
Вы должны хорошо описывать картинку с помощью атрибута Alt.
1. Будьте конкретны
Поскольку альтернативный текст для изображений используется для описания изображения, то он должен быть как можно более конкретным. Цель состоит в том, чтобы люди могли сразу понять, что это за изображение, даже если они его не видят. Мы видели этот пример с отсутствующей картинкой на скриншоте наверху. Вот сама картинка:
А вот текст описания.
2. Переходите прямо к делу
Хотя вы должны стремиться к информативности, вам не нужно писать целый абзац для описания изображения. Большинство программ чтения с экрана читают не более 125 символов альтернативного текста, поэтому вам необходимо учитывать это и сохранять альтернативный текст для изображений четким и кратким.
Постарайтесь сразу перейти к делу и описать только самые заметные элементы изображения, если их слишком много.
Например, вместо краткого текста описания к картинке выше, я мог бы описывать её подробно:
На этой картинке изображена схема идеальной структуры. Она должна включать «бла, бла, бла, и куча текста на пару килознаков».
Вместо этого, я описал эту картинку кратко и по делу.
Вам совсем не обязательно включать описание других элементов картинки, таких как люди на заднем плане, здание или светофор и прочие маловажные детали.
3. Оптимизируйте под ключевые слова.
Альтернативный текст для изображений предоставляет вам еще одну возможность использовать ваши целевые слова, чтобы поднять ценность вашей страницы.
Тут вы можете использовать свой главный ключ и длинный хвост запросов. Обычно, главный ключ я использую под картинку, которая служит миниатюрой статьи. А далее, я стараюсь использовать слова, которые стоят как можно ближе по смыслу к главному ключевому слову.
По сути, при описании картинок, я часто использую LSI фразы.
Но используя альтернативный текст в качестве оптимизации под ключевые слова, не переусердствуйте. Если по смыслу, к вашей картинке не подходят ключевые слова, связанные с темой вашей статьи, то используйте просто качественное описание самой картинки.
Заключение.
Хотя альтернативный текст для изображений вряд ли стоит того, чтобы быть основным направлением ваших усилий в SEO, но про этот элемент не стоит забывать. Да, в SEO есть всего несколько главных факторов, но есть и сотни менее важных факторов ранжирования, которые тем не менее, в сумме очень даже влияют на поисковое продвижение. И если вы не будете заполнять ALT текст, то вполне возможно, это сделают ваши конкуренты и займут ваше место в поисковой выдаче.
Так что, лучше это сделать, тем более, это совсем не сложно.
Поисковая оптимизация изображений: что такое alt-текст и почему он так важен
Если вы тратите много времени на поисковую оптимизацию контента, уделяете особое внимание выбору заголовков, подзаголовков и мета-описаний, стараясь занять первые позиции в поисковой выдаче, следующее изображение должно вас насторожить:
Каким бы не был проделанный вами объем работы в области поисковой оптимизации, скорее всего, еще один немаловажный источник органического трафика все-таки остался без внимания: изображения на вашем лендинге. Как превратить их в генератор трафика? Конечно же, с помощью тега alt.
Посадочную страницу невозможно раскрыть без сопровождающих текст изображений. Например, если предлагаете услуги фотографии, то образцы ваших работ просто необходимы для демонстрации вашего уровня. Если вы продаете облачное ПО, то при помощи скриншотов вы сможете легко объяснить принципы работы в нем.
И самое главное, что делает alt-тег— это позволяет представить все ваши изображения в формате гиперссылок, открывая вашему сайту еще один источник привлечения посетителей.
Содержание статьи
Что такое alt-текст?
Также известный под названиями «alt-тег» и «alt-описание», alt — это тот текст, который вы можете видеть на месте изображения на странице сайта, если оно вдруг не загрузилось, другими словами — словесное описание изображения. Он помогает скринридерам пояснять смысл изображений для слабовидящих пользователей, а поисковым системам — лучше сканировать и ранжировать ваш сайт.
Вот, как выглядит данный атрибут для поисковиков:
Независимо от того, тратите вы время на SEO или нет, оптимизация альтернативного текста изображений — это ваш шанс сделать пользовательский опыт еще более комфортным для посетителей.
Как добавить альтернативный текст к изображениям
В редакторе LPgenerator при нажатии на изображение в теле страницы справа появляется выделяется окно, в котором можно создать или изменить альтернативный текст.
Альтернативный текст автоматически записывается в исходный HTML-код веб-страницы, и в некоторых CMS вы можете редактировать alt-тег изображения прямо там, если вдруг в вашем редакторе иначе это сделать невозможно. Вот пример alt-тега в исходном коде статьи:
При составлении альтернативных текстов для изображений главное — оставаться информативным и конкретным. Но имейте в виду, что это правило может потерять свой смысл, если альтернативный текст не учитывает контекст изображения. Alt-текст может оказаться не к месту в трех разных случаях.
3 ошибки при создании atl-текстов
1. Просто набор ключевых слов
Это пример не самого удачного альтернативного текста:
Что не так? Дело в том, что здесь альтернативный текст представляет собой простой набор ключевых слов, которые дают мало контекста. Эти слова могут быть важны для автора, но не Google.
Приведенный выше альтернативный текст сильно затрудняет для Googlе понимание того, как изображение соотносится с остальной частью страницы или статьи, в которой оно размещено, делая невозможным ранжирование изображения для релевантных низкочастотных запросов (longtail keywords), которые, как правило, вводятся наиболее заинтересованными в поиске пользователями.
Правильнее было бы снабдить изображение таким текстом:
«Сделать landing page за 25 минут бесплатно и с гарантией результата»
2. Номер, дата или другая техническая информация
Этот пример нарушает первое правило написания alt-текста — быть информативным. При этом в подписи к изображению мы видим предложение, которое могло бы стать alt текстом, но автор предпочел указать в теге чисто техническую информацию, которая не несет никакой пользы ни для посетителей, ни для поисковиков.
Важно помнить, что alt-текст, прежде всего, используется в процессе индексации, и в данном случае такое описание равносильно его отсутствию.
Вот еще один пример:
На этом сайте все изображения имеют один и тот же alt-текст.
3. Не учитывает контекст
Хорошо, когда контекст очевиден и подобрать правильное описание не так сложно. Но что делать, если ваше изображение не имеет контекста и вам попросту не на что опереться, чтобы дать ему описание?
В этом случае вам придется обратиться к заголовку статьи или лендинга, на которой размещена картинка. Ниже — несколько хороших примеров альтернативного текста для таких изображений.
Для статьи о дизайне лендингов:
Хорошое описательное предложение, а учитывая то, что картинка опубликована в статье о дизайне лендингов, она поможет поисковикам связать изображение с определенным разделом статьи.
Для страницы, посвященной фрилансерским услугам по созданию лендингов:
Этот текст отлично сочетается с изображением в блоке примеров работ конкретного дизайнера, но в данном контексте в описании неплохо бы указать еще и имя автора.
В этом примере указано имя заказчика лендинга, но, как и в предыдущем случае, не указано название компании, сделавшей дизайн.
Как писать эффективные альтернативные тексты
Альтернативный текст изображения должен быть конкретным, быть обращен к теме статьи или заголовку/блоку лендинга. Если у вас возникают трудности с написанием такого текста, ниже — несколько важных приемов, которые помогут вам с подбором наиболее эффективного варианта альтернативного текста:
Заключение
Итак, прежде чем начинать работу по оптимизации альтернативных текстов вашего лендинга или блога, для начала было бы неплохо провести общий аудит существующего контента и добавить описания в те изображения, которые до сей поры оставались без alt-тега.
Обратите внимание на то, как изменится объем поступающего трафика на те страницы, где вы изменили или добавили описания.
Чем больше изображений вы оптимизируете, тем более заметным будет результат.