ДОСТУПНІСТЬ / ІНТЕРНЕТ-МАГАЗИНИ
Клієнти, які не можуть оформити замовлення, не можуть купити
Знаходимо і виправляємо проблеми доступності, які зупиняють покупців, - у фільтрах товарів, кошику, оформленні замовлення і спливних вікнах. WCAG 2.2 AA, виправлено в коді вашого магазину.
Безкоштовно. Без дзвінків від продажників. Результати прийдуть на email за кілька хвилин.
ВІД ЗАСНОВНИКА
Привіт, я Олексій.
Я інженер, який стоїть за add.black. Понад 9 років створюю сайти на WordPress, WooCommerce і Laravel і досі сам пишу та перевіряю код.
Я займаюся доступністю, бо хороший бізнес не має втрачати клієнтів через кнопку, яка не працює з клавіатури, форму, яку не може прочитати скрінрідер, чи віджет, що обіцяє виправлення, але нічого не змінює в коді.
Якщо у вас є питання щодо результатів, ви пишете мені, а не відділу продажів. Відповідаю просто: що заважає вашим відвідувачам і що потрібно, щоб це виправити.
Олексій Денисюк, засновник add.black
01 ПРОБЛЕМА
Чому це важливо
Кожне заблоковане замовлення - втрачений продаж
Понад кожен четвертий дорослий у США має певну форму інвалідності. Оформлення замовлення, яке працює лише з мишею, тихо втрачає ці замовлення.
Джерело: CDC: Disability Impacts All of Us
Магазини - часта ціль
Претензії щодо сайтів за ADA часто стосуються інтернет-магазинів, де зламане оформлення замовлення чи фільтр без підпису легко продемонструвати.
Виправлення допомагають кожному покупцю
Зрозумілі підписи, читабельні ціни і спливні вікна, які закриваються клавішею Esc, полегшують покупку на будь-якому пристрої.
02 КОД, А НЕ ВІДЖЕТИ
Чому б просто не поставити віджет?
03 ЯК ЦЕ ПРАЦЮЄ
Чотири кроки, перший безкоштовний
Безкоштовна перевірка
Автоматичне сканування головної сторінки на комп'ютері й телефоні, головні проблеми пояснені простими словами.
Кілька хвилин
Повний аудит
Автоматичне і ручне тестування - клавіатура, скрінрідер, контраст, форми - зі звітом за пріоритетами.
Близько тижня
Виправлення
Виправляємо проблеми у вашому коді. WordPress, WooCommerce, Shopify, Laravel і сайти на власному коді.
Фіксована ціна
Моніторинг
Щомісячні перевірки, щоб новий контент і оновлення плагінів знову не зламали доступність.
Щомісяця
04 WCAG 2.2 AA
Що ми перевіряємо
Кошик і оформлення замовлення
Кожен крок оформлення працює з клавіатурою і скрінрідером.
Пріоритет для вашої галузі
Фільтри, спливні й модальні вікна
Фільтри товарів, банери cookie і спливні вікна зручні й ніколи не затримують фокус.
Пріоритет для вашої галузі
Фото товарів
Фото товарів мають корисний alt-текст, який описує головне.
Пріоритет для вашої галузі
Навігація з клавіатури
Кожне посилання, меню і кнопка працюють без миші.
Підтримка скрінрідерів
Вміст і елементи керування озвучуються зрозуміло і по порядку.
Колірний контраст
Текст і елементи керування читаються людьми зі слабким зором.
Заголовки і структура
Сторінки мають логічну структуру, яку легко переглянути й якою легко переходити.
Субтитри до відео і медіа
Відео мають субтитри, а аудіо - текстову альтернативу.
05 ГАЛУЗІ
Для кого це
Інтернет-магазини
Фільтри товарів, кошик, оформлення замовлення і спливні вікна.
Школи й автори курсів
Сторінки курсів, документи, відео і запис на навчання.
Клініки й медицина
Запис на прийом, контакти і форми для пацієнтів.
Юридичні фірми
Форми звернень, профілі юристів і напрями практики.
Для будь-якого бізнесу із сайтом: якщо люди через нього дізнаються, купують, записуються чи зв'язуються з вами, він має працювати для всіх. Accessibility for any business
06 ПРИКЛАД ЗВІТУ
Приклад звіту
Так виглядає звіт аудиту. Сайт і результати нижче вигадані.
Аудит доступності - приклад
example-store.com
Перевірено за WCAG 2.2, рівень AA
62/100
Оцінка доступності
27 проблем за рівнем серйозності
- 3 Критична
- 7 Серйозна
- 12 Помірна
- 5 Незначна
Приклади проблем
Критична
Кнопка "Оформити замовлення" недоступна з клавіатури
- Що не так
- Кнопка - це стилізований
<div>, тому клавіша Tab її пропускає, а скрінрідери не оголошують її як кнопку. - Кого стосується
- Користувачі клавіатури, скрінрідерів і пристроїв-перемикачів.
- Як ми виправляємо
- Замінити її справжнім елементом
<button>і додати чітко помітний стиль фокусу.
Серйозна
Поля оформлення замовлення без підписів
- Що не так
- Поля мають лише текст-підказку, який зникає під час введення і читається ненадійно.
- Кого стосується
- Користувачі скрінрідерів, люди з порушеннями пам'яті чи когнітивними порушеннями.
- Як ми виправляємо
- Додати видимі елементи
<label>, атрибути autocomplete і повідомлення про помилки, пов'язані з кожним полем.
Помірна
Акційні ціни з низьким контрастом
- Що не так
- Світло-сірий текст ціни на білому має контраст 2.8:1 (мінімум - 4.5:1).
- Кого стосується
- Люди зі слабким зором і всі, хто читає з телефона на вулиці.
- Як ми виправляємо
- Затемнити колір тексту до контрасту щонайменше 4.5:1 без зміни дизайну.
07 ЦІНИ
Ціни
Безкоштовна перевірка
$0
- Автоматичне сканування головної сторінки
- Результати на email за кілька хвилин
- Без дзвінків від продажників
Аудит доступності
від$490
- Повний звіт за WCAG 2.2 AA
- Список виправлень за пріоритетами
- 30-хвилинний дзвінок з розбором
Моніторинг
$99/міс
- Щомісячні сканування
- Виправлення нових проблем
- Оновлений звіт щомісяця
Виправлення оцінюємо після аудиту - фіксована ціна, без погодинних сюрпризів.
08 ПРО НАС
Хто виконує роботу
add.black - невелика студія сеньйорів: інженер з понад 10 роками досвіду створення сайтів на WordPress, WooCommerce і Laravel та дизайнер, який стежить, щоб виправлення не ламали ваш бренд. Ми використовуємо AI, щоб пришвидшити тестування й виправлення; кожну зміну перевіряє і тестує людина.
Alex Denysiuk
Founder & lead engineer
10+ years in WordPress, WooCommerce and Laravel. Plans, writes and reviews the code on every project.
LinkedIn: Alex Denysiuk
Mary Nesterchuk
Designer & illustrator
7+ years of design and illustration. Interfaces, brand visuals and custom artwork that make sites feel human.
LinkedIn: Mary Nesterchuk
09 ПИТАННЯ
Питання
Ви працюєте з темами WooCommerce і Shopify?
Так. Виправляємо шаблони теми, поля оформлення замовлення і вивід плагінів чи застосунків там, де це дозволяє код. Якщо сторонній застосунок виправити неможливо, ми про це скажемо і запропонуємо доступну альтернативу.
Чи зміниться дизайн мого магазину?
Майже завжди вигляд лишається тим самим. Більшість виправлень - у розмітці, підписах, стилях фокусу і контрасті.
Чи зробить це мій сайт відповідним вимогам ADA?
Ніхто не може чесно гарантувати юридичний результат. WCAG 2.2 AA - стандарт, за яким найчастіше оцінюють доступність сайтів, і ми проводимо аудит і виправляємо саме за ним. З юридичних питань зверніться до юриста.
Ви використовуєте оверлей чи плагін?
Ні. Ми виправляємо вихідний код.
Скільки це триває?
Безкоштовна перевірка: кілька хвилин, результати приходять на email. Аудит: близько тижня для типового сайту малого бізнесу. Виправлення залежать від сайту.
З якими платформами ви працюєте?
WordPress, WooCommerce, Shopify, Laravel і більшість сайтів на власному коді.
Чи потрібно давати вам доступ до сайту?
Для перевірки чи аудиту - ні. Для виправлень - так, або ми можемо передати виправлення вашому розробнику.
Де ви знаходитеся?
Ми віддалена студія з Європи, доступна в робочі години США.
10 БЕЗКОШТОВНА ПЕРЕВІРКА
Дізнайтеся, що заважає вашим відвідувачам - безкоштовно.
Безкоштовно. Без дзвінків від продажників. Результати прийдуть на email за кілька хвилин.