Полезный alt-текст изображений товара объясняет покупателю, что именно добавляет конкретное изображение: внешний вид товара, деталь, показанную в другом ракурсе, или назначение элемента управления на основе изображения. Alt-текст является текстовой альтернативой, которую программы, например программа экранного доступа, могут использовать для описания изображения. Сначала определите его назначение на странице, а после сохранения проверьте текст на реальной витрине.
Галерея может казаться понятной, хотя alt-текстом каждой фотографии служит одно и то же название товара. Тогда различия между видом спереди, деталью застежки и вариантом цвета теряются в тексте. Мы предлагаем проверять галерею товара как небольшую редакционную задачу: редактор каталога проверяет формулировки, а специалист, отвечающий за витрину, проверяет результат.
Почему alt-текст изображений товара теряет полезные детали
Полезное описание зависит от роли изображения и окружающего контента. Рекомендации W3C об информативных изображениях предлагают авторам передавать информацию, важную в конкретном контексте. Повторение названия, имени файла или поисковой фразы по всей галерее может не передать особенность, ради которой сделана конкретная фотография. Заполнение поля является лишь частью работы.
Название товара считают достаточным. Название идентифицирует товар, но крупный план может добавлять информацию о застежке или кармане. Посмотрите, что фотография добавляет к названию и расположенному рядом описанию.
Функцию изображения упускают из виду. Фотография также может быть ссылкой или кнопкой галереи. В рекомендациях W3C о функциональных изображениях действие или место назначения является частью решения. Доступное имя, то есть метка, которую вспомогательная технология получает для этого элемента управления, должно понятно передавать его назначение.
Сохраненную запись считают окончательным результатом. Рассматривайте административное поле и показанную страницу как отдельные точки проверки. Импорт, повторно используемое изображение или особая логика темы требуют проверки отрисованного результата, то есть того, что фактически предоставляет соответствующая страница витрины, прежде чем менять весь каталог.
Рекомендации Google по изображениям также предостерегают от заполнения текстовых альтернатив ключевыми словами. Пишите о детали или действии, которое нужно покупателю. Список поисковых фраз этого не объясняет.
Определите, что добавляет каждое изображение
Проверяйте изображение вместе с окружающим текстом и любой ссылкой или кнопкой, к которой оно относится. Спросите, какая информация или действие без него стали бы непонятными. Дерево решений W3C различает информативное, функциональное и декоративное использование. Для изображения, повторно используемого в другом месте, требуется новое контекстное решение. Более поздний ракурс в галерее не становится автоматически декоративным только потому, что название товара уже появлялось.
Рассмотрим вымышленный магазин, продающий синюю сумку через плечо. Это придуманные примеры формулировок, а не описания, проверенные по реальному каталогу.
| Размещение | Решение, которое нужно проверить |
|---|---|
| Вид спереди | Опишите значимые видимые особенности, например синюю сумку с закругленным клапаном. |
| Крупный план застежки | Опишите видимую деталь застежки, которую добавляет этот ракурс. |
| Другой цвет | Согласуйте описание с фотографией и выбранным вариантом. |
| Элемент управления галереей только с изображением | Сделайте действие элемента управления понятным, например открытие ракурса с застежкой. |
| Чисто декоративный повтор | Рассмотрите намеренно пустую текстовую альтернативу после проверки информации и функции. |
Пустая текстовая альтернатива означает намеренный атрибут alt="". Рекомендации W3C о декоративных изображениях отличают это от отсутствия атрибута. Для изображения в карточке товара, находящегося внутри ссылки, достаточный текст в пределах той же ссылки может сделать пустую альтернативу уместной. Отдельное название товара рядом не дает автоматически название ссылке, состоящей только из изображения.
Оставляйте подробную информацию о размерах или сборке доступным содержимым страницы. Рекомендации W3C о сложных изображениях предусматривают более полное текстовое объяснение, когда короткая альтернатива не может передать информацию. Не пытайтесь уместить инструкции со схемы в короткое описание, отбрасывая остальное.
Напишите и сохраните проверенный образец
Подготовьте образец, который можно проверить до применения метода ко всему каталогу. Мы бы использовали запись с URL страницы, языком, выбранным вариантом, ссылкой на изображение, назначением, предложенной формулировкой и результатом проверки. Миниатюра или четкая ссылка на медиафайл помогает проверяющему сопоставить строку с реальным изображением, а не догадываться по имени файла.
- Запишите вклад изображения. Укажите, что покупатель должен получить от этого ракурса и что уже сообщает расположенный рядом текст. Отметьте, является ли изображение частью ссылки или кнопки.
- Составьте краткую текстовую альтернативу. Сохраните отличительную видимую деталь. Сверьте цвет и другие важные факты с правильной фотографией и записью в каталоге. Не придумывайте материал, вместимость или сертификацию по внешнему виду.
- Проверяйте предложения до их принятия. Сгенерированное описание является черновиком. Попросите редактора товара проверить содержание и назначение текста, включая выбранный вариант и язык.
- Проверьте необъясненные существующие значения. Если поле содержит складские коды или необычное форматирование, спросите ответственного специалиста, зависит ли от них особая логика галереи. Проверьте изменения в разрешенном предварительном просмотре или на другом обратимом образце, прежде чем массово заменять эти значения.
- Сохраните через соответствующее поле медиафайла. Текущая справка Shopify для компьютеров направляет в раздел «Товары», затем к товару и его медиафайлу. Выберите «Добавить alt-текст», введите проверенную формулировку и нажмите «Сохранить alt-текст». Этот путь относится к медиафайлам товара. Изображения внутри описаний или разделов темы могут редактироваться в другом месте.
- Передайте проблемы реализации ответственному специалисту. Если поле или элемент управления не может передать нужное назначение, предоставьте страницу, ссылку на изображение и требуемый результат. В предложенной нами работе над сайтом электронной торговли такая передача отделяет решение по контенту от изменения темы и его проверки.
Проверьте витрину до изменения каталога
После сохранения откройте соответствующую страницу витрины и проверьте именно то место, которое редактировали. Проверьте текстовую альтернативу изображения, доступное имя каждого элемента управления, к которому оно относится, и результат смены варианта или ракурса галереи. Если вы не можете проверить это самостоятельно, попросите ответственного специалиста показать результат и сопоставить его с вашей записью до расширения изменений.
- Сопоставьте фактическое изображение. С помощью инструментов проверки браузера или ответственного специалиста прочитайте атрибут
altотрисованного изображения. Сравните его с подготовленной формулировкой и фотографией, которая сейчас показана. - Проверьте имя и действие элемента управления. Для ссылки или кнопки проверьте как метку, предоставляемую вспомогательной технологии, так и текстовую альтернативу изображения. Убедитесь, что заявленное действие или место назначения соответствует результату активации элемента управления. Одного описания изображения может быть недостаточно для определения полного имени элемента управления.
- Смените ракурс и вариант. Откройте деталь застежки, выберите другой видимый цвет и снова проверьте соответствующий результат. Если описание остается привязанным к неправильному изображению, запишите для ответственного специалиста точную последовательность действий.
- Снова откройте страницу и нужный язык. Проверьте, сохранилось ли изменение в нужном месте. Записывайте нерешенные случаи отдельно, в том числе когда требуется изучить процесс импорта или перевода.
Проверка в браузере оценивает реализацию. Квалифицированная проверка с программой экранного доступа может изучить процесс покупок с этой вспомогательной технологией. Четко определяйте область каждой проверки. «Простые проверки» W3C предупреждают, что предварительные проверки не являются окончательными, поэтому ни заполненное поле, ни этот образец не подтверждают доступность всего магазина. Наши первые проверки доступности вашего сайта охватывают более широкие задачи, включая работу с клавиатуры и формы.
Поддерживайте правильность альтернатив после редактирования
Назначьте ответственного за исходный текст и повторяйте соответствующую проверку при изменении фотографии, варианта, языка, темы или импорта. Если каталог наполняют несколько систем, выясните, какая из них управляет полем. Мы бы включили это соответствие в процесс интеграции каталога и CRM, прежде чем расширять ручные изменения, которые может заменить другой процесс.
Отслеживайте проверенные места, подтвержденные на витрине формулировки и нерешенные случаи. Эти записи показывают выполненную работу и то, что еще требует внимания. Они не измеряют влияние на продажи. Храните вместе ссылку на изображение, текущую формулировку, имя редактора и условие следующей проверки, чтобы другой человек мог поддерживать то же решение.
Чем мы можем помочь
Мы бы начали с ракурсов товара и согласовали, что должен сообщать каждый из них. Затем передача работы связывает формулировку редактора с местом сохранения, результатом на витрине и любым нерешенным поведением элемента управления. Начните собственную запись с товара, галерея которого показывает разные детали, и проверьте образец, прежде чем расширять изменения.
