Что такое атрибут Alt
Атрибут alt — это HTML-атрибут, который используется для указания альтернативного текста для изображений. Этот текст отображается в случаях, когда изображение не может быть загружено или просмотрено пользователем. Alt-текст является обязательным атрибутом для тега <img> и играет критически важную роль в доступности веб-сайтов и SEO-оптимизации.
Синтаксис и использование
Атрибут alt добавляется непосредственно в тег изображения:
<img src="image.jpg" alt="Описание изображения">Для XHTML синтаксис выглядит следующим образом:
<img src="image.jpg" alt="Описание изображения" />Основные функции Alt-атрибута
Доступность веб-сайта
Alt-текст имеет огромное значение для пользователей с нарушениями зрения, которые используют программы чтения с экрана (скринридеры). Эти программы озвучивают содержимое alt-атрибута вместо изображения, позволяя слепым и слабовидящим пользователям понять содержание и назначение изображения.
Замещение изображений
Когда изображение не может быть загружено по техническим причинам (медленное соединение, проблемы с сервером, неправильный путь к файлу), браузер отображает alt-текст вместо изображения. Это позволяет пользователям понять, что должно было находиться на этом месте.
Текстовые браузеры
Пользователи текстовых браузеров (таких как Lynx) видят только alt-текст вместо изображений, что делает этот атрибут критически важным для навигации по сайту.
Значение для SEO
Атрибут alt играет важную роль в поисковой оптимизации:
- Индексация изображений: Поисковые системы используют alt-текст для понимания содержания изображений и их индексации в поиске по картинкам
- Контекстная релевантность: Alt-текст помогает поисковым системам понять связь между изображением и содержанием страницы
- Дополнительный контент: Текст в alt-атрибуте читается поисковыми роботами как обычный текст страницы, увеличивая объем релевантного контента
Правила написания эффективного Alt-текста
Основные принципы
- Краткость: Alt-текст должен быть кратким и информативным (обычно до 125 символов)
- Описание назначения: Описывайте не внешний вид изображения, а его назначение или смысл в контексте страницы
- Естественность: Используйте естественный язык, избегайте перечисления ключевых слов
- Уникальность: Каждое изображение должно иметь уникальный alt-текст
Примеры правильного использования
Хорошо:
<img src="logo.png" alt="Логотип компании WebSolutions"><img src="chart.png" alt="График роста продаж за 2024 год">Плохо:
<img src="logo.png" alt="Красивый логотип с синими буквами"><img src="chart.png" alt="Изображение график диаграмма продажи">Декоративные изображения
Для чисто декоративных изображений, которые не несут смысловой нагрузки, рекомендуется использовать пустой alt-атрибут:
<img src="decoration.png" alt="">Это указывает скринридерам пропустить изображение, так как оно не содержит важной информации.
Распространенные ошибки
- Отсутствие alt-атрибута: Полное отсутствие атрибута создает проблемы доступности
- Дублирование названия файла: Использование имени файла вместо описательного текста
- Переспам ключевыми словами: Неестественное повторение ключевых слов в alt-тексте
- Слишком длинный текст: Чрезмерно подробные описания усложняют восприятие
- Использование фраз типа "изображение" или "картинка": Скринридеры уже сообщают, что это изображение
Историческая справка
Атрибут alt был впервые введен в HTML 1.2 в 1993 году для поддержки текстовых браузеров. В HTML 4.01 (1999 год) он стал обязательным для тегов <img> и <area>. Интересно, что Internet Explorer 7 и более ранние версии некорректно отображали alt-текст как всплывающие подсказки, что привело к путанице с атрибутом title. Эта проблема была исправлена в Internet Explorer 8.
Юридические аспекты
Отсутствие alt-атрибутов может иметь серьезные юридические последствия. В разных странах были поданы иски против компаний за нарушение стандартов доступности. Например, в США отсутствие alt-атрибутов может рассматриваться как нарушение Закона об американцах с инвалидностью (ADA).
Проверка и аудит
Для проверки качества alt-атрибутов на сайте можно использовать:
- Google Lighthouse для аудита доступности.
- Валидаторы HTML от W3C.
- Специализированные инструменты проверки доступности.
- Расширения браузера для разработчиков.
6 лучших практик использования альтернативного текста
Следуйте этим шести рекомендациям, чтобы повысить эффективность вашего альтернативного текста:
1. Будьте описательными
Альтернативный текст должен четко описывать изображение, предоставляя достаточно подробностей, чтобы пользователи поняли его содержание.
Избегайте включения в альтернативный текст следующего:
- Такие фразы, как «Изображение» или «фотография», являются избыточными. Исключением являются случаи, когда изображение представляет собой реальную фотографию (например, «Молодая женщина держит фотографию цветка»).
- Авторские права на изображения, как они должны быть указаны в подписи к изображению или в основном тексте.
- Информация, уже содержащаяся в подписи к изображению или основном тексте, чтобы избежать дублирования информации.
- Информация, которую необходимо знать всем пользователям, например, инструкции по приготовлению рецепта, сопровождаемые изображением готового блюда.
2. Будьте кратки
Альтернативный текст должен быть лаконичным — в идеале менее 125 символов — чтобы пользователи и программы экранного доступа могли быстро его прочитать. Это особенно актуально, поскольку пользователи программ экранного доступа не могут приостановить показ альтернативного текста, чтобы перейти к другому контенту.
3. Включите соответствующие ключевые слова
Включите соответствующие ключевые слова в альтернативный текст, чтобы помочь поисковым системам ранжировать ваши изображения. Однако избегайте перенасыщения ключевыми словами, то есть вставки ключевых слов в альтернативный текст до тех пор, пока он не станет неестественным и трудным для чтения.
4. Не используйте альтернативный текст для декоративных изображений.
Не используйте альтернативный текст для декоративных изображений, которые только добавляют визуальный интерес и несут мало информации или функций — это сбивает пользователей с толку.
Используйте атрибут alt со значением null, чтобы указать программам чтения с экрана игнорировать декоративные изображения. Например:
<img alt="" src="decorative-image.jpg">
Если исключить атрибут alt, программы чтения с экрана могут вместо этого считывать имя файла изображения. Это неидеально.
5. Локализуйте альтернативный текст
Локализуйте альтернативный текст в соответствии с культурным и языковым контекстом вашей аудитории . Это особенно важно для веб-сайтов, ориентированных на различные географические регионы.
Например, British Airways использует альтернативный текст изображения на английском языке для своего англоязычного сайта. И использует французский альтернативный текст изображения на своем франкоязычном сайте для пользователей из Франции.
Кроме того, при локализации альтернативного текста учитывайте различия в терминологии на одном языке.
Например, вид спорта, в котором две команды по 11 человек забивают голы бело-чёрным мячом в сетку, в американском английском называется «soccer». А в британском — «football».
Чтобы удовлетворить потребности обоих рынков, компания Nike использовала соответствующие термины в альтернативном тексте для домашних футболок чемпионата Бразилии по футболу 2024 года: в зависимости от региональных настроек альтернативный текст отображался как «soccer replica jersey» или «football replica jersey».
6. Регулярно проверяйте альтернативный текст
Регулярно проверяйте свой альтернативный текст, чтобы выявить и предпринять меры для его улучшения и в конечном итоге помочь своим изображениям занять более высокие позиции в результатах поиска.
Используйте ИИ для ускорения генерации альтернативного текста
ИИ может значительно ускорить генерацию альтернативного текста, особенно когда вам нужно написать альтернативный текст для большого количества изображений.
Вот как написать альтернативный текст с помощью ИИ:
Загрузите изображение в инструмент для написания текстов на основе искусственного интеллекта, например, ChatGPT или Claude. Затем попросите инструмент предложить несколько вариантов альтернативного текста, которые точно описывают изображение и содержат ваши целевые ключевые слова, соблюдая при этом желаемое количество символов.
Например:
«Напиши несколько вариантов альтернативного текста для этого изображения. Альтернативный текст должен описывать ключевые элементы изображения, содержать около 125 символов и включать следующие ключевые слова: [вставьте ключевые слова здесь]».
Проверьте предлагаемые инструментом варианты альтернативного текста на точность, релевантность и длину. Затем выберите понравившийся вариант, доработайте его и используйте.
Вот мои результаты, когда я запросил у ChatGPT альтернативный текст для изображения двойной радуги в поле:
- «Яркая двойная радуга пересекает облачное голубое небо над сочным зеленым полем с дикими травами на переднем плане».
- «Двойная радуга раскинулась в небе над широким, залитым солнцем полем зеленых культур и высоких трав под переменно-облачным небом».
- «Сияющая двойная радуга простирается над огромным зеленым полем, сквозь которое пробиваются редкие облака и мягкий солнечный свет».
- «Над залитым солнцем зеленым полем, окаймленным дикими травами и деревьями под драматичным облачным небом образуется двойная радуга».
- «Зеленое поле, залитое солнечным светом, с двойной радугой, изогнувшейся по небу с переменной облачностью после прошедшего ливня».
Второй вариант мне понравился больше всего своей объективностью и отсутствием драматизма. Но я посчитал, что описывать поле как широкое и залитое солнцем было бы излишним. А описывать посевы как зелёные — излишне.
Поэтому я отредактировал альтернативный текст следующим образом:
«Двойная радуга раскинулась в небе над полем посевов и высокими травами под переменно-облачным небом».
Заключение
Атрибут alt — это не просто техническое требование, а важный элемент создания инклюзивного и SEO-оптимизированного веб-сайта. Правильное использование alt-текста улучшает пользовательский опыт для всех категорий посетителей, повышает позиции сайта в поисковых системах и демонстрирует социальную ответственность владельцев сайта.