Корисний alt-текст зображень товару пояснює покупцеві, що саме додає конкретне зображення: зовнішній вигляд товару, деталь, показану з іншого ракурсу, або призначення елемента керування на основі зображення. Alt-текст є текстовою альтернативою, яку програми, зокрема засіб читання з екрана, можуть використовувати для опису зображення. Спочатку визначте його призначення на сторінці, а після збереження перевірте текст на фактичній вітрині.
Галерея може здаватися зрозумілою, хоча alt-текстом кожного зображення є одна й та сама назва товару. Тоді в тексті зникають відмінності між виглядом спереду, деталлю застібки та варіантом кольору. Ми пропонуємо перевіряти галерею товару як невелике редакційне завдання: редактор каталогу перевіряє формулювання, а відповідальний за вітрину фахівець перевіряє результат.
Чому alt-текст зображень товару втрачає корисні деталі
Корисний опис залежить від ролі зображення та навколишнього вмісту. Рекомендації W3C щодо інформативних зображень закликають авторів передавати інформацію, важливу в конкретному контексті. Повторення назви, імені файлу або пошукової фрази в усій галереї може не передати особливість, заради якої зроблено конкретну світлину. Заповнення поля є лише частиною роботи.
Назву товару вважають достатньою. Назва ідентифікує товар, але великий план може додавати інформацію про застібку чи кишеню. Подивіться, що світлина додає до назви й опису поруч.
Функцію зображення не враховують. Світлина також може бути посиланням або кнопкою галереї. У рекомендаціях W3C щодо функціональних зображень дія або місце призначення є частиною рішення. Доступна назва, тобто позначка, яку допоміжна технологія отримує для цього елемента керування, має зрозуміло передавати його призначення.
Збережений запис вважають остаточним результатом. Розглядайте адміністративне поле та показану сторінку як окремі точки перевірки. Імпорт, повторно використане зображення або спеціальна логіка теми є підставою перевірити відтворений результат, тобто те, що фактично надає відповідна сторінка вітрини, перш ніж змінювати весь каталог.
Рекомендації Google щодо зображень також застерігають від заповнення текстових альтернатив ключовими словами. Пишіть про деталь або дію, потрібну покупцеві. Перелік пошукових термінів цього не пояснює.
Визначте, що додає кожне зображення
Перевіряйте зображення разом із навколишнім текстом і кожним посиланням або кнопкою, до яких воно належить. Запитайте, яка інформація або дія без нього стала б незрозумілою. Дерево рішень W3C розрізняє інформативне, функціональне та декоративне використання. Для зображення, повторно використаного в іншому місці, потрібне нове контекстне рішення. Пізніший ракурс у галереї не стає автоматично декоративним лише тому, що назву товару вже показано.
Розгляньмо вигаданий магазин, що продає синю сумку через плече. Це вигадані приклади формулювань, а не описи, перевірені за реальним каталогом.
| Розміщення | Рішення, яке слід перевірити |
|---|---|
| Вигляд спереду | Опишіть важливий видимий вигляд, наприклад синю сумку із заокругленим клапаном. |
| Великий план застібки | Опишіть видиму деталь застібки, яку додає цей ракурс. |
| Інший колір | Узгодьте опис зі світлиною та вибраним варіантом. |
| Елемент керування галереєю лише із зображенням | Зробіть дію елемента керування зрозумілою, наприклад відкриття ракурсу із застібкою. |
| Суто декоративний повтор | Розгляньте навмисно порожню текстову альтернативу після перевірки інформації та функції. |
Порожня текстова альтернатива означає навмисний атрибут alt="". Рекомендації W3C щодо декоративних зображень відрізняють це від відсутності атрибута. Для зображення в картці товару, що міститься в посиланні, достатній текст у межах того самого посилання може робити порожню альтернативу доречною. Окрема назва товару поруч не надає автоматично назву посиланню, що складається лише із зображення.
Залишайте докладну інформацію про розміри або складання доступним вмістом сторінки. Рекомендації W3C щодо складних зображень передбачають повніше текстове пояснення, коли коротка альтернатива не може передати інформацію. Не намагайтеся вмістити інструкції зі схеми в короткий опис, відкидаючи решту.
Напишіть і збережіть перевірений зразок
Підготуйте зразок, який можна перевірити до застосування методу в усьому каталозі. Ми б використали запис з URL-адресою сторінки, мовою, вибраним варіантом, посиланням на зображення, призначенням, запропонованим формулюванням і результатом перевірки. Мініатюра або чітке посилання на медіафайл допомагає перевіряльнику зіставити рядок із фактичним зображенням, а не здогадуватися за іменем файлу.
- Запишіть внесок зображення. Укажіть, що покупець має отримати від цього ракурсу та що вже надає текст поруч. Зазначте, чи є зображення частиною посилання або кнопки.
- Створіть коротку текстову альтернативу. Збережіть помітну видиму деталь. Звірте колір та інші важливі факти з правильною світлиною і записом у каталозі. Не вигадуйте матеріал, місткість чи сертифікацію за зовнішнім виглядом.
- Перевірте пропозиції, перш ніж приймати їх. Згенерований опис є чернеткою. Попросіть редактора товару перевірити зміст і призначення тексту, зокрема вибраний варіант і мову.
- Перевірте незрозумілі наявні значення. Якщо поле містить складські коди або незвичайне форматування, запитайте відповідального фахівця, чи залежить від них спеціальна логіка галереї. Перевірте зміни в дозволеному попередньому перегляді або на іншому зразку, де їх можна скасувати, перш ніж масово замінювати ці значення.
- Збережіть через відповідне поле медіафайлу. Поточна довідка Shopify для комп’ютерів спрямовує до розділу “Товари”, потім до товару та його медіафайлу. Виберіть “Додати alt-текст”, введіть перевірене формулювання та натисніть “Зберегти alt-текст”. Цей шлях стосується медіафайлів товару. Зображення в описах або розділах теми можуть редагуватися в іншому місці.
- Передайте проблеми з реалізацією відповідальному фахівцю. Якщо поле або елемент керування не може передати потрібне призначення, надайте сторінку, посилання на зображення та бажаний результат. У запропонованій нами роботі над сайтом електронної торгівлі така передача відокремлює рішення щодо вмісту від зміни теми та її перевірки.
Перевірте вітрину, перш ніж змінювати каталог
Після збереження відкрийте відповідну сторінку вітрини й перевірте саме те місце, яке ви редагували. Перевірте текстову альтернативу зображення, доступну назву кожного елемента керування, до якого воно належить, і результат зміни варіанта або ракурсу галереї. Якщо ви не можете перевірити це самостійно, попросіть відповідального фахівця показати результат і зіставити його з вашим записом до поширення змін.
- Зіставте фактичне зображення. За допомогою інструментів перевірки браузера або відповідального фахівця прочитайте атрибут
altвідтвореного зображення. Порівняйте його з підготовленим формулюванням і світлиною, яка зараз показана. - Перевірте назву й дію елемента керування. Для посилання або кнопки перевірте як позначку, надану допоміжній технології, так і текстову альтернативу зображення. Переконайтеся, що зазначена дія або місце призначення відповідає результату активації елемента керування. Самого опису зображення може бути недостатньо для визначення повної назви елемента керування.
- Змініть ракурс і варіант. Відкрийте деталь застібки, виберіть інший видимий колір і знову перевірте відповідний результат. Якщо опис залишається прив’язаним до неправильного зображення, запишіть для відповідального фахівця точну послідовність дій.
- Знову відкрийте сторінку та потрібну мову. Перевірте, чи збережена зміна досі присутня в потрібному місці. Записуйте невирішені випадки окремо, зокрема коли потрібно дослідити процес імпорту або перекладу.
Перевірка в браузері оцінює реалізацію. Кваліфікована перевірка за допомогою засобу читання з екрана може оцінити процес покупок із цією допоміжною технологією. Чітко визначайте межі кожної перевірки. “Прості перевірки” W3C застерігають, що попередні перевірки не є остаточними, тому ані заповнене поле, ані цей зразок не підтверджують доступність усього магазину. Наші перші перевірки доступності вашого сайту охоплюють ширші завдання, зокрема роботу з клавіатури та форми.
Підтримуйте правильність альтернатив після редагування
Призначте відповідального за вихідний текст і повторюйте відповідну перевірку, коли змінюється світлина, варіант, мова, тема або імпорт. Якщо каталог наповнюють кілька систем, з’ясуйте, яка з них керує полем. Ми б додали цю відповідність до процесу інтеграції каталогу та CRM, перш ніж поширювати ручні зміни, які може замінити інший процес.
Відстежуйте перевірені місця, підтверджені на вітрині формулювання та невирішені випадки. Ці записи показують виконану роботу й те, що ще потребує уваги. Вони не вимірюють вплив на продажі. Зберігайте разом посилання на зображення, поточне формулювання, ім’я редактора й умову наступної перевірки, щоб інша людина могла підтримувати те саме рішення.
Як ми можемо допомогти
Ми б почали з ракурсів товару й узгодили, що має передавати кожен із них. Потім передача роботи пов’язує формулювання редактора з місцем збереження, результатом на вітрині та будь-якою невирішеною поведінкою елемента керування. Почніть власний запис із товару, галерея якого показує різні деталі, і перевірте зразок, перш ніж поширювати зміни.
