Как правильно написать alt-текст — Блог HTML Academy

Alt — обязательный атрибут тега <img>. Это альтернативное описание для изображений, которые не видят пользователи:

  • из-за медленного соединения;
  • из-за неправильного пути или имени файла в атрибуте src;
  • так как пользуются скринридерами.

Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.

Когда alt-текст нужен

У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге <a>, если у ссылки нет текстового содержимого. 

<a href="/courses">
  <img src="keks.jpg" alt="Кекс приглашает на курсы">
</a>

Как правильно писать

  • Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
  • Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
  • Уникально. Не повторяйте текст, который уже есть на странице.
  • Не начинайте со слов «картинка» или «изображение».
  • Отталкивайтесь от окружающего контента.
  • Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.

Примеры использования

Картинка

<img src="ml.jpg" alt="Динозавры">

Так можно описать, если в статье есть текст, который рассказывает о фотографии.

Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:

<img src="ml.jpg" alt="Два динозавра в национальном парке Анза-Боррего на фоне звёздного неба. Один большой, другой маленький">

Ссылка

<a href="/blog">
  <img src="blog.jpg" alt="Перейти на главную страницу блога">
</a>

Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег <a>.

Диаграмма

<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">

Если текста со статистикой нет, то придётся всю статистику вынести в alt:

<img src="chart.png" alt="Еда — 10%, соседи — 15% ...">

Картинка с текстом

Просто переносим текст в alt:

<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">

Figure и figcaption

Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:

<figure>
  <img src="image.jpg" alt="Рабочее место Тани">
  <figcaption>Таня ушла на разминку</figcaption>
<figure>

Когда alt-текст не нужен

Когда картинка декоративная и не имеет смысла.

  • Аватарка: имя пользователя и так у нас уже есть.
  • Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
  • Иконки в кнопке.

Как не стоит писать

Если картинка оформительская и не требует alt, то не нужно писать туда пробел или его аналоги.

Плохие примеры:

<img src="image.png" alt=" ">

<img src="image.png" alt="&nbsp;">

Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).

Что будет, если забыть про alt-текст

Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.

Но иногда бывают картинки, которым не добавляют alt. Например, это поиск «рыжий кот», и в поисковой выдаче показываются тысячи рыжих котов. Смысла указывать alt нет.

Чаще всего в такой ситуации вообще удаляют alt:

<img src="orange-cat-1.jpg">

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

<img src="orange-cat-2.jpg" alt="">

Искусственный интеллект и alt

ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.

Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».

С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.

Alt-текст — капля в море фронтенда

Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −40% на подписку в первую неделю.

Регистрация

Литература

  • Рекомендации W3C по alt-текстам (англ.)
  • Альтернативный текст в доступности (англ.)
  • Использование ИИ для генерации alt-текста на изображениях (англ.)
  • Accessibility: Images, «Alt» tags, and the «Out Loud» Experience (англ. )

HTML img alt Attribute

❮ HTML тег

Пример

Изображение с указанным альтернативным текстом:

Девушка в куртке

Попробуйте Себя »

Определение и использование

Обязательный атрибут alt указывает альтернативный текст для изображения, если изображение не может быть отображено.

Атрибут alt предоставляет альтернативную информацию для изображения, если пользователь по какой-либо причине не может просмотреть это (из-за медленного соединения ошибка в src или если пользователь использует программу чтения с экрана).

Совет: Для создания всплывающей подсказки к изображению используйте атрибут title !

Поддержка браузера

Атрибут
или Да Да Да Да Да

Синтаксис

<i><noscript><img alt= text «>

Значения атрибутов

Значение Описание
текст Указывает альтернативный текст для изображения.

Рекомендации для альтернативного текста:

❮ HTML-тег


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

8 лучших ссылок Справочник по HTML
Справочник по CSS

Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2023 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

HTML-теги Img Alt для передовой практики SEO

В HTML-атрибутах

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут
HTML-теги Руководство по добавлению изображений в ваши веб-документы
Что означает HTML Img Alt Tags For SEO Best Practice — поисковые системы любят их делать?
Определяет альтернативный текст, который может быть представлен вместо изображения.

Содержание

  • 1 Пример кода
  • 2 Alt Text
  • 3 ALT Описание — Пользователи
  • 4 Альте 7 Все атрибуты элемента img
  • 8 Поддержка браузером alt

Пример кода 

 Pink flamingo.

Атрибут

alt text

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

  • Без специальных символов. Сюда входят символы UTF-8, такие как незакодированные фигурные кавычки, а также сущности символов HTML.
  • Нет HTML.
  • Не более 125 символов.
  • Просто определите картинку. Не нужно ссылаться на него («Это изображение…»).
  Розовый фламинго. A <em><noscript><img decoding=  jpg" alt="Фламинго происходит от испанского фламенко, "цвета пламени", в свою очередь происходящего от провансальского flamenc от flama «пламя» и германоподобного суффикса -ing, с возможным влиянием таких слов, как Fleming. Аналогичная этимология имеет латинский греческий термин Phoenicopterus (от греческого: ????????????? phoinikopteros ), буквально "кроваво-красные перья".> Это изображение розового фламинго.  Розовый фламинго.

Описание

alt — Пользователи

Атрибут alt предоставляет «альтернативное описание» для изображения. Это описание обычно не представляется пользователю, но будет отображаться при определенных обстоятельствах:

  • Вспомогательные технологии — если пользователь слабовидящий и использует программу чтения с экрана, программа чтения с экрана прочитает пользователю описание alt . .
  • Изображения отключены — некоторые пользователи предпочитают просматривать веб-страницы с отключенными изображениями (для экономии полосы пропускания или для уменьшения отвлечения внимания). Эти пользователи обычно видят alt Описание вместо изображения.
  • Ошибка изображения — если изображение не загружается по какой-либо причине (неправильное имя файла, проблемы с подключением), пользователь обычно увидит описание alt вместо изображения.

Вот пример отображения текста alt вместо неудачного изображения (изображение src ни на что не указывает).

 В зависимости от вашего браузера вы можете увидеть это сообщение вместо ошибочного изображения.

Описание

alt — Поисковые системы

Описание alt также очень полезно для поисковых систем. Поисковым системам трудно понять, что на самом деле представляет собой содержание изображения. У них это получается лучше, но определить тему фото или картинки крайне сложно. Таким образом, поисковые системы полагаются на описание alt , чтобы узнать, что на самом деле изображено на картинке (они также используют имя файла и другие атрибуты). Кроме того, в поиске картинок Google 9Описание 0016 alt фактически показывается пользователю. «Американский фламинго» — это альтернативный текст изображения фламинго. Если вы заботитесь о SEO, вы должны убедиться, что у вас есть соответствующие описания alt для всех ваших изображений.

Узнайте больше о

alt

Что еще нужно знать о alt ? Много. Мы составили этот учебник по Правилам Alt, чтобы помочь вам.

Значения атрибута

alt
Имя значения Примечания
текст Задает альтернативный текст, отображаемый в определенных контекстах.

Все атрибуты

IMG Элемент
Название атрибута Значения Примечания
Высота Идентифицирует интрас.
srcset список источников Определяет несколько размеров одного и того же изображения, позволяя браузеру выбирать соответствующий источник изображения.
выравнивание вправо
влево		 Ранее использовался для указания выравнивания и размещения изображения относительно окружающего текста. Он устарел и не должен использоваться.
alt текст Определяет альтернативный текст, который может быть представлен вместо изображения.
граница пикселей Ранее использовалась для определения границы элемента изображения. Он устарел и больше не должен использоваться.
элементы управления Переключаемые элементы управления медиаплеером при использовании в сочетании с атрибутом dynsrc. Оба атрибута теперь устарели.
dynsrc
hspace Ранее использовался для добавления горизонтального пространства с обеих сторон изображения. Сейчас это устарело.
ismap Идентифицирует изображение как карту изображения на стороне сервера. При нажатии на содержащую якорную ссылку координаты мыши будут включены в запрос.
longdesc Определяет URL-адрес, по которому можно найти дополнительную информацию об изображении. Он был выписан из спецификации HTML5, но его статус не так ясен, как другие устаревшие функции.
цикл Ранее использовался для указания количества раз, которое должно воспроизводиться видео, при использовании в сочетании с атрибутом dynsource. Оба атрибута устарели.
низкий уровень Указана версия изображения меньшего размера или более низкого качества.
имя Идентифицировал изображение или предоставил дополнительную информацию о нем. Устарело в HTML 4.0 в пользу других атрибутов.
naturalsizeflag Этот атрибут ничего не делает. Когда-то он использовался проприетарной программной системой.
nosave Предназначался для предотвращения загрузки изображений пользователями. Никогда не был частью спецификации HTML и широко не применялся.
запуск открытие файла
наведение курсора мыши
подавление Используется ныне несуществующим браузером Netscape для подавления отображения изображения до завершения загрузки изображения.
usemap Указывает карту изображения на стороне клиента, которая будет использоваться с изображением.
ширина Указывает внутреннюю ширину изображения в пикселях CSS.
источник Указывает URL-адрес отображаемого изображения.

Адам Вуд

Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.

Browser Support for alt

All All All All All All

Search HTML.

No related posts.