Доступность сайта (a11y) — стоит ли вкладываться бизнесу

Пожилой клиент пытается прочитать условия, но текст серый по светло-серому и мелкий — он щурится, сбивается и уходит. А он был готов купить. Доступность — не про галочку «для инвалидов», а про то, чтобы сайтом мог пользоваться каждый, включая половину ваших обычных клиентов после 45. Разбираем базовый минимум за разумные деньги.

Пожилой клиент пытается прочитать на вашем сайте условия доставки. Текст серый по светло-серому и мелкий: он щурится, увеличивает страницу пальцами, сбивается и уходит. А ведь он был готов купить. Доступность (её обозначают a11y) — это не про «галочку для инвалидов». Это про то, чтобы сайтом мог пользоваться каждый, включая половину ваших обычных клиентов старше 45.

Базовый минимум — четыре вещи

  • Контраст. Тёмный текст на светлом фоне, соотношение не ниже 4.5:1. Модный светло-серый на белом — первый убийца читаемости, особенно на телефоне под солнцем.
  • Размер шрифта. От 16px для основного текста. Мелкие 12px «чтобы влезло красиво» дочитывают единицы.
  • Alt у картинок. Текстовое описание изображения — для незрячих, для поисковика и на случай, если картинка не загрузилась.
  • Навигация с клавиатуры. По меню и форме можно пройти клавишей Tab, видно, где сейчас фокус. Чиня это, попутно чинишь и мобильные баги.

Почему это выгодно, а не благотворительность

  • Плюс к аудитории. Старший возраст, слабое зрение, яркое солнце на экране — это всё платёжеспособные клиенты, которых вы иначе теряете молча.
  • Плюс к SEO. Alt-тексты, честная структура заголовков, читаемость — ровно то, что любят Яндекс и Google.
  • Плюс к юзабилити для всех. Крупный контрастный шрифт удобен и молодому здоровому человеку, читающему на бегу в метро.

Сколько это стоит

Мало, если заложить сразу на этапе дизайна: контраст и размеры — это просто грамотные настройки, а не отдельная разработка. Дороже становится, когда сайт уже сделан «красиво, но нечитаемо» и всё приходится переверстывать. Поэтому доступность — не финальная опция, а требование к макету с самого начала.

Не нужно гнаться за полным соответствием стандартам WCAG уровня AAA — для большинства коммерческих сайтов это перебор. Базовый минимум из четырёх пунктов выше закрывает 90% реальной пользы за разумные деньги.

Как проверить свой сайт за 5 минут

  1. Отойдите от монитора на шаг — основной текст всё ещё читается или сливается?
  2. Откройте сайт на телефоне на улице днём — видно буквы или блёкло?
  3. Пройдите по форме одной клавишей Tab — доходите до кнопки «Отправить» или застреваете?

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

Аудит сайта
Услуга по теме — обсудим ваш проект.

Есть задача по теме? Напишите — вернёмся с оценкой и сроками.

Написать в Telegram Написать в MAX