Проверить доступность своего сайта можно за полчаса и без программ. Дальше — шесть способов в порядке от самого дешёвого. Первые четыре не требуют ничего, кроме браузера.
1. Пройти сайт одной клавиатурой
Уберите мышь и нажимайте Tab. Годная проверка выглядит так: вы всегда видите, где находится фокус (рамка или подсветка), порядок переходов совпадает с порядком блоков на экране, из меню можно выйти, а не застрять в нём, а выпадающие списки открываются с клавиатуры. Классическая поломка — ловушка фокуса: пользователь попадает в элемент и не может уйти дальше.
2. Увеличить страницу до 200%
Ctrl и «+» четыре раза. Смотреть надо не на то, «стало ли крупно», а на то, не разъехалось ли: не наложились ли подписи, не обрезался ли текст в кнопках, не пропало ли меню. Требование AA прямо про это: контент должен читаться при масштабе 200% без горизонтальной прокрутки.
3. Проверить контраст
Отношение яркостей текста и фона считается по формуле WCAG. Порог для обычного текста — 4,5:1, для крупного (от 24 px или от 18,7 px полужирного) — 3:1. Глазами это не оценивается: светло-серый текст на белом выглядит «стильно» и проваливает норму.
Насколько это массовая история — видно по нашему аудиту: из 47 проверенных сайтов каталога хотя бы одно место ниже порога нашлось у 46. Чаще всего это цена, акции, подписи под фото и текст на цветных плашках.
4. Посмотреть на картинки без описания
В браузере отключите показ картинок (или откройте страницу в режиме чтения). Смысл
проверки: всё, что несёт информацию, должно иметь текстовый эквивалент в атрибуте
alt. Декоративная картинка законно имеет alt="" — пустой, но
именно пустой, а не отсутствующий: отсутствие атрибута скринридер прочитает как имя файла.
По каталогу картинки без описания есть у 44 сайтов из 47, а текст мельче 12 px — у 27.
5. Включить скринридер
NVDA на Windows — бесплатный, ставится за пять минут. Достаточно послушать главную: читается ли заголовок как заголовок, есть ли у ссылок понятные названия вместо «здесь» и «подробнее», произносится ли цена вместе с единицей. Это единственный способ поймать то, что не видно в коде: порядок и смысл озвучки.
6. Найти спецверсию и включить её
Последнее по порядку и первое по частоте споров: найдите кнопку версии для слабовидящих, нажмите и проверьте, что изменилось. Три типовые поломки: ссылка ведёт на несуществующую страницу, режим работает только на главной, переключатель перекрыт баннером cookie.