Проверка alt-тегов изображений

Что делает проверка alt-тегов изображений

Инструмент сканирует веб-страницу, подсчитывает изображения и сообщает, у скольких из них отсутствует атрибут alt. Каждое изображение без alt-текста помечается, чтобы вы могли просмотреть и исправить пробелы.

Атрибут alt предоставляет текстовую альтернативу изображению. Когда изображение не может быть отображено, вместо него показывается alt-текст. Для программ чтения с экрана это основной способ передать, что содержит изображение. Для поисковых систем он даёт контекст о предмете изображения и его связи с окружающим контентом.

Почему alt-текст важен

Доступность — самая веская причина писать alt-текст. Пользователям, которые полагаются на вспомогательные технологии, нужно описание значимых изображений, чтобы понять страницу. Декоративные изображения — отдельный случай: обычно у них должен быть пустой атрибут alt, alt="", чтобы программы чтения с экрана могли их пропустить без лишнего шума.

С точки зрения SEO alt-текст помогает поиску по изображениям понять, что изображено. Это не место для переспама ключевыми словами: повторяющиеся строки ключей плохо читаются пользователями вспомогательных технологий и приносят мало пользы. Краткое точное описание полезнее списка поисковых запросов.

Как интерпретировать результаты

Сводка показывает общее число изображений и сколько из них не имеют alt-текста. Каждое помеченное изображение отмечено как не имеющее alt-тега. Отсутствующий атрибут alt отличается от пустого: отсутствующий означает, что атрибут вообще не задан, а пустой — что он есть, но намеренно оставлен пустым. Оба варианта могут быть приемлемы в зависимости от роли изображения, но отсутствие атрибута у контентных изображений — явный пробел.

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

Как писать полезный alt-текст

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

Практический сценарий

Запускайте проверку на шаблонах с обилием изображений, например на страницах списков товаров и в блогах. Сначала исправляйте контентные изображения, поскольку они несут больше всего смысла. Затем просмотрите декоративные изображения и убедитесь, что у них пустой alt, а не отсутствующий. Повторяйте проверку после обновлений CMS или темы, потому что изменения шаблона могут разом лишить alt-атрибутов множество страниц.

Ограничения

Проверка изучает HTML-ответ на наличие атрибутов alt. Она не оценивает, точен ли и полезен ли alt-текст, и не обнаруживает изображения, вставленные клиентскими скриптами, если их нет в исходном HTML.