Доступність магазину на WooCommerce Ядро підтягнули — ламаються тема, розширення і шлях до оплати

Що вже виправили в самому WooCommerce

Якщо магазин на свіжій версії і тема не втручається в шаблони, частину роботи вже зроблено за вас — це варто знати, перш ніж платити за «приведення до стандарту».

• Модальні вікна утримують і повертають фокус, а їхню появу озвучують
• Поля в оформленні замовлення, вході й особистому кабінеті підписані, помилки пов’язані з полями
• Зміна кошика і вибір варіанта товару оголошуються екранному диктору
• У вкладок, акордеонів і фільтрів задані ролі
• У кнопок прибрали неоднозначні та порожні підписи
• Виправлено структуру заголовків у шаблонах товару, оформлення, особистого кабінету й міні-кошика
• Клавіатура у фільтрах товарів, відгуках і міні-кошику — пастки фокуса й порядок переходу

Чому це не доходить до вашого магазину

1. 01

   Стара версія

   Виправлення живуть у нових випусках. Магазин, який не оновлювали рік-два, їх просто не отримав — і перше, що ми перевіряємо, це версія WooCommerce і WordPress.

2. 02

   Тема тримає свої копії шаблонів

   Теми часто кладуть до себе копії шаблонів WooCommerce, щоб змінити верстку. Така копія застигає в тому вигляді, в якому її зробили: поліпшення ядра до неї не доходять. У розділі «Стан» WooCommerce такі шаблони позначені як застарілі — це перше місце, куди ми дивимося.

3. 03

   Розширення

   Свотчі варіантів, фільтри, калькулятори доставки, віджети відгуків і чати малюють свою розмітку. Про доступність ядра вони не знають, і їх треба перевіряти по одному.

4. 04

   Налаштування і вміст

   Описи товарів, назви варіантів, тексти кнопок і зображення з текстом усередині — це ваш контент. Жодне оновлення його не виправить.

Що ламається в магазині найчастіше

1. 01

   Кнопки «У кошик» у каталозі

   На сторінці категорії двадцять однакових кнопок. Екранний диктор перелічує «у кошик, у кошик, у кошик» — який товар він кладе, людина не знає. Лікується додаванням назви товару в доступне ім’я кнопки.

2. 02

   Вибір варіанта

   Колір і розмір часто роблять квадратиками-картинками без імені й без стану «обрано». З клавіатури по них не пройти, а диктор не каже, що саме обрано зараз.

3. 03

   Поле кількості

   Поле зі стрілками «плюс-мінус» зазвичай не підписане, а кнопки збільшення і зменшення не мають імен. У кошику таких полів стільки ж, скільки товарів.

4. 04

   Фільтри

   Повзунок ціни майже завжди недоступний з клавіатури, а результат фільтрації підвантажується мовчки: сторінка оновилася, але диктор про це не сказав.

5. 05

   Галерея і збільшення

   Лупа й слайдер фотографій — часте джерело пасток фокуса. Окрема біда — характеристики, вшиті в зображення: для диктора їх не існує.

6. 06

   Оформлення замовлення

   Найдорожче місце: помилки оплати показуються кольором без тексту, поля адреси підписані підказкою всередині, а крок доставки оновлюється без оголошення. Людина не розуміє, чому замовлення не йде.

Що робимо ми

1. 01

   Проходимо весь шлях покупки

   Не одну сторінку, а сценарій: каталог → картка → кошик → оформлення → лист про замовлення. Лише з клавіатури і з екранним диктором. Більшість знахідок у магазині живе саме між сторінками.

2. 02

   Розбираємося з темою

   Дивимося, які шаблони тема перевизначила і наскільки вони застаріли. Часто правильна відповідь — не лагодити копію, а прибрати її й повернутися до шаблону ядра, де все вже виправлено.

3. 03

   Решту правимо в дочірній темі

   Імена кнопок із назвою товару, підписи полів кількості, стан у свотчів, оголошення про зміну кошика. Правки йдуть у дочірню тему, щоб оновлення їх не стерло.

4. 04

   Перевіряємо розширення

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

5. 05

   Готуємо заяву

   Пишемо текст заяви про доступність і ставимо окремою сторінкою з посиланням у підвалі. Залишені обмеження перелічуємо в ній чесно.

Чого ми не робимо

• Не ставимо віджет доступності замість роботи над магазином
• Не обіцяємо «повної відповідності»: навіть розробники WooCommerce її не заявляють
• Не чіпаємо приймання платежів без узгодження: будь-яка правка на кроці оплати перевіряється тестовим замовленням
• Не змінюємо дизайн картки й каталогу — працюємо з кодом, а не з макетом

Перевірте свій магазин

Безкоштовна перевірка дивиться одну сторінку, адресу якої ви ввели. Для магазину цього мало: перевірте по черзі головну, сторінку категорії й картку товару — результати зазвичай різні, і найгірше буває саме картка.