У фотографии товара, схемы и фонового узора разные задачи. Поэтому поле alt нельзя заполнять одним правилом «вставить название страницы». Ниже — проверка для владельца WordPress: как подобрать заменяющий текст и убедиться, что он действительно попал в опубликованную страницу.
Сначала определите роль картинки
Откройте страницу и мысленно уберите изображение. Что потеряет читатель? Если пропадёт важная информация — её нужно передать словами. Если исчезнет только украшение, картинке может подходить пустой атрибут alt. Если изображение является единственным содержимым ссылки, текст должен объяснять назначение перехода.
Это решение принимается для конкретного места на странице. Одна фотография может иллюстрировать инструкцию в статье и служить ссылкой на карточку в каталоге. Одинаковый файл не означает одинаковую роль.
Проверьте три примера на своей странице
- Фотография предмета. «Настольная лампа с гибкой стойкой и круглым основанием» полезнее, чем «картинка товара». Указывайте видимые особенности, нужные для понимания, без догадок о материале и качестве.
- Схема процесса. Короткий alt может назвать её смысл: «Четыре этапа выдачи файла после оплаты». Саму последовательность и объяснение продублируйте обычным текстом рядом. Длинная инструкция внутри картинки плохо заменяется одной строкой.
- Декоративная полоса. Если она не сообщает ничего дополнительно, задайте пустой alt. Не подставляйте имя файла, ключевые слова или «декоративное изображение».
Для изображения-кнопки ориентируйтесь на действие. Если ссылка открывает каталог, «Открыть каталог шаблонов» объясняет результат лучше описания цвета стрелки. Сначала убедитесь, что видимый текст ссылки уже не даёт это же доступное имя: ненужное повторение тоже мешает.
Почему правки медиатеки иногда не видны в статье
В медиатеке WordPress хранится текст для вложения, но уже вставленное изображение может иметь собственный alt в блоке. Обновление медиатеки не доказывает, что старые публикации изменились. Откройте нужную запись, выделите блок изображения и проверьте его настройки. Затем сохраните запись и проверьте публичную страницу.
В конструкторах страниц, галереях и блоках товаров путь настройки отличается. Не заменяйте все атрибуты во всей базе одним шаблоном: это затронет декоративные картинки, ссылки и изображения с разным контекстом. Начните с одного блока и подтвердите результат.
Проверка в браузере без изменения сайта
- Откройте опубликованную страницу в отдельном окне и найдите нужное изображение.
- В инструментах разработчика выделите соответствующий элемент
img. Посмотрите значениеaltи окружающую ссылку. - Различайте
alt=""и отсутствие атрибута. Пустое значение может быть осознанным решением для декора; отсутствие требует проверки. - Сопоставьте текст с тем, что действительно показывает изображение. Он не должен обещать того, чего на картинке нет.
- После правки перезагрузите страницу. Если результат старый, используйте проверку кеша WordPress, а не повторное массовое сохранение.
Эта проверка подтверждает HTML конкретного элемента. Она не заменяет тест чтения страницы с программой экранного доступа и не доказывает доступность всей страницы.
Зафиксируйте результат, чтобы не проверять заново
Для небольшой страницы достаточно списка: URL, изображение или блок, роль, прежний alt, новый alt и результат публичной проверки. Например: «Баннер в первом экране — декор — имя файла — пустой alt — проверено». После обновления шаблона повторно смотрите не только медиатеку, но и итоговый HTML.
На странице товара отдельно сверяйте основное фото и галерею. Разные ракурсы могут требовать разного пояснения; см. разбор изображений карточки товара. Не добавляйте цену и наличие в alt вручную: такие сведения легко устаревают и должны оставаться в обычном тексте карточки.
Контрольный список: роль определена; текст описывает смысл в текущем контексте; декор не озвучивается без необходимости; сложная схема объяснена рядом; изменения видны в опубликованном блоке; ссылки с картинками имеют понятное назначение.
Справка: блок изображения WordPress, редактирование медиа и типы изображений в руководстве W3C WAI.
Материал входит в подборку «Обслуживание WordPress»: проверяйте отдельный элемент, сохраняйте результат и только затем распространяйте изменение.
Продолжить чтение: все практические материалы Ready4site.