Accessibility (доступность)

Определение: Accessibility (доступность, a11y) — это когда сайт и интерфейс удобны для максимально разных людей, включая пользователей с ограничениями по зрению, слуху, моторике или восприятию. Проще: сайт должен быть читаемым, управляемым с клавиатуры, понятным для скринридера и не мешать пользователю выполнить задачу.

Зачем это нужно

• Чтобы больше людей могли пользоваться сайтом: не только «идеальные» пользователи с мышкой и хорошим зрением.
• Улучшить удобство для всех: понятные кнопки, читаемый текст и логичная навигация полезны каждому.
• Снизить точки трения: меньше ситуаций, когда человек не может заполнить форму или найти кнопку.
• Сделать сайт совместимым со скринридерами и навигацией с клавиатуры.
• Упростить поддержку и развитие интерфейса: стандартизированные элементы ведут себя предсказуемо.
• Повысить доверие к бренду: «ХОЧУ САЙТ» ценит удобство и заботится о пользователях.

Пример

Пользователь заходит на страницу услуги с телефона, но из-за временной травмы не может точно нажимать пальцем и пользуется клавиатурой на планшете. Он переходит по элементам клавишей Tab и видит заметную обводку фокуса: понятно, где он находится. В форме у каждого поля есть подпись, а при ошибке появляется текст “Введите телефон в формате +7…”, а не просто красная рамка.

Другой пользователь открывает сайт со скринридером. Если у кнопки есть понятный текст, у изображений — осмысленный ALT (когда он нужен), а у формы — корректные подписи, то скринридер озвучивает элементы нормально, и человек может отправить заявку без “угадайки”.

Скриншот

Подпись к скриншоту: пример страницы с видимым фокусом при переходе клавишей Tab, подписями у полей формы и понятными сообщениями об ошибках (а не только красной рамкой)

Частые ошибки

• Делать кнопки и ссылки без текста или без понятных подписей (например, только иконка без пояснения).
• Полагаться только на цвет: «ошибка выделена красным», но без текста пользователь может не понять причину.
• Убирать видимый фокус клавиатуры: пользователь не видит, где он находится на странице.
• Не добавлять альтернативный текст изображениям (ALT) там, где он нужен по смыслу.
• Сложные формы без подсказок и правильной логики ошибок (непонятно, что исправлять).

Связанные термины

• ALT
• Семантическая верстка
• UX
• Контраст
• Фокус (keyboard focus)
• Валидация формы
• Адаптивный дизайн

Наши услуги

• Доработка сайтов — улучшаем доступность: формы, контраст, навигацию с клавиатуры и тексты ошибок.
• Создание корпоративных сайтов — закладываем доступность в проектирование и верстку с самого начала.
• Техническая поддержка сайта — устраняем проблемы, из-за которых сайт становится неудобным для части пользователей.