Чек-лист доступности сайта для малого бизнеса (WCAG)

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

Этот чек-лист охватывает проверки, которые владелец малого бизнеса может провести примерно за час без специального программного обеспечения: пользоваться сайтом только с клавиатуры, проверить размер текста и контраст, убедиться, что у каждого поля формы есть подпись и понятные сообщения об ошибках, а у изображений — подходящие текстовые описания. Он основан на WCAG 2.2 — стандарте, на который ссылается большинство законов и политик, — и на простых проверках W3C. Успешное прохождение не означает, что сайт соответствует закону; чек-лист помогает найти наиболее частые барьеры.

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

Отложите мышь. Нажимайте Tab от начала страницы до конца, затем Shift+Tab в обратную сторону.

[ ] При первом нажатии Tab появляется ссылка «Перейти к содержимому» (удобно для длинных меню)
[ ] До каждой ссылки, кнопки и поля формы можно дойти клавишей Tab
[ ] Всегда видно, на каком элементе находится фокус (контур или подсветка)
[ ] Фокус перемещается в понятном порядке — сверху вниз, слева направо
[ ] Меню открывается клавишей Enter или пробелом и закрывается клавишей 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, затем пройдите этот чек-лист и запустите проверку сайта до публикации. В Free доступны до 3 сайтов на основе шаблонов с адресом we.inc (без кредитов AI и собственного домена); Starter за $20 в месяц добавляет создание сайтов с помощью AI и собственные домены (тарифы). Планируете бюджет на исправления или переделку? Используйте калькулятор стоимости сайта.

Начните создавать сайт для своего бизнеса

Частые вопросы

Какому стандарту должен соответствовать чек-лист доступности сайта?

WCAG 2.2 уровня AA — стандарт, на который ссылается большинство законов и политик. Этот чек-лист охватывает наиболее частые проблемы малого бизнеса, но не все критерии.

Может ли автоматическая проверка сделать сайт доступным?

Нет. Автоматические инструменты находят отсутствующие атрибуты и некоторые проблемы контраста, но человеку нужно проверить клавиатурную навигацию, фокус, понятность подписей и alt-текста.

Означает ли прохождение этого чек-листа, что мой сайт соответствует ADA?

Ни один чек-лист не гарантирует соблюдения закона. Ведите журнал с датами, опубликуйте честное заявление о доступности и узнайте у юриста о своих обязанностях.

Начать бесплатно · Банковская карта не нужна

Product

Who It's For

Features

Resources

Company

View Sitemap