Список перевірки доступності сайту для малого бізнесу (на основі WCAG)

Практична перевірка доступності за WCAG 2.2: клавіатура й фокус, текст, контраст, підписи та помилки форм, альтернативний текст зображень і межі автоматичних перевірок.

Цей список охоплює перевірки, які власник малого бізнесу може виконати приблизно за годину без спеціального програмного забезпечення: користуватися сайтом лише клавіатурою, перевірити розмір і контраст тексту, підписи й зрозумілі помилки кожного поля форми, а також альтернативний текст зображень. Він ґрунтується на WCAG 2.2 — стандарті, на який посилається більшість законів і правил, — та на простих перевірках W3C. Успішна перевірка не означає юридичної відповідності сайту; вона допомагає виявити поширені перешкоди.

1. Перевірка клавіатури й фокуса

Відкладіть мишу. Натискайте Tab від початку сторінки до кінця, потім Shift+Tab у зворотному напрямку.

[ ] Після першого Tab з’являється посилання «Перейти до вмісту» (корисно за довгого меню)
[ ] До кожного посилання, кнопки й поля форми можна перейти клавішею Tab
[ ] Завжди видно, де перебуває фокус (контур або підсвічування)
[ ] Фокус рухається логічно: згори донизу, зліва направо
[ ] Меню відкривається клавішею Enter або Space і закривається Escape
[ ] Спливні вікна закриваються клавіатурою, фокус повертається на сторінку
[ ] Фокус ніде не затримується (можна продовжити Tab)
[ ] Закріплена шапка не перекриває вибраний елемент

2. Текст, контраст, підписи й помилки форм

[ ] Основний текст читабельний за звичайного масштабу (приблизно 16px або більше)
[ ] За збільшення до 200% елементи не накладаються й не обрізаються; немає бічного прокручування
[ ] Контраст тексту щонайменше 4.5:1 (3:1 для великого тексту) — перевірте інструментом
[ ] Посилання відрізняються від тексту не лише кольором
[ ] Кожне поле має видимий підпис (текст-підказка не є підписом)
[ ] Обов’язкові поля позначені текстом, а не лише кольором
[ ] Помилки пояснюють проблему та спосіб її виправлення поруч із полем
[ ] На кнопках написано їхню дію («Надіслати запит», а не «Надіслати» чи лише піктограма)
[ ] Мову сторінки задано, заголовки йдуть по порядку (H1, H2, H3)

Перевірте комбінації кольорів засобом перевірки контрасту кольорів. Показники контрасту походять із критерію WCAG мінімального контрасту.

3. Призначення зображень і текстові альтернативи

Складні випадки розглядає дерево рішень W3C щодо alt-тексту.

4. Автоматичні перевірки та тестування людиною

Автоматичні перевірки знаходятьОцінити може лише людина
Відсутні атрибути altЧи справді корисний alt-текст
Низький контраст на однотонному тліКонтраст тексту на фото й відео
Поля форми без підписівЗрозумілість підписів і помилок
Відсутня мова сторінки, порожні посиланняПорядок клавіатури, видимість фокуса, пастки фокуса
Пропущені рівні заголовківЧи описують заголовки вміст

Спочатку запустіть автоматичну перевірку (оцінювач сайту має базові перевірки доступності; W3C веде перелік інструментів оцінювання), потім вручну пройдіть наведені кроки. Якщо серед клієнтів багато людей з інвалідністю, замовте тестування за участю користувачів з інвалідністю.

Заповнений журнал результатів (позначена демонстрація)

Вигаданий бізнес «Harbour Line Plumbing». Це приклад формату, а не реальна компанія чи результат.

Дата перевірки: [дата]   Перевірив: власник   Сторінки: Головна, Послуги, Контакти
Браузер/пристрої: лише клавіатура ноутбука; телефон із програмою читання з екрана
#  Сторінка  Проблема                                  Посилання WCAG  Виправлено?
1  Головна   У кнопки дзвінка немає підпису («кнопка»)  4.1.2           так
2  Головна   Білий текст на фото важко читати            1.4.3           так, затемнено тло
3  Контакти  Індекс у полі — лише підказка              3.3.2           так
4  Контакти  Помилка лише «Неприпустимо»                3.3.1           так, «Введіть номер телефону»
5  Послуги   Alt галереї містить назви файлів             1.1.1           так
6  Усі       Фокус посилань меню не видно                 2.4.7           відкрите — передано розробнику
Не перевірено: субтитри відео (на сайті немає відео)
ПОРОЖНІЙ ШАБЛОН
Дата / перевірив / сторінки / браузери й пристрої:
#  Сторінка  Проблема  Посилання WCAG  Виправлено? (так / відкрите + примітка)
Не перевірено:

5. Фіксуйте результати без заяв про юридичну відповідність

Редагування натисканням у конструкторі We.Inc для виправлення підписів і тексту сторінки
Виправлення підписів і тексту безпосередньо в конструкторі We.Inc.

Наступний крок

Почніть із бізнес-шаблону у конструкторі сайтів We.Inc, потім пройдіть цей список і перевірте сайт оцінювачем сайту перед публікацією. Безкоштовний план дає до 3 сайтів на шаблонах за адресою we.inc (без кредитів AI та власного домену); Starter за $20 на місяць додає створення за допомогою AI й власні домени (ціни). Плануєте виправлення чи переробку? Скористайтеся калькулятором вартості сайту.

Почніть створювати сайт для свого бізнесу

Поширені запитання

Якого стандарту має дотримуватися список перевірки доступності сайту?

WCAG 2.2 рівня AA — стандарт, на який посилається більшість законів і правил. Список охоплює найпоширеніші проблеми малого бізнесу, але не всі критерії.

Чи зробить автоматична перевірка мій сайт доступним?

Ні. Автоматичні інструменти знаходять відсутні атрибути та частину проблем контрасту, але людина має перевірити клавіатуру, фокус, підписи й зрозумілість alt-тексту.

Чи означає успішне проходження списку відповідність сайту ADA?

Ні. Жоден список не гарантує юридичної відповідності. Ведіть журнал із датами, опублікуйте чесну заяву про доступність і зверніться до юриста щодо своїх обов’язків.

Почати безкоштовно · Банківська картка не потрібна

Product

Who It's For

Features

Resources

Company

View Sitemap