Доступність із Shopify

Теми та застосунки Shopify визначають доступність. Оформлення замовлення значною мірою задане Shopify.

Поширені місця висновків

Кольори теми із замалим контрастом, зображення товарів без альтернативного тексту, застосунки відгуків і спливаючих вікон без керування з клавіатури, мегаменю, які відкриваються лише при наведенні, каруселі без паузи. Ядро Shopify зазвичай не є проблемою — проблема в темі, застосунках і контенті, створеному в редакторі форматованого тексту.

Перевірити й обрати тему

Тема визначає контраст, видимий фокус, структуру заголовків і керування меню та фільтрами з клавіатури. Критерії перед вибором: пройдіть головну сторінку, колекцію і сторінку товару клавішею Tab — фокус завжди видимий? Меню відкривається без миші? Контраст тексту й кнопок щонайменше 4,5:1? Стандартні теми Online Store 2.0 (Dawn і похідні) — надійна відправна точка; для платних тем допомагає тест клавіатурою на демо і запит до постачальника щодо декларації доступності.

Зображення товарів, варіанти та форматований текст

Дайте кожному зображенню товару в адмінці альтернативний текст, який описує вміст — не ім'я файлу. Те саме стосується зображень варіантів. Текст, вбудований як графіка в значок чи банер («Розпродаж», «Лише сьогодні»), невидимий для програм читання з екрана; використовуйте справжній текст. У редакторі форматованого тексту опису товару використовуйте рівні заголовків чисто (не просто збільшуйте текст), а списки — як справжні списки.

Застосунки та вбудовані віджети

Застосунки відгуків, спливаючих вікон, допродажу та банера файлів cookie часто вставляють власні віджети, які захоплюють фокус клавіатури, не мають підписів або показують накладки без можливості закрити. Тестуйте кожен застосунок окремо з клавіатури; застосунки слайдерів і зворотного відліку потребують паузи й не мають нічого блимати. Накладка доступності як застосунок не усуває структурних проблем і критикується організаціями людей з інвалідністю. У разі сумніву: приберіть застосунок.

Оформлення замовлення: що задає Shopify, а що ні

Стандартне оформлення замовлення Shopify підтримується Shopify і значною мірою побудоване доступно — там у вас мало важелів. На що ви впливаєте: розширення оформлення та власні поля (подарункове повідомлення, перевірка віку) можуть заважати користуванню з клавіатури чи програми читання з екрана, а шлях до оформлення — кошик, поле промокоду, вибір доставки — лежить у темі. Протестуйте й ці кроки.

Тестування та поширені запитання

Швидкий тест: керуйте головною сторінкою, колекцією і сторінкою товару лише клавіатурою, збільште в браузері до 200%, запустіть розширення, як-от WAVE або axe DevTools. Безкоштовне сканування a11yglass додатково перевіряє наданий HTML на контраст, альтернативні тексти, підписи, мову та структуру. Чи потрібна моєму магазину на Shopify декларація доступності? Зазвичай так — магазин, через який купують споживачі, є електронною комерцією в розумінні BFSG; див. сторінку про декларацію доступності. Чи оформлення замовлення Shopify вже доступне? Значною мірою відповідальність Shopify, але розширення можуть його зламати. Яка тема доступна? Знака немає — вирішальним є впровадження в конкретному випадку.

Як допомагає a11yglass

Безкоштовне сканування перевіряє наданий HTML і CSS на порушення WCAG, які можна розпізнати автоматично, і називає до кожного висновку критерій успіху та конкретний крок. Воно виявляє приблизно 20–35% проблем і не замінює повної оцінки.

Читати далі

Загальна інформація за наявними знаннями, не юридична консультація. Для окремого випадку зверніться до адвокатського бюро, що спеціалізується на ІТ-праві.