Как добавить ALT-тег к изображениям – Справочный центр Vigbo
ALT (альт) – это атрибут, позволяющий добавить текстовое описание содержимого картинки. ALT-теги используются для двух целей: увеличение рейтинга страницы в поисковых системах в режиме поиска картинок и отображение текстового описания в случае, когда загрузка изображения невозможна или слишком медленна у пользователя.
Виджет Фотография
1. Добавьте виджет Фотография на страницу или наведите курсор мыши на уже добавленный ранее виджет.
2. Откройте настройки виджета Фотография, кликнув по значку шестеренки в верхнем правом углу виджета.
3. Укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.
Виджет Фотогалерея
1. Добавьте виджет Фотогалерея на составную страницу или выберите уже добавленный виджет.
2. Чтобы добавить ALT-теги к изображению в галерее, наведите курсор мышки на область фото и нажмите иконку, которая появится при наведении.
3. В открывшемся окне укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.
Добавление ALT-тегов доступно для галереи в виде ленты, грид, галереи с одним фото.
Alt-тег для изображений товаров
По умолчанию в alt-теге для изображений товаров используется название товара. Но вы можете изменить это описание на другое.
1. Перейдите к редактированию нужного товара в разделе Магазин > Товары
2. Откройте вкладку Фотографии и наведите курсор на область фото. Нажмите иконку карандаша, которая появится при наведении.
3. В открывшемся окне укажите текст — описание изображения в поле Альтернативный текст (тег alt) и сохраните изменения.
Правила заполнения alt-тегов
1. В атрибут ALT нужно писать текстовый эквивалент того, что изображено на фотографии.
Описание должно совпадать с содержимым самой картинки.
2. Длина текста не должна быть меньше 3–4 слов, но не более 250 символов с пробелами
3. Рекомендуется использовать ключевые слова из тега h2 или заголовка страницы, но только в том случае, если они похожи по смыслу.
4. Не используйте в тексте большое количество ключевых слов, так как поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено.
Атрибут ALT (HTML тега img )
Alt (альт) – это атрибут тега img, позволяющий внести текстовое описание содержимого картинки. В HTML этот тег используется для добавления альтернативного описания изображения. Отсюда и такое название (alt – сокращенно от alternative). Теги альт используются для двух целей:
- ранжирование в поиске по картинкам для получения дополнительного трафика;
- показ текстового описания в случае, когда загрузка изображения невозможна или слишком медленна.
Ранжирование по картинкам
Известный факт, что в поисковиках «Яндекс», Google и др. помимо органической, есть и другие виды выдачи. Одной из них и является выдача по картинкам.
Многие веб-мастеры пренебрегают данным разделом поиска и не стремятся к попаданию в топ. И это большая ошибка. Миллионы пользователей ежедневно ищут материалы среди изображений. Для ресурсов, находящихся в топе, это дополнительный источник трафика. Чтобы картинка попала на как можно более высокие позиции, у нее должен быть грамотно прописан тег alt. Именно на него смотрят поисковики при ранжировании данного раздела выдачи. Следовательно, к альтернативному описанию предъявляются следующие требования.
- Не должен превышать 200–250 символов с пробелами. Оптимальный вариант – 5-6 слов.
- Обязан быть релевантным запросу пользователя.
- Описание должно совпадать с содержимым самой картинки.
- В тег alt желательно вписать ключевое слово/фразу, которое содержится в заголовке страницы title или в названии статьи h2.
- Альт должен быть только у контентных картинок. У фона и элементов интерфейса данный атрибут должен оставаться пустым.
При соблюдении всех вышеописанных требований ваши изображения станут более заметными для поисковых систем. Проработка тега альт является неотъемлемой частью внутренней SEO-оптимизации сайта. Но непосредственно на результаты органической выдачи он не влияет.
Альтернативное описание
Помимо попадания в топ выдачи по картинкам, альтернативное описание изображений служит для дополнительного информирования пользователей, у которых не загружаются медиафайлы. Это может быть связано с отключением загрузки картинок в браузере или с медленным интернет-соединением. Причины разные. Но img alt всегда должен быть прописан, чтобы у таких пользователей была возможность понять, о чем тот или иной графический контент.
Как заполняется
В HTML alt является лишь атрибутом, несмотря на то, что все его привыкли называть тегом.
Тегом в данном случае является img и записывается он следующим образом:
[img alt=”текст”]
[a href=»/index.php»][img src=»images/home.png» alt=»Вернуться на главную страницу»][/a]
Так выглядит alt, когда изображение представлено в виде ссылки.
Что такое атрибуты Alt и Title для картинок и как их правильно составлять
Сейчас трудно представить сайты без изображений, тем более интернет-магазины и каталоги товаров. Ведь это отличный способ привлечь внимание посетителей, показать товар «лицом» и сподвигнуть потенциальных клиентов к совершению целевых действий: покупке товара или заказу услуги. Подробнее о том, для чего еще нужны картинки и на каких страницах они должны быть, можете прочитать в нашей статье «Подбор и оптимизация изображений для сайта».
Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).
Что такое атрибут Alt для картинок
Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).
Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:
А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:
Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.
Как правильно составить атрибут Alt для картинок
- Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов.
- Обязательное условие – использование ключевых запросов.
- Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
- Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
- Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.
Атрибут Title для изображений
Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:
В html-коде заполненный атрибут Title для картинок выглядит так:
Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.
Как правильно составлять Title для картинок
- Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
- Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
- Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.
Не следует писать в нем то, что не имеет к картинке никакого отношения.Пример правильного заполнения атрибутов Alt и Title для тега <img>
Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.
При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».
Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».
Трудности при заполнении Alt и Title
-
Несколько фотографий одного и того же товара
Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.
-
Один и тот же товар, но разного цвета
В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».
-
Большое количество товаров
Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.
Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений.
Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.
Что такое теги alt и title. SEO картинки — как оптимизировать изображение
Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
SEO атрибуты изображений – alt и title
Иллюстрации, фотографии, схемы и прочие графические изображения помогают «разбавить» сухой текст и сделать контент более наглядным. Однако графика предназначена не только для того, чтобы ею любовался пользователь.
Изображения можно задействовать в качестве одного из элементов поискового продвижения. Для этой цели предназначены специальные теги alt и title, которые применяются в качестве атрибутов для основного тега <img>.
Атрибут alt представляет собой описание изображения, состоящее из нескольких слов, считывает поисковый робот при индексации страницы. Если у пользователя в браузере выключена функция поддержки графики, то на месте иллюстрации будет отображаться содержимое тега <alt>. Текст для данного атрибута не должен быть слишком длинным.
Атрибут title – это описание, составляемое для посетителя. Пользователь увидит его, если на некоторое время задержит курсор мыши на картинке. Как правило, для заполнения этого тега используют развернутое описание из 1-2 предложений.
Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA
Пример кода изображения с хорошей оптимизацией
<img src=".
./img/dom_u_morja.jpg" width="300" height="195" title="домик у моря" alt="аккуратный домик у моря с окнами на побережье">
Зачем нужны вспомогательные атрибуты тега img
Разумеется, графическое изображение корректно загрузится даже в том случае, если у тега <img> отсутствуют атрибуты title и alt. Но в этом случае возможности SEO картинки останутся незадействованными. Затратив немного времени на составление альтернативного описания, вебмастер сможет:
- передать необходимые сведения поисковому роботу;
- получить дополнительных посетителей на сайт;
- повысить лояльность читателей.
Поисковики умеют распознавать уникальность графических изображений, но они не способны анализировать их тематическую принадлежность. Поэтому если вебмастер желает, чтобы робот отнес картинку к той или иной категории, то он должен составить текстовое описание для тега alt.
Помимо обычного поиска, Яндекс и Google располагают сервисом «картинки». Составляя оптимизированные описания alt title для изображений, вебмастер повышает шансы на то, что интернет пользователи смогут найти его сайт с помощью этих сервисов. Следовательно, некоторый прирост трафика обеспечен.
Как использовать alt в SEO продвижении
Чтобы привлечь дополнительных посетителей по продвигаемым запросам, вебмастер должен составить для alt и title описания с вхождением ключевых фраз. Текст, предназначенный для тега alt, может выглядеть следующим образом: «прилагательное + ключевая фраза». Для атрибута title рекомендовано использовать расширенное описание «прилагательное + ключ + дополнение».
К примеру, есть ключ «недвижимость Москвы». Для данной фразы можно составить описание alt «элитная недвижимость Москвы», а также title «элитная недвижимость Москвы в Центральном административном округе». В качестве ключа для оптимизированного описания изображения наиболее подходят фразы, в которых присутствуют слова «фото», «иллюстрации» и т.
п.
Как прописать тег ALT — советы и примеры
Тема сегодняшней статьи – SEO — оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:
Что такое атрибут ALT?
ALT – это атрибут, в котором содержится альтернативный текст изображения. Атрибут показывается, когда в браузере отключен показ изображения, но в стандартных настройках вы его не увидите.
Так же, как и Title и Description он учитывается поисковой системой
До и после загрузки изображения в браузер
Синтаксис html описания картинки
</head><body>
<img src=”image.jpg” alt=”Описание картинки image” />
</body>
</html>
В атрибут Alt тега <img> входит собственно описание картинки.
Последовательность атрибутов не особо важна. В данном примере я подчеркнул обязательные атрибуты для тега img.
Читайте в нашем блоге: Как удалить дубли на сайте
Как правильно прописывать описание картинки
Прежде чем прописывать Title я расскажу вам частые ошибки, которые замечаю на сайтах.
Пустые атрибуты ALT и TITLE. Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.
Не соответствие изображения и атрибутов. Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.
Переоптимизация. Часто встречающаяся проблема, можно ставить прям в пример как не нужно делать.
Оптимизаторы надеясь получить заветный трафик прописывают по несколько ключевых слов в атрибут “alt” и ждут, когда позиции в выдаче среди картинок начнут расти. Вы должны понимать, что данный текст будут читать люди, которые оценивают несколько картинок и если там сплошь спам никто не перейдет по ссылке. Добавлять коммерческие слова “купить, заказать, цена, стоимость, наименование города” не рекомендуется.
Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.
А как же нужно прописывать теги для картинок?
Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.
Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.
Вхождение ключевых слов. Собственно, из-за чего атрибут ALT и стоит указывать. Пишите ключевое слово понятным для пользователя текстом.
Например:
alt=”Ремонт компьютеров в Чебоксарах”
Уникальные атрибуты для каждой картинки. Так же важная составляющая, самая встречающаяся проблема у SEO-оптимизаторов. На примере я вам покажу как ее решить.
Карточка товара содержит много картинок
Пример бренда Ситилинк, где указан один и тот же товар с одинаковым ALT
Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:
Похожие товары“Сплит-система HYUNDAI H-AR6-07H Вид 1”
“Сплит-система HYUNDAI H-AR6-07H Вид 2”
Пример как прописывает ALT у похожих товаров MediaMarkt
Помимо картинок товара, есть у вас на сайте имеются элементы: похожие товары, с этим товаром чаще смотрят и так далее.
Данный вид картинок не стоит сбрасывать со счетов и SEO оптимизировать их прописав ALT и Title. Причем стоит уделить время прописать конкретно: бренд, модель, номер товара, все важные параметры, которые люди могут вбивать в поиск.
Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.
Расположение изображения – как можно ближе к тексту, который содержит ключевые слова. Вот почему многие оптимизаторы учитывают этот фактор и стандартная схема расположения картинок выглядит так:
Читайте в нашем блоге: Хлебные крошки — что это такое?<h3> Текст заголовка с ключевым словом</h3>
<img alt=”Product 1”/>
<p>Дальнейшее описание</p>
Уменьшение веса изображения.
Размер картинки играет ключевую роль, ведь если она будет весить очень много, что даже будет тормозить скорость загрузки сайта это скажется на ранжировании всего сайта. Да-да бывало и такое!
Формат изображений. Рекомендую использовать проверенные временем и не запрещенные поисковыми системами – JPG, PNG, GIF.
Подпись под картинкой
Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:
- Указать ключевые слова. Вхождение ключевиков в подпись обязательно, так как данный текст сыграет роль в ранжировании всей страницы;
- Указать какой-либо факт/преимущество о картинке.
Например, у вас картинка динамиков Iphone 7.
В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT
Яндекс открытым текстом говорит, что ALT важен.
Далее в хелпе Яндекса наткнулся на очень интересный ответ:
“Как поместить мою картинку на первое место?»
При ранжировании картинок учитывается прилегающий к картинке текст. Чем точнее описание изображения соответствует запросу пользователя, тем выше вероятность того, что картинка будет показана на первой странице результатов поиска.”
Дополнительные факторы картинки влияющие на SEO
Текст под картинкой несет гораздо большую пользу для поисковика, чем собственно сам ALT.
Ранжирование картинок в Google
Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.
Самые значимые факторы для Google
Давайте пробежимся по главным факторам для Google.
Фотографии хорошего качества – это должно быть понятно, итак. Никому не будут интересны размытые фотографии или просто плохого качества.
Здесь скорее качество картинки играет на ее кликабельность, некий CTR.
Отдельные страницы для каждой картинки – интересная мысль, но честно редко встречаю такие сайты. Проблематичным становится оптимизировать: интернет-магазины, одностраничные сайты, сайты каталоги, где хранится большое количество изображений.
А что по поводу атрибута Title
Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом <Title>). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.
Во всяком случае он несет гораздо больше пользы чем мета-тег keywords, который я писал совсем недавно.
Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?
Что такое alt тег? — TemplateMonster
Поисковые системы и пользователи хотят получить как можно больше информации о публикуемом изображении.
Поэтому, чтоб помочь им понять, что за изображение вы публикуете, рекомендуется использовать alt тег.
Alt тег (альтернативный текст) — это слово или фраза, которые могут быть вставлены как атрибут в документе HTML (язык гипертекстовой разметки), чтоб сообщить посетителям веб-сайта природу или содержимое изображения. Альт тег появляется в пустом поле, которое обычно содержит изображение. Такие tags полезны, когда ссылка на изображение недоступна из-за разбитого или измененного URL-адреса или какой-либо другой проблемы.
Атрибут alt начинается с символьной последовательности alt =, а затем содержит текст alt в кавычках. Например, атрибут alt = «девочка и робот» может отображаться в теге изображений HTML для фотографии девочки с роботом.
В большинстве браузеров наведение указателя на изображение, содержащее атрибут alt, приведет к тому, что текст alt появится в маленьком поле под указателем.
Синтаксис
Пример
Как применять альт теги?
Что такое альт тег понятно, но как его правильно использовать? При выборе тега важно убедиться, что он максимально информирует зрителей об изображении, используя как можно меньше слов.
Если текст слишком длинный, может потребоваться слишком много места для размещения внутри прямоугольника изображения.
Атрибуты alt всегда должны находиться внутри тегов изображений. Если автор веб-страницы не хочет, чтоб в поле с изображением был помещен блок alt, в тег изображения должен быть вставлен пустой атрибут alt.
Значение альт тегов для SEO
СЕО очень важно для любого сайта, особенно для лендинг пейдж. Что такое alt тег для SEO? Это хорошее место для размещения релевантных ключевых слов для улучшения поисковой оптимизации вашего сайта (SEO). Однако, практика вставки большого количества ключевых слов в веб-контент — не оправдывает ожиданий. Согласно Google, такая практика не только неэтична, но и неэффективна. Поэтому сильно усердствовать, заполняя все альт теги ключевыми словами, не рекомендуется. Все должно быть в меру, чтоб поисковая система не расценивала это как спам.
Не можете найти ответ на вопрос?
что это такое за тег
Атрибут Alt – что это? Это специальное расширение, созданное для тега img в HTML.
Он предназначен для прописывания альтернативного текста для изображений на странице. Содержащаяся в атрибуте информация отображается только в двух случаях:
- при отключении загрузки графического контента;
- при плохом качестве или низкой скорости подключения к Интернету.
То есть тег Alt помогает пользователю понимать контекст графического контента, когда загрузить его не удалось.
Почему нужно прописывать атрибут Alt
Сегодня поисковые системы умеют индексировать не только текстовое, но и графическое наполнение страниц. Однако с определением релевантности картинок алгоритмы справляются не так хорошо. Поэтому тематика такого контента во многом определяется с помощью тега Alt. Информация из него анализируется для формирования выдачи поиска по картинкам в Google и «Яндексе». Следовательно, если добавить в поле Alt небольшой релевантный текст, то можно получить дополнительный источник трафика, которого никогда не бывает слишком много. Текст для HTML-атрибута Alt могут увидеть пользователи, поэтому при его составлении нужно не забывать про читабельность и полезность. Для справедливости нужно отметить, что на позиции сайта в стандартной органической выдаче атрибут «альт» не влияет.
Как правильно заполнить Alt
Чтобы получить максимальный эффект от оптимизации этого атрибута, стоит придерживаться следующих рекомендаций.
- Оптимальная длина Alt – это 4-6 слов с общим объемом не более 200 символов. Более длинные тексты в этом поле поисковые системы игнорируют.
- Описание должно быть релевантным тематическому содержанию графического контента. К примеру, нет смысла подписывать картинку с велосипедом «красивый щенок играет».
- Постарайтесь внедрить в атрибут Alt ключевые слова из заголовка и h2, если они имеют тематическое соответствие с изображением.
- Избегайте переспама и нечитаемых сочетаний тематической лексики.
- Графическое наполнение для элементов дизайна нужно убирать в CSS-спрайты. Если это не сделано, то не нужно заполнять их поля Alt.
- Необязательно придумывать уникальные описания для похожих картинок, расположенных на одной странице. К примеру, если создается обзор топ-10 велосипедов, то к условной фразе «горный велосипед» можно просто добавить цифры (1, 2, 3, 4 и т. д.) для индивидуализации.
Теперь вы знаете, что такое атрибут Alt для тега img. Некоторые считают его незначительным. Но если вы самостоятельно продвигаете сайт, то стоит потратить время на заполнение, чтобы получить дополнительный трафик.
Другие термины на букву «A»
Все термины SEO-ВикипедииТеги термина
Как оптимизировать замещающий текст и текст заголовка • Yoast
Йост де ВалкЙост де Валк — основатель и директор по продуктам Yoast. Он интернет-предприниматель, который незадолго до основания Yoast инвестировал и консультировал несколько стартапов. Его основная специализация — разработка программного обеспечения с открытым исходным кодом и цифровой маркетинг.
Добавление изображений к вашим статьям побуждает людей читать их, и хорошо подобранные изображения могут также поддержать ваше сообщение и обеспечить вам хороший рейтинг в результатах поиска изображений.Но вы всегда должны помнить о том, чтобы давать своим изображениям хорошие атрибуты alt : альтернативный текст усиливает сообщение ваших статей с помощью пауков поисковых систем и улучшает доступность вашего веб-сайта. В этой статье объясняется все об атрибутах alt и title, а также почему вы должны их оптимизировать.
Содержание
Есть ли у вас оранжевая отметка для ключевой фразы в атрибутах alt в Yoast SEO? Прочтите, как сделать эту пулю зеленой.
Что такое атрибуты alt и атрибуты заголовка?
Это полный тег изображения HTML:
Атрибуты alt и title изображения обычно называют тегом alt или тегом alt и заголовком. Но технически это не теги, это атрибуты. Альтернативный текст описывает, что изображено на изображении, и его функции на странице. Поэтому, если вы используете изображение в качестве кнопки для покупки продукта X, в замещающем тексте должно быть написано: «кнопка для покупки продукта X».
Тег alt используется программами чтения с экрана, то есть браузерами, используемыми слепыми и слабовидящими людьми.Эти программы чтения с экрана сообщают им, что на изображении, читая тег alt . Атрибут title отображается как всплывающая подсказка при наведении курсора на элемент. Таким образом, в случае кнопки с изображением заголовок изображения может содержать дополнительный призыв к действию. Однако это не лучшая практика.
Каждое изображение должно иметь альтернативный текст. Не только для целей SEO, но и потому, что слепые и слабовидящие люди иначе не будут знать, о чем изображение. Атрибут title — , а не .Более того, в большинстве случаев добавлять его не имеет смысла. Они доступны только для пользователей мыши (или других указывающих устройств), и единственный случай, когда атрибут title равен , требуется для доступности, — это теги
Alt-теги предоставляют текст , альтернативный для изображения для поисковых систем и тех, кто использует программы чтения с экрана для доступа к веб-странице. Первоначальная цель и использование альтернативного текста заключались в том, чтобы помочь сделать изображения доступными для слепых и людей с ослабленным зрением.
Проще говоря, они представляют собой текстовое описание каждого изображения, которое четко описывает то, что на нем изображено.
Они являются частью HTML-кода в теге изображения и выглядят следующим образом:
.
Альтернативный текст — это описательное содержимое, которое находится в атрибуте alt, присвоенном тегу изображения.
Альтернативный текст может помочь повысить эффективность SEO вашего сайта за счет добавления дополнительных сигналов релевантности на веб-страницу и помочь Google лучше понять содержание изображения и повысить его рейтинг.
Но многие ошибаются, и вам не придется слишком далеко смотреть, чтобы найти страницу, на которой все изображения используют один и тот же замещающий текст — точное совпадение с основным целевым ключевым словом страницы.
Существуют практические правила, которым вы должны следовать при оптимизации замещающего текста изображения.
Создание описательных тегов alt не должно быть сложной задачей. Лучше не задумываться над этим слишком много и руководствоваться содержанием изображения.
Часто написание отличного замещающего текста означает использование здравого смысла для описания того, что показывает изображение.Мы можем разделить это всего на три передовых правила, которым вы должны следовать.
Альтернативный текст всегда должен описывать содержание изображения как можно более подробно.
Чем более конкретным вы можете быть при описании изображения, тем лучше, поскольку это поможет ему занять место в поиске картинок Google и даст контекст относительно того, как оно соотносится с содержанием вашей страницы.
Альтернативные теги — не место для спама по ключевым словам с точным соответствием, и их следует использовать для точного описания того, что показывает изображение.
Альтернативные теги должны быть абсолютно релевантными.
Попробуйте написать замещающий текст, описывающий изображения таким образом, чтобы он соответствовал теме страницы, на которой они находятся, особенно когда изображение более общее по своей природе и не такое конкретное, как другие.
Не используйте основное целевое ключевое слово вашей страницы в качестве тега alt для каждого изображения на странице.
Всегда пишите уникальный замещающий текст, который описывает конкретное содержимое изображения, а не повторяет содержимое другого.
Но как на практике выглядит хорошо оптимизированный замещающий текст? Давайте напишем один для этого изображения двух котят:
Описательный, релевантный и уникальный тег alt может выглядеть так:
alt = "два милых рыжих котенка спят с клубками шерсти"
Это является описательным для поисковых систем и программ чтения с экрана, включая ключевые слова.
На некоторых платформах веб-сайтов уже настроены параметры альтернативного текста; вам просто нужно получить к ним доступ.
Если вы используете WordPress, очень легко добавить замещающий текст к вашим изображениям.
Просто щелкните изображение в окне редактора, и вы увидите поле для этого на вкладке «Параметры изображения».
Также можно щелкнуть изображение из библиотеки мультимедиа, и здесь вы также увидите параметры.
Если вы используете Shopify, вы можете добавить замещающий текст как к изображениям тем, так и к изображениям продуктов.
Чтобы оптимизировать замещающий текст на изображениях продуктов, перейдите к Продукты> Все продукты и щелкните список продуктов, который нужно отредактировать.
На странице сведений о продукте щелкните элемент мультимедиа и найдите страницу предварительного просмотра мультимедиа. Теперь вы можете щелкнуть, чтобы добавить замещающий текст.
Чтобы добавить замещающий текст к изображениям тем, зайдите в Интернет-магазин > Темы и щелкните, чтобы настроить тему вашего магазина.
Вы увидите меню разделов в левой части страницы, где вы можете щелкать блоки изображений, а оттуда — отдельные изображения.
Вы увидите текстовое поле, в которое можно добавить замещающий текст.
Добавить замещающий текст к изображениям в магазине Magento действительно просто.
Для этого щелкните в каталоге > Продукты, выберите продукт, к которому вы хотите добавить замещающий текст, и перейдите к разделу «Изображения и видео».
Щелкните изображение, и вы можете редактировать замещающий текст.
Кредит изображения: 121 eCommerce
Не так давно вы не могли добавить замещающий текст к изображениям в магазине Wix. Но в последние годы платформа инвестировала ресурсы в устранение распространенных проблем с SEO, и теперь возможно редактирование альтернативного текста.
Вы можете добавить замещающий текст к изображениям в окне редактирования, щелкнув то, к которому вы хотите добавить замещающий текст, и открыв параметры настроек.
Отсюда вы увидите вариант «Что на изображении?» и здесь вы можете добавить свой альтернативный текст.
Нередко можно увидеть, что оптимизация изображений упоминается как один из основных способов улучшить показатель PageSpeed вашего сайта при использовании инструмента Google PageSpeed Insights.
Скорее всего виноваты большие изображения, и это имеет смысл.
Для загрузки изображений большего размера требуется больше времени, а это, в свою очередь, замедляет загрузку вашей страницы.
В этом руководстве вы можете узнать больше о том, как улучшить свой PageSpeed.
Оптимизация изображений должна выходить за рамки простого добавления тегов alt.
Есть ряд вещей, которые вы можете сделать, чтобы улучшить общую органическую производительность вашего сайта, а также оптимизировать изображения для более высокого ранга в Поиске картинок Google.
Многие проблемы возникают из-за того, что вы просто загружаете необработанные изображения на ваш сайт, не приложив сначала немного усилий — никогда не было хорошей идеей.
Вот 7 самых эффективных советов по расширенной оптимизации ссылок, которые вы можете использовать:
Google публикует руководство по своим собственным передовым методам работы с изображениями, и один из самых простых выводов из этого — убедитесь, что вы используете описательные имена изображений.
В качестве примера используйте « jordan-air-1-mid-front.jpg лучше, чем IMG00353.JPG ».
Когда вы экспортируете изображения с камеры или смартфона (или даже делаете снимок экрана), им присваиваются общие имена файлов.Не загружайте изображение с именем, указанным по умолчанию. Вместо этого дайте ему описательное имя, которое помогает придать контекст тому, что он показывает, и разделяйте слова тире, а не подчеркиванием.
Сделайте эту задачу частью вашего контрольного списка при загрузке изображений.
Если вы уже загрузили изображения на страницу, обновите имена файлов, чтобы они были описательными. Это не займет много времени и стоит того.
Другая распространенная проблема с изображениями заключается в том, что размер файла изображения в пикселях намного превышает размер изображения, используемого на вашем сайте.
Например, основная камера iPhone X создает изображения размером 4032 x 3024 пикселей.
Но допустим, максимальная ширина этого изображения на вашем сайте составляет 600 пикселей.
Разница в размере файла между изображением шириной 4032 пикселей и шириной 600 пикселей будет значительной, а использование нескольких изображений, размер которых превышает размер их отображения, может быстро привести к значительному увеличению размера файла страницы.
Обязательно увеличьте размер изображений до максимальных отображаемых размеров.
Если вы используете WordPress, вы можете использовать такой плагин, как «Изменить размер изображения после загрузки», чтобы помочь вам в этом. В противном случае работает изменение размера изображений в Photoshop, а также использование такого инструмента, как Canva.
Вам также следует убедиться, что вы адаптивно масштабируете изображения с помощью CSS
Один из самых простых способов уменьшить размер файла ваших изображений — это изменить их размер до максимального размера экрана, но это не единственный способ.
Фактически, это снова то, что Google рекомендует в своем руководстве по оптимизации изображений:
Для достижения наилучших результатов поэкспериментируйте с различными настройками качества для ваших изображений и не бойтесь снижать качество — визуальные результаты часто очень хорошо, и экономия файлов может быть довольно большой.
Как уменьшить размер файлов изображений?
Используя один из трех рекомендованных Google инструментов с открытым исходным кодом:
Но если вы не знакомы с использованием подобных инструментов или хотите более быстрое веб-решение, вы можете использовать такой инструмент, как Optimizilla, который позволит вам сжимайте ваши изображения.
Или, если вы используете WordPress, попробуйте плагин Smush.
Если вы серьезно относитесь к тому, что Google обнаружит все изображения на вашем сайте и заставит их работать в Поиске картинок Google, вам следует создать специальную карту сайта, которая включает URL-адреса всех изображений.
Проще говоря, создание карты сайта с изображениями увеличивает вероятность того, что ваши изображения будут отображаться в результатах поиска, и хотя вы можете ссылаться на изображения в существующей карте сайта, обычно имеет смысл создать специальную карту, которую могут использовать поисковые системы.
Вот пример, который дает Google, чтобы помочь вам понять формат, который вам нужно использовать.
При создании карты сайта изображения есть одно ключевое отличие от создания карты сайта, которая включает ваши веб-страницы.
Как говорит Google, «карты сайта изображений могут содержать URL-адреса из других доменов, в отличие от обычных карт сайта, которые обеспечивают междоменные ограничения. Это позволяет вам использовать CDN (сети доставки контента) для размещения изображений».
И это хорошо подводит к пониманию того, почему вы должны размещать изображения в CDN.
Чаще всего весь веб-сайт размещается на одном сервере.
Но давайте представим сценарий, когда веб-сайт размещен в США, но пользователь посещает его где-то в Европе.
Ресурсы, такие как изображения, должны будут перемещаться дальше к пользователю в Европе, что замедлит время загрузки страницы.
CDN (сети доставки контента) работают, кэшируя изображения вашего веб-сайта на нескольких серверах в разных местах по всему миру, а это означает, что они могут быть доставлены пользователю из ближайшего к нему местоположения.
Популярные CDN включают Cloudflare, Fastly, KeyCDN и Amazon CloudFront.
Вы можете легко настроить CDN на WordPress с помощью плагинов, таких как W3 Total Cache, или для получения дополнительных указаний вы найдете полезные руководства по интеграции от каждого поставщика, например, от Cloudflare.
Мы также рекомендуем вам ознакомиться с нашим руководством по обязательным методам SEO для CDN.
Мы не можем игнорировать тот факт, что изображения обычно являются активами на странице с самым большим размером файла и, следовательно, причиной более низкой скорости сайта.
Мы просто не можем обойтись без изображений; это не вариант, потому что они слишком важны для обеспечения хорошего взаимодействия с пользователем.
Но мы можем использовать отложенную загрузку, чтобы отложить загрузку изображения браузером до тех пор, пока оно не понадобится.
Ленивая загрузка просто означает, что ресурсы не загружаются до тех пор, пока они не понадобятся. Это означает, что страница загружается, когда пользователь впервые заходит на нее, намного быстрее. И это используется не только для изображений; таким образом можно загрузить такие ресурсы, как JavaScript.
Подумайте об этом так — если пользователь никогда не прокручивает до второй половины страницы, эти ресурсы никогда не будут загружены. И это приносит заметные улучшения производительности.
Если взглянуть, опять же, на то, что Google говорит по этому поводу, наряду с предоставлением ленивой загрузки в качестве рекомендации в PageSpeed Insights:
Ленивая загрузка может значительно ускорить загрузку на длинных страницах, которые содержат много изображений ниже сгиба, загружая их по мере необходимости или когда основное содержимое завершило загрузку и рендеринг.
Чтобы узнать, как реализовать отложенную загрузку на своем сайте, прочтите это руководство.
Вы часто будете видеть, что Google PageSpeed Insights рекомендует использовать кеширование браузера.
Проще говоря, кеширование браузера — это когда файлы сохраняются браузером посетителя, что означает, что ресурсы загружаются быстрее при следующем посещении страницы.
Когда вы посещаете страницу, изображения загружаются и затем отображаются в браузере. Без кеширования браузера, когда в следующий раз этот пользователь посетит страницу, все это нужно будет снова загрузить.Но при кешировании браузера они уже будут сохранены, что означает, что страница загружается намного быстрее.
Кэширование браузера заметно влияет на сайты, где пользователи часто повторно посещают одни и те же страницы.
Подробнее о том, как Google рекомендует использовать кеширование, можно узнать здесь.
Если вы используете WordPress, один из популярных плагинов кеширования может помочь вам быстро реализовать это. Если нет, то это руководство от GTmetrix поможет вам в этом.
Google недавно объявил, что они собираются выпустить обновление Page Experience Update в какой-то момент в 2021 году.
Это обновление будет учитывать ряд существующих факторов ранжирования, включая штраф за безопасный просмотр, штраф за навязчивые межстраничные объявления, HTTPS как фактор ранжирования, обновление для мобильных устройств, обновление Page Speed и Core Web Vitals.
Если вы пропустили объявление, это, по сути, означает, что, как определено в Search Engine Land: «При прочих равных условиях это обновление означает, что Google с большей вероятностью повысит рейтинг ваших страниц, если они обеспечат удобство для пользователей.«
Но как это связано с оптимизацией изображений?
Во-первых, вы заметите, что Core Web Vitals является одним из факторов, которые будут приняты во внимание, и это включает LCP — самую крупную Contentful Paint. По сути, это показывает, насколько быстро выглядит страница; когда пользователь считает, что страница загружена.
LCP рассчитывается Google по времени отрисовки самого большого элемента контента на странице, и это часто изображения.
CLS (совокупное изменение макета) еще один Core Web Vital, и это то, что происходит, когда контент продолжает перемещаться, даже когда страница кажется полностью загруженной.Проще говоря, это можно оптимизировать, добавив атрибуты размера в ваши изображения (и видео).
Но, наконец, мы должны помнить, что обновление Page Experience Update также учитывает скорость страницы, и мы видели выше, каким образом изображения могут повлиять на это.
Теперь мы рассмотрели, как вы можете оптимизировать изображения вашего сайта, но как вы можете найти проблемы, которые уже существуют на вашем сайте?
Вы можете использовать инструмент аудита сайта SEMrush, чтобы выделить эти проблемы.Вкладка «Проблемы» аудита вашего сайта, пожалуй, самый быстрый способ начать работу, демонстрируя следующие проблемы:
Неработающие изображения ухудшают взаимодействие с пользователем; вам следует уделять первоочередное внимание исправлению любых изображений, которые не отображаются.
Инструмент аудита сайта четко выделит все битые изображения на вашем сайте, чтобы вы могли либо обновить неправильные URL-адреса, либо заменить изображение.
Аудит также выделит все поврежденные внешние образы, и рекомендуется заменить это изображение, учитывая, что вы не будете контролировать источник.
Мы рассмотрели важность оптимизированного замещающего текста для ваших изображений, и отчет об аудите сайта будет содержать список всех тех, у кого на вашем сайте их в настоящее время нет.
Это в конечном итоге упрощает работу по добавлению замещающего текста, давая вам список для работы с каждой страницей.
Если вы потратите время на правильную оптимизацию изображений, это может заметно повлиять на посещаемость вашего сайта из Поиска изображений, а также улучшить взаимодействие с пользователем за счет более быстрой загрузки.
И давайте не будем забывать, что оптимизация имен файлов изображений и alt-тегов также помогает придать контекстуальную релевантность остальной части вашей страницы, в результате улучшая органическую видимость страницы.
Многие оптимизаторы поисковых систем не обращают внимания на оптимизацию изображений, но с обновлением Google Page Experience, которое выйдет в следующем году, сейчас лучшее время для того, чтобы расставить приоритеты.
ОБНОВЛЕНИЕ: С 5 августа 2020 года вы можете использовать все форматы изображений, поддерживаемые Google Image, включая BMP, GIF, JPEG, PNG, WebP и SVG, в структурированных данных.Узнайте больше здесь.
Как: написать хороший замещающий текст
Что такое замещающий текст и почему он важен?
«Альтернативный текст» — это сокращение от «альтернативного текста». Это краткое письменное описание изображения, которое дает смысл этому изображению, когда оно не может быть просмотрено по какой-либо причине.
Хорошо написанный альтернативный текст важен для доступности вашего сайта и его поисковой оптимизации (SEO).
Доступность
- Он считывается программами чтения с экрана вместо изображений, позволяя получать доступ к содержимому вашего изображения слепым или людям с нарушениями зрения
- Это может быть полезно для людей с определенной сенсорной обработкой и / или неспособность к обучению
- Отображается вместо изображения в браузерах, если файл изображения не загружен или если пользователь решил не просматривать изображения.
SEO
Поскольку хороший альтернативный текст придает семантическое значение и описание изображения, он используется поисковыми системами для выдачи результатов поиска. Думая об этом по-другому; хороший альтернативный текст дает поисковым системам больше — и лучше — информации для ранжирования вашего сайта; так что они поставят его выше.
Чем более вдумчиво и полезно вы описываете все своего контента для пользователей, тем легче это будет понять роботам поисковых систем.
Знаете ли вы… Не только ваш веб-сайт контролирует замещающий текст изображения. Вы также можете добавить замещающий текст к изображениям, которые вы загружаете в Twitter .
Альтернативный текст не отображается в самом твите, но люди, использующие вспомогательные технологии, такие как программы чтения с экрана и дисплеи Брайля, будут иметь доступ к письменному описанию. Это отличная функция доступности, которая, кажется, не так часто используется в этом секторе.
(Вы можете проверить, есть ли у изображения в Твиттере замещающий текст или нет, проверив код 🤓)
Советы по написанию «хорошего» замещающего текста
Добавление полезного замещающего текста к изображениям — один из самых простых способов сделать свой веб-сайт более доступный.Но это не всегда легко освоить — и может нанести вред доступности, если все сделано неправильно. Нет альтернативный текст часто лучше, чем плохой (т. Е. Раздражающий или бессмысленный) замещающий текст.
Вот несколько советов, которые помогут вам понять это правильно:
1. Будьте конкретны и кратки
Опишите содержание изображения без редактирования. Говорите то, что видите, и не делайте предположений об этнической принадлежности или поле; о том, что происходит вне кадра; о мотивации испытуемого и т. д.
Одно из лучших предложений, которые я слышал, — подумать, как бы вы вкратце описали изображение по телефону .
Обычно достаточно нескольких слов; хотя иногда необходимо полное предложение. Имейте в виду, что программы чтения с экрана могут обрезать замещающий текст длиной около 125 символов, поэтому лучше придерживаться этого предела.
2. Никогда не начинайте с «Изображение…» или «Изображение…»
Для человека или машины будет очевидно, что то, к чему они обращаются, является замещающим текстом.
Представьте, насколько неприятно было бы использовать программу чтения с экрана на странице с большим количеством изображений и прочитать: «Изображение театра» «Изображение передней части дома» «Изображение внешних указателей» «Изображение кассовые сборы »« Образ зрительного зала »« Образ сцены »… а-а!
Однако — это хорошо, чтобы помочь людям понять контекст, поэтому объяснение типа изображения — например, выстрел в голову, иллюстрация, диаграмма, снимок экрана — может быть полезным.
3. Экономно используйте ключевые слова
Если при описании изображения вы можете разумно включить одно или два ключевых слова: отлично. Это поможет с вашим SEO. Но только если делать это честно и экономно.
Поисковые системы не могут распознавать контекстуально «плохой» (т. Е. Бесполезный) замещающий текст; но вы можете оказаться в заниженном рейтинге за наполнение ключевыми словами. Google может сказать! Итак, ваше основное внимание должно быть сосредоточено на конкретном и лаконичном описании любых изображений, требующих альтернативного текста.
4.Включите текст, являющийся частью изображения
Если текст включен как часть изображения, не забудьте расшифровать его как часть вашего описания. Если только не , это означает повторение…
5. Не повторяйся
Альтернативный текст не нужен , если он повторяет то, что уже на странице. Например, смежный заголовок. Или, если «изображение» события — это тщательно продуманный заголовок, и вы уже находитесь на странице мероприятия — нет необходимости добавлять заголовок вашего шоу в качестве альтернативного текста.Почему? Потому что это уже есть в заголовке страницы.
6. Не добавляйте замещающий текст к «декоративным» изображениям.
«Иллюстративные» изображения — это такие вещи, как фотографии вашего места проведения или пресс-кадры из шоу. Они помогают передавать информацию в контексте. «Декоративные» изображения включают такие вещи, как разделители страниц или фирменную графику. Они заставляют вещи выглядеть красиво или визуально разбивают контент на странице. Они не имеют никакого контекстного значения или смысла, поэтому не помогут людям лучше понять страницу, если им предоставлен альтернативный текст.
В идеале любые декоративные изображения должны быть включены в ваш код, а не добавлены в качестве «содержания». Однако, если их нужно загрузить в виде изображений, можно не добавлять замещающий текст — программы чтения с экрана просто пропустят их, что нам и нужно в этом сценарии.
Плохо: Мы приближаемся к морде бурого медведя — иногда известного как гризли — величественно смотрящего вдаль. Возможно, она голодна или заметила угрозу?
Если вам нужно сказать это много, добавьте это как часть текста на страницу.Используйте короткий замещающий текст. И помните — не делайте никаких предположений .
Плохо: медведь, бурый медведь, гризли, медведь гризли, млекопитающее, плотоядное животное
Прочтите это вслух. Это бесполезно — и Google это не понравится.
Хорошо: Бурый медведь
Это нормально, но вы можете описать изображение более четко.
Хорошо: Крупный план морды медведя
Это дает четкое представление о том, что изображено на изображении, всего в нескольких словах и не делает никаких предположений.(Я не совсем уверен, что это за медведь 🤷)
Плохо: Знак
Это действительно бесполезно — что означает «знак»? Это инструкция по добавлению подписи? Язык знаков? Знак зодиака? Лучше не иметь альтернативного текста.
Плохо: еда на вынос, на вынос, рыба с жареным картофелем, рыба, чипсы, магазин, еда, фастфуд
Прекратите набивать ключевые слова!
Хорошо: Знак «Убери»
Неплохо, но можно было бы лучше…
Хорошо: Знак «Рыба и чипсы на вынос»
Четкое описание изображения, включая текст с вывески, но не вдаваясь в лишние, бесполезные детали. нам не нужен дополнительный текст «Также много других блюд и напитков», чтобы четко понимать изображение.
Плохо: Комнатное растение на подоконнике
Что в этом плохого? Описательно, понятно, коротко…? Повторяется подпись — не надо!
Хорошо: {ничего}
С заголовком, который хорошо описывает это, отсутствие альтернативного текста не является хорошим замещающим текстом для этого изображения.
WebAIM: альтернативный текст
Введение
Добавление альтернативного текста к изображениям — это первый принцип веб-доступности.Это также один из самых сложных в реализации. Интернет изобилует изображениями с отсутствующим, неправильным или плохим альтернативным текстом. Как и многое другое в веб-доступности, определение подходящего, эквивалентного альтернативного текста часто является вопросом личной интерпретации. В этой статье на примерах будет представлена наша опытная интерпретация правильного использования альтернативного текста.
Важно
Также см. Нашу статью об изображениях для получения дополнительной информации о доступности изображений.
Основы альтернативного текста
Альтернативный текст представляет собой текстовую альтернативу нетекстовому содержимому веб-страниц. Мы будем обсуждать альтернативный текст только для изображений, хотя эти принципы могут быть применены к медиа, апплетам или другому нетекстовому веб-контенту.
Альтернативный текст выполняет несколько функций:
- Он читается программами чтения с экрана вместо изображений, позволяя содержание и функции изображения быть доступными для людей с зрительными или определенными когнитивными нарушениями.
- Он отображается вместо изображения в браузерах, если файл изображения не загружен или если пользователь решил не просматривать изображения.
- Он обеспечивает семантическое значение и описание изображений, которые могут быть прочитаны поисковыми системами или использованы для последующего определения содержимого изображения только на основе контекста страницы.
Ключевой принцип заключается в том, что компьютеры и программы чтения с экрана не могут анализировать изображение и определять, что оно представляет. Как разработчики, пользователю необходимо предоставить текст, который представляет СОДЕРЖАНИЕ и ФУНКЦИЯ изображений в вашем веб-контенте.
Альтернативный текст может быть представлен двумя способами:
- В атрибуте
altэлементаimg. - В контексте или окружении самого изображения.
Это означает, что атрибут alt (иногда называемый тегом alt , хотя технически это неверно) не единственный механизм для предоставления содержимого и функции изображения. Эта информация также может быть предоставлена в тексте рядом с изображением или на странице, содержащей изображение.В некоторых случаях, когда эквивалент не может быть представлен лаконично, может быть предоставлена ссылка на отдельную страницу, которая содержит более подробное описание содержимого изображения.
Важно
Термин альтернативный текст , используемый в этой статье, относится к текстовому эквиваленту изображения, независимо от того, где находится этот текст. Это относится не только к атрибуту alt тега изображения. Альтернативный атрибут будет использоваться при ссылке на сам атрибут, который часто, но не исключительно, содержит альтернативный текст .
Каждое изображение должно иметь атрибут alt . Это требование стандарта HTML (возможно, с некоторыми исключениями в HTML5). Изображения без атрибута alt , скорее всего, недоступны. В некоторых случаях изображениям может быть присвоено пустое значение атрибута alt (например, alt = "" , иногда альтернативный текст называется «null»).
Контекст — это все
При определении подходящего альтернативного текста для изображений контекст решает все.Альтернативный текст для одного изображения может сильно отличаться в зависимости от контекста и окружения самого изображения. Возьмем, к примеру, следующее изображение Джорджа Вашингтона:
Альтернативный текст для этого изображения может сильно измениться в зависимости от контекста, как показано ниже.
Примечание
Чтобы лучше всего представить эти принципы альтернативного текста, большинству изображений в этой статье был предоставлен альтернативный текст «пример изображения». Однако содержание изображений обычно представлено в контексте страницы.
Пример 1
Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».
Какой альтернативный текст будет подходящим для изображения в Примере 1?
- «Образ Джорджа Вашингтона»
- «Джордж Вашингтон, первый президент США»
- Достаточно пустого атрибута
alt(alt = ""). - «Джордж Вашингтон»
Первый шаг при определении подходящего альтернативного текста для изображения — решить, представляет ли изображение контент и имеет ли изображение функцию . В большинстве случаев изображение будет иметь функцию только в том случае, если оно содержится в ссылке (или является активной точкой карты изображения или кнопкой). Определить, представляет ли изображение контент и что это за контент, может быть намного сложнее. Если контент, который передает изображение, представлен в тексте в окружающем контексте изображения, тогда может быть достаточно пустого атрибута alt .В приведенном выше примере контент, представленный изображением, должен информировать пользователя о том, что это Джордж Вашингтон. Изображение не имеет функции, потому что это не ссылка и на него нельзя щелкнуть.
Давайте рассмотрим некоторые важные правила, касающиеся атрибута alt .
Важно
Атрибут alt обычно должен :
- Будьте точны и эквивалентны при представлении того же содержимого и функции изображения.
- Будьте лаконичны. Это означает, что правильное содержание (если есть контент) и функция (если есть функция) изображения должны быть представлены настолько лаконично, насколько это необходимо. Обычно требуется не более нескольких слов, хотя редко могут быть уместными короткие предложения.
- НЕ является избыточным или не предоставляет ту же информацию, что и текст в контексте изображения.
- НЕ ИСПОЛЬЗУЙТЕ фразы «изображение»… «или» графика … «для описания изображения. Обычно пользователю очевидно, что это изображение. И если изображение передает контент, обычно нет необходимости, чтобы пользователь знал, что это изображение, которое передает содержание, а не текст. Если тот факт, что изображение является фотографией или иллюстрацией и т. д., является важным содержанием, может быть полезно включить его в альтернативный текст.
Исходя из этих правил, вариант D ( alt = "Джордж Вашингтон" ), вероятно, будет лучшим альтернативным текстом в этом случае.Вариант А без необходимости описывает изображение как изображение. Вариант B предоставляет дополнительную информацию, которая не представлена непосредственно на изображении, а также является избыточной для содержимого, представленного позже в тексте. Вариант C (без атрибута и alt ) не подходит, потому что изображение передает контент, который непосредственно не представлен в окружающем контексте. Несмотря на то, что окружающий текст указывает на то, что он относится к Джорджу Вашингтону, визуальные пользователи могут сказать это непосредственно по содержимому изображения — поэтому, если изображение передает контент, ему следует дать альтернативный текст.
Пример 2
Джордж Вашингтон
Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».
Каким будет соответствующий атрибут alt для изображения в примере 2?
- «Джордж Вашингтон»
- Достаточно пустого атрибута
alt(alt = ""). - «Изображение»
- Для изображения не требуется атрибут
alt.
В этом случае содержимое изображения представлено в окружающем содержимом, поэтому вариант B ( alt = "" ) является лучшим выбором. Вариант А был бы лишним. Вариант C предоставляет постороннюю и бесполезную информацию. Вариант D (без атрибута alt ) никогда не будет правильным выбором — каждое изображение должно иметь атрибут alt .
Пример 3
Джордж Вашингтон
Каким будет соответствующий атрибут alt для изображения в примере 3?
- Достаточно пустого атрибута
alt(alt = ""). - «Запись в Википедии Джорджа Вашингтона»
- «Подробнее»
- «Джордж Вашингтон»
В этом случае изображение также является ссылкой, поэтому у него есть функция. Всякий раз, когда изображение находится внутри ссылки, функция изображения должна быть представлена в альтернативном тексте, который также находится внутри ссылки. В этом случае в ссылке, описывающей функцию, нет смежного текста, поэтому он должен быть представлен в атрибуте alt .В результате вариант D («Джордж Вашингтон»), вероятно, является лучшим выбором. Хотя слова «Джордж Вашингтон» в атрибуте alt являются избыточными в следующем тексте, в этом случае избыточность необходима для адекватного описания функции.
Вариант А не подходит. Изображение, которое является единственным элементом ссылки, никогда не должно иметь отсутствующего или пустого атрибута alt . Это связано с тем, что программа чтения с экрана должна прочитать ЧТО-ТО, чтобы идентифицировать ссылку.Программы чтения с экрана могут считывать имя файла изображения или URL-адрес страницы, на которую ведет ссылка, что может оказаться полезным или бесполезным. И помните, что ссылка может быть прочитана вне контекста окружающего текста, например, когда пользователь перемещается по ссылкам на странице. Вариант B предоставляет контент, который недоступен только через изображение (т. Е. Вы не можете определить ссылки изображения на Википедию, просто взглянув на него). Вариант C не дает адекватного описания функции, особенно вне контекста.
Весь этот пример также можно было бы значительно улучшить, поместив и изображение, и текстовую подпись в одну ссылку:
В этом случае и содержание, и функция ссылки и изображения представлены внутри ссылки, поэтому изображению можно присвоить alt = "" , чтобы избежать избыточности.
По возможности избегайте использования «ссылка на …» или «щелкните это изображение, чтобы …» или аналогичных формулировок в атрибуте alt . Ссылки идентифицируются программами чтения с экрана как ссылки и должны быть визуально очевидны для зрячих пользователей.
Пример 4
В этой картине художник Эмануэль Лойце использовал свет, цвет, форму, перспективу, пропорции и движение для создания композиции.
Какой атрибут alt будет наиболее подходящим для изображения в примере 4?
- «Джордж Вашингтон»
- «Картина Джорджа Вашингтона»
- «Картина Джорджа Вашингтона, пересекающего реку Делавэр»
- «Классическая картина, демонстрирующая использование света и цвета для создания композиции.«
- «Картина Джорджа Вашингтона, пересекающего реку Делавэр. Кружащиеся волны окружают лодку, где величественный Джордж Вашингтон смотрит вперед из шторма и в лучи света через реку, ведя свои осторожные войска в бой».
Как и раньше, мы должны определить, представлено ли содержимое изображения в окружающем контексте. В данном случае это не так (по крайней мере, не полностью). Изображение не находится в ссылке, поэтому нет функции.Но этот образ представляет собой гораздо более сложное исследование, и лучший ответ не может быть адекватно определен в ограниченном контексте, который нам был дан. Тем не менее, давайте рассмотрим возможные варианты.
Вариант А («Джордж Вашингтон»), вероятно, неадекватно описывает содержание изображения. Тот факт, что на картине изображен Джордж Вашингтон, не обязательно имеет значение в этом контексте. Вариант B («Картина Джорджа Вашингтона») может быть адекватным, но не дает особого дополнительного содержания.Однако может быть уместным описать изображение как картину, а не как фотографию или другой тип изображения. Вариант C предоставляет дополнительную информацию, которая может помочь пользователю идентифицировать сам контент. Помните, что альтернативный текст предназначен не только для слепых. Многие зрячие пользователи смогут идентифицировать конкретную рассматриваемую картину по этому описанию, тогда как «Джордж Вашингтон» сам по себе не будет достаточно описательным. Вариант D может быть подходящим, если целью изображения является представление определенной художественной техники, а содержание самого изображения не имеет значения.Вариант E также может быть подходящей альтернативой, если подробное изучение картины необходимо, но оно слишком длинное и многословное, чтобы быть полезным — такой текст лучше использовать в качестве текста на веб-странице.
Как видите, здесь нет одного правильного ответа. Лучший альтернативный текст будет зависеть от контекста и предполагаемого содержания изображения.
Функциональные образы
Изображения часто используются не только для предоставления контента, но и для обеспечения важных функций, таких как навигация.
Пример 5
Изображение «Продукты» является частью панели навигации.
Какой атрибут alt будет наиболее подходящим для навигационного изображения «Продукты» в примере 5?
- «Продукция»
- «Ссылка на товары»
- Изображение не передает контент, поэтому (
alt = "") будет достаточно.
В данном случае вариант А — лучший ответ. Он обеспечивает как содержание, так и функцию изображения.На изображении отображается слово «Продукты», а также ссылка на страницу продуктов на сайте. Изображение будет идентифицировано как находящееся внутри ссылки, поэтому «Ссылка на» не требуется, что делает вариант B плохим выбором. Поскольку изображение — единственный объект в ссылке, alt = "" никогда не подходит. Когда изображение содержит только текст, отображаемый текст обычно может использоваться как альтернативный текст.
Пример 6
Перейдите на следующую страницу, чтобы прочитать о президентстве Джорджа Вашингтона.
Какой атрибут alt будет наиболее подходящим для изображения синей стрелки в примере 6?
- «следующая»
- «следующая страница»
- «Президентство Джорджа Вашингтона»
- «Продолжить президентство Джорджа Вашингтона»
Опять же, это пример, на который нет однозначного лучшего ответа. Фактически, в этом примере, вероятно, может быть уместен любой из вариантов.Вариантов A и B, вероятно, будет достаточно в большинстве случаев, если пользователю будет ясно, что в статье несколько страниц. Вариант C очень четко представляет функцию ссылки, но не указывает, что ссылка ведет на следующую страницу в серии. Вариант D может быть лучшим решением, поскольку он представляет функцию ссылки и сообщает, что она является частью серии страниц. Как указывалось ранее, определение наиболее подходящего альтернативного текста зависит от индивидуальной интерпретации, исходя из более широкого контекста рассматриваемого изображения.Описание этого изображения («стрелка») не подходит. Возможно, лучшим решением было бы разместить текст «Следующая страница» или аналогичный рядом с изображением и внутри ссылки, и в этом случае изображению можно было бы присвоить alt = "" .
Пример 7
Какой атрибут alt будет наиболее подходящим для изображения значка в примере 7? Обратите внимание, что значок находится внутри ссылки.
- «Заявление о приеме на работу»
- «PDF-файл»
- «Значок PDF»
- Содержание изображения представлено в контексте, поэтому (
alt = "") подходит.
Обратите внимание, что изображение находится внутри ссылки. Если бы его не было в ссылке, то текст или мог бы быть другим. В этом случае, поскольку изображение предоставляет дополнительную информацию о функции ссылки, важно, чтобы оно находилось внутри самой ссылки и читалось вместе со ссылкой. Это очень важно, потому что ссылки часто доступны вне контекста из их окружения.
Вариант А («Заявление о приеме на работу») дублирует окружающий текст, поэтому это не лучший выбор.Вариант B — лучший выбор (хотя, возможно, будет достаточно даже более лаконичного «PDF») — он четко предоставляет содержимое, которое представлено изображением — ссылка на файл PDF. Функция («Загрузить заявление о приеме на работу») представлена в тексте ссылки, поэтому ее не нужно снова включать в атрибут alt . Вариант C («значок PDF») действительно описывает само изображение, поэтому не подходит для данного контекста. В другом контексте может быть важно, чтобы пользователь знал, что это изображение действительно является значком.Вариант D (пустой или текст) не предоставляет важную информацию, которую представляет изображение.
Здесь важно отметить, что если бы значок сам был ссылкой на документ, альтернативный текст должен обеспечивать полную альтернативу содержания и функции комбинации ссылка / изображение. Что-то вроде «Скачать заявление о приеме на работу в формате PDF». Самого по себе «формата PDF» будет недостаточно, особенно если есть несколько документов со ссылками такого рода.В этом случае пользователь программы чтения с экрана, переходящий по ссылкам на странице, услышит: «Формат PDF, формат PDF, формат PDF …». Как правило, если одно и то же изображение используется на странице несколько раз, чтобы ссылки на разные места, альтернативный текст внутри ссылки должен указывать на различия.
Декоративные изображения
Декоративные изображения не представляют важного содержания, используются для макета или неинформативных целей и не отображаются в ссылке. Почти во всех случаях разделители и декоративные изображения должны иметь пустые значения атрибутов alt ( alt = "" ).
Пример 8
Текст содержимого здесь.
Текст нижнего колонтитула здесь.
Каким будет соответствующий атрибут alt для изображения горизонтального разделителя в примере 8?
- «декоративная строчка»
- «Начало нижнего колонтитула»
- «разделитель»
-
alt = ""хватит
Поскольку изображение не передает контент и не находится внутри ссылки, вариант D является наиболее подходящим выбором.Описание изображения не подходит.
Примечание
Когда изображение используется только в декоративных целях, часто лучше удалить изображение из содержимого страницы и добавить его в качестве фонового изображения с помощью CSS. Это полностью устранит необходимость в альтернативном тексте и удалит изображение из семантического и структурного потока страницы.
Пример 9
Наш бизнес обещает лучший сервис на планете.Наша команда профессионально обучена, чтобы предлагать отличное обслуживание клиентов на протяжении всего процесса переговоров по контракту.
Удовлетворение потребностей клиентов является нашим главным приоритетом и гарантировано, или ваши деньги вернутся.
Каким будет соответствующий атрибут alt для изображения в примере 9?
- «рукопожатие»
- «Бизнесмены пожимают друг другу руки для заключения контракта»
-
alt = ""хватит - «Мы гарантируем профессиональные услуги»
При анализе этого примера определите, представляет ли изображение важный контент.В этом случае я бы сказал, что это не так. В современной практике в Интернете многим таким изображениям дается описательный альтернативный текст , даже если изображения не содержат полезного содержимого. Вариант C ( alt = "" ), вероятно, будет наиболее подходящим в этом случае, потому что изображение не передает релевантный или важный контент. Варианты A и B описывают изображение, но не передают эквивалент того, что передает само изображение — что в данном случае является ничем или, возможно, только эмоциональным настроением или чувством.Другими словами, изображение в основном декоративное. Вариант D явно неверен, хотя стоит отметить, что дополнительная информация часто вводится в текст alt , чтобы предоставить дополнительную информацию или предоставить дополнительные ключевые слова для поисковых систем. Такая практика не является подходящим использованием альтернативного текста.
Примечание
Во многих случаях вы можете задать вопрос: «Если бы я не мог использовать это изображение, что бы я поставил на его место?» для определения подходящего альтернативного текста.
В приведенном выше примере маловероятно, что фотография рукопожатия будет заменена текстом, поэтому, вероятно, достаточно alt = "" .
Расширенные изображения
В некоторых случаях определение альтернативного текста может быть более трудным. Со всеми изображениями пользовательское тестирование и тестирование в программах чтения с экрана и текстовых браузерах может помочь вам определить наиболее подходящий метод для реализации альтернативного текста.
Кнопки с изображением формы
Кнопки изображения формы должны иметь атрибут alt , который описывает функцию кнопки.Кнопки с изображениями часто используются для создания более привлекательных или уменьшенных версий кнопок стандартной формы. Альтернативный текст должен описывать, что будет делать кнопка при выборе, например «Поиск», «Отправить», «Зарегистрироваться», «Разместить заказ» и т. Д. Например, может подойти для кнопки с изображением в форме поиска по сайту.
Карты изображений
При использовании клиентских карт изображений главное изображение должно иметь атрибут alt .Атрибут alt должен представлять любой контент, который представлен с изображением, но не представлен горячими точками карты изображения. Например, если у вас есть карта штата Нью-Йорк, на которой есть горячие точки для каждого региона, изображение может иметь значение атрибута alt «Регионы Нью-Йорка». Если основное изображение не передает контент, а в первую очередь является контейнером для горячих точек (например, панель навигации), тогда подходит alt = "" .
Каждая точка доступа карты изображения (элемент области ) должна иметь эквивалентный атрибут alt .Поскольку горячие точки являются интерактивными, каждая из них должна иметь альтернативный текст, описывающий функцию этой точки доступа.
Поскольку горячим точкам для карт изображений на стороне сервера нельзя дать альтернативный текст и поскольку они недоступны с клавиатуры, их не следует использовать.
Срезы изображения
Иногда большие изображения разделяются на несколько изображений на веб-сайте в целях дизайна. Когда несколько фрагментов изображения вместе передают контент, этот контент должен быть представлен пользователю.Обычно это делается путем предоставления альтернативного текста в атрибуте alt самого большого или наиболее заметного фрагмента изображения. Нецелесообразно повторять альтернативный текст без надобности, разбивать альтернативный текст на несколько атрибутов image alt или вообще не предоставлять альтернативы. Если фрагмент изображения находится внутри ссылки, альтернативный текст, описывающий функцию ссылки, должен быть предоставлен в атрибуте images alt , в атрибуте alt другого изображения в той же ссылке или в тексте внутри той же ссылки.Каждая ссылка должна содержать функциональный текст, описывающий функцию ссылок.
Фоновые изображения
Невозможно добавить альтернативный текст непосредственно в CSS или другие фоновые изображения. Изображения, передающие контент, обычно не следует размещать на фоне страницы или элемента.
Однако фоновые изображения можно использовать для декоративных изображений, таким образом удаляя изображение из потока содержимого страницы и устраняя необходимость в пустом атрибуте alt .
Иногда для представления контента используются спрайты изображений или другие фоновые изображения. Хотя их обычно следует избегать, если они используются, любой контент, передаваемый через фоновое изображение, должен быть доступен в разметке страницы. Если вместо изображения значка PDF в примере 7 выше было представлено фоновое изображение CSS, вы могли бы использовать технику замены текста для представления содержимого в ссылке:
Загрузите заявление о приеме на работу (PDF)
Затем вы можете использовать CSS для размещения текста «(PDF)» (элемент span ) за пределами экрана.См. CSS в действии: невидимое содержимое только для пользователей программ чтения с экрана для получения дополнительных сведений. Зрячие пользователи увидят фоновое изображение PDF, а пользователи программ чтения с экрана услышат закадровый текст «(PDF)».
Логотипы
В Интернете широко распространена практика, когда основной логотип сайта также ссылается на главную страницу сайта. Поскольку это довольно стандартная практика, обычно достаточно предоставить альтернативный текст для изображения, например, название вашей компании ( alt = "Acme Company )».Идентификация логотипа как фактического логотипа ( alt = "Логотип компании Acme" ) обычно не требуется. Содержание и функции не являются «логотипом». Разработчики часто идентифицируют изображение как изображение на главной странице ( alt = "Домашняя страница компании Acme ), хотя, если изображение постоянно находится в начале страницы и альтернативный текст уместен, эта дополнительная информация не требуется.
Сложные изображения
Если эквивалентная альтернатива для сложного изображения, такого как диаграмма, график или карта, не может быть ограничена кратким атрибутом alt (возможно, парой предложений длиной), тогда альтернативу следует предоставить в другом месте.Альтернативный контент часто может быть представлен в контексте страницы, например, в соседней таблице данных. Альтернативный текст также может быть предоставлен путем ссылки на отдельную веб-страницу, которая предоставляет более подробное описание сложного изображения. Ссылка может быть рядом с изображением, или само изображение может быть связано со страницей с длинным описанием. Альтернативный текст изображения должен по-прежнему описывать общее содержание изображения.
Примечание к longdesc
Атрибут longdesc был предназначен для ссылки на страницу с подробным описанием. Значение атрибута longdesc элемента img будет содержать URL-адрес страницы с подробным описанием, а НЕ — сам текст с подробным описанием. Однако longdesc работает только с некоторыми программами чтения с экрана. Кроме того, зрячие пользователи обычно не знают, что страница описания доступна.Кроме того, атрибут longdesc не является частью HTML5. По этим причинам не рекомендуется полагаться на longdesc при предоставлении доступа к этой странице с длинным описанием .
Мы представили обзор поддержки longdesc (проведен в сентябре 2015 г.).
Рисунок и figcaption
HTML5 вводит элемент figure , необязательно с figcaption , который является самодостаточным и обычно упоминается как единый блок из основного потока документа.Фигура может быть удалена из основного потока документа, не влияя на смысл документа.
figure и figcaption позволяют семантическую ассоциацию между рисунком и подписью к нему. figcaption может предоставлять сводку или дополнительную информацию о фигуре и / или связывать фигуру с содержащимся в ней документом. Однако любое изображение внутри рисунка должно по-прежнему иметь значение атрибута alt , представляющее альтернативный текст изображения — это не должно передаваться через figcaption .
Вы можете узнать больше о figure и figcaption в How do you figure?
Заключение
Несмотря на то, что это самая большая проблема, влияющая на веб-доступность, все еще существуют различные и неправильные методы для реализации альтернативного текста. Следуя основным принципам, изложенным здесь, веб-разработчики могут сделать свой веб-контент более доступным для людей с ограниченными возможностями.
- Добавление альтернативного текста к изображениям — один из самых простых способов доступа принципы, которые нужно изучить, и одни из самых сложных для освоения.
- Альтернативный текст может быть предоставлен в атрибуте
altили в окружающем контексте изображения. - Каждое изображение должно иметь атрибут
alt. - Альтернативный текст следует :
- представляют СОДЕРЖАНИЕ и ФУНКЦИЮ изображения.
- будьте лаконичны.
- Альтернативный текст не должен :
- быть избыточным (быть таким же, как смежный или основной текст).
- используйте фразы «изображение…» или «изображение…».
- Соответствующий альтернативный текст сильно зависит от контекста изображения.
- Альтернативный текст функционального изображения (например, изображения в ссылке) должен описывать функция, а также содержание.
- Для декоративных изображений по-прежнему требуется атрибут
alt, но он должен быть пустым (alt = "").
Доступность Интернета в целом резко увеличилась бы, если бы альтернативный текст был предоставлен и реализован правильно.
Рекомендации по использованию замещающего текстаImage — Центр поддержки Siteimprove
Изображения и графика делают контент более приятным и понятным для многих людей, в частности, людей с когнитивными и / или обучающимися нарушениями. Они служат подсказками для людей с нарушениями зрения, в том числе людей со слабым зрением, для ориентации в контенте.
Добавление изображения или графики к вашему контенту без использования правильных или пустых альтернативных атрибутов (alt-тегов) может быть чрезвычайно неприятным для людей с нарушениями зрения, перемещающихся по вашему сайту с помощью вспомогательных технологий.Альтернативы изображениям добавляют ценную информацию для слабовидящих или слепых пользователей программ чтения с экрана.
В этой статье приводятся примеры передового опыта использования альтернативных тегов изображений, которые помогут вам правильно реализовать эти теги на своем веб-сайте.
При использовании замещающего текста изображения он не должен включать:
Программы чтения с экрана автоматически объявляют изображение как изображение. Таким образом, альтернативный текст «Изображение яблока» читается вслух программой чтения с экрана как «изображение, изображение яблока».
Альтернативный текст для информативных изображений
Если изображение представляет собой фотографию, рисунок или картину, замещающий текст должен описывать изображение как можно более кратко.Длинный замещающий текст ухудшит работу пользователей, использующих программы чтения с экрана. Если изображение требует более длинного описания, лучше описать изображение в контенте и предоставить короткий замещающий текст.
Например, если изображение ниже английского короля Генриха VIII использовалось в статье об истории королевской семьи Англии, альтернативный текст должен просто описывать изображение.
HTML: 
(Источник изображения короля Англии Генриха VIII)
В качестве другого примера альтернативный текст ниже описывает изображение парка:
HTML: 
(Источник изображения Центрального парка в Нью-Йорке с воздуха)
Альтернативный текст для декоративных изображений
Декоративные изображения — это изображения, которые не служат определенной цели, то есть они не предназначены для передачи какого-либо значения или важной информации. В этом случае рекомендуется использовать так называемый замещающий текст NULL или пустой замещающий текст.
(две кавычки после alt =)
HTML: 
(Источник декоративного изображения)
Обратите внимание, что атрибут alt все еще присутствует, даже если он пуст. Когда программа чтения с экрана встречает нулевой альтернативный текст, она полностью пропускает изображение, не сообщая о его наличии. Если атрибут alt отсутствует, программа чтения с экрана вместо этого считывает имя файла изображения, что может сильно отвлекать тех, кто использует технологию чтения с экрана.
Изображение с текстом
Согласно WCAG, изображения текста не допускаются.Если вы не можете избежать изображений текста, лучше всего иметь такой же текст в атрибуте alt.
Например, для альтернативного текста этого несвязанного изображения вы можете использовать слова в самом изображении:
HTML: 
(Источник быстрой коричневой лисы перепрыгивает через изображение ленивой собаки)
Функциональные изображения (Связанное изображение)
Функциональные изображения используются для инициирования действий, а не для передачи информации.Они используются в кнопках, ссылках и других интерактивных элементах. Альтернативный текст для изображения должен передавать действие, которое будет инициировано (цель изображения), а не описание изображения.
Отсутствующие или пустые значения alt создают серьезные проблемы для пользователей программ чтения с экрана, поскольку функциональные изображения необходимы для функциональности содержимого. Программы чтения с экрана обычно объявляют имя файла изображения, URL-адрес изображения или URL-адрес назначения ссылки, что вряд ли поможет пользователям понять действие, которое будет инициировано изображением.
Пример 1: Изображение, используемое отдельно в качестве связанного логотипа
Следующее изображение содержит ссылку, которая ведет на веб-страницу Siteimprove и отображается без какого-либо другого текста ссылки. В нем есть альтернативный текст «Siteimprove home», указывающий, куда пользователь перейдет по ссылке.
Пример 2: Изображение в тексте ссылки
В этом примере изображение используется для дополнения текста в ссылке, ведущей на веб-сайт Siteimprove.Изображение не представляет полную функциональность и не передает другую информацию, кроме той, которая уже предоставлена в тексте ссылки, поэтому применяется нулевое (пустое) значение (alt = «»), чтобы избежать избыточности и повторения.
Siteimprove Home
Siteimprove Home