К содержимому
← Все статьи
6 мин чтения

Доступность сайта: базовые требования, которые стоит выполнить

Доступность обычно воспринимают как заботу о людях с ограничениями. На практике она улучшает сайт для всех — включая человека, который смотрит его на солнце одной рукой.

Кому это на самом деле помогает

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

Есть и косвенный эффект: почти все требования доступности — это одновременно требования к качеству разметки. Осмысленные заголовки, alt-тексты и правильные теги делают страницу понятнее и поисковым системам.

Базовый чек-лист

Контраст текста к фону — достаточный, чтобы читать при дневном свете (светло-серый текст на белом это нарушает чаще всего). Размер основного текста не меньше 16 пикселей. Кликабельные элементы достаточно крупные, чтобы попасть пальцем.

Все изображения, несущие смысл, имеют alt-текст; декоративные — пустой alt. Форма связана с подписями через label, а не полагается на плейсхолдер. Ошибки формы описаны текстом, а не только цветом рамки: человек с дальтонизмом красную рамку не различит.

Навигация с клавиатуры

Пройдите весь сайт клавишей Tab, не касаясь мыши. Вы должны видеть, где находится фокус, добираться до всех ссылок и кнопок и уметь закрыть модальное окно клавишей Escape.

Частая ошибка — убранная обводка фокуса «чтобы не портила дизайн». Убирать её нельзя, можно заменить на аккуратную собственную. Вторая — модальные окна и выпадающие меню, из которых фокус уходит на страницу под ними, и человек теряется в невидимых элементах.

Как проверить за полчаса

Запустите Lighthouse в браузере — вкладка Accessibility даст список автоматически обнаруживаемых проблем: контраст, отсутствующие alt и label, некорректная иерархия заголовков.

Дальше вручную: пройдите ключевой сценарий клавиатурой, увеличьте масштаб страницы до 200% и убедитесь, что вёрстка не рассыпалась, отключите изображения и проверьте, понятен ли смысл. Автоматика ловит примерно половину проблем, остальное видно только руками.

Нужен сайт или реклама? Обсудим ваш проект.