Доступность лендинга - это контраст текста не ниже 4.5:1, шрифт от 16 пикселей на мобильном и кнопки размером не меньше 44 на 44 пикселя. Эти параметры проверяются инструментами вроде DevTools Chrome за несколько минут и напрямую влияют на заявки от аудитории 40+, которая читает лендинг с телефона на солнце.
Доступность - не только про людей с инвалидностью
Слово "доступность" ассоциируется со скринридерами и незрячими пользователями, и владелец лендинга барбершопа решает, что это его не касается. На практике те же самые правила решают судьбу заявки от совершенно обычного человека: 52-летней женщины, которая читает страницу с телефона на солнечной остановке, или мужчины после операции на глазах, которому неудобен мелкий серый текст.
Половина малого бизнеса в России работает на аудиторию 40+, и для неё контраст и размер шрифта решают не меньше, чем текст оффера.
Какой контраст текста должен быть на лендинге?
Серый текст на белом фоне выглядит стильно на мониторе дизайнера в затемнённой комнате и превращается в кашу на экране телефона под прямым солнцем. Контраст измеряется числом - соотношением яркости текста и фона, и стандарт WCAG требует минимум 4.5:1 для обычного текста и 3:1 для крупного заголовка.
Проверяется это не глазами, а инструментом: расширение WebAIM Contrast Checker или встроенная проверка контраста в DevTools Chrome при инспекции элемента. Частая ошибка лендингов - светло-серый текст #999999 на белом фоне: соотношение там около 2.8:1, заметно ниже нормы, хотя дизайнеру он казался достаточно тёмным.
Ещё одна частая ошибка - белый текст на светлом фоновом изображении без затемняющей подложки. Фото само по себе проходит проверку контраста в самом ярком месте кадра, но в тёмном углу текст сливается с деталями снимка. Простое решение - полупрозрачная тёмная плашка под текстом, а не борьба с самой фотографией через фильтры.
Размер шрифта: минимум для тела текста
Основной текст лендинга мельче 16 пикселей на мобильном заставляет часть аудитории увеличивать масштаб страницы вручную, а часть просто уходит, не дочитав. Заголовки блоков стоит держать не мельче 22-24 пикселей на мобильном, тело текста - не мельче 16, подписи под кнопками - не мельче 14.
Для заголовка первого экрана правило чуть мягче: крупный жирный текст от 24 пикселей стандарт разрешает делать с меньшим контрастом, потому что крупные буквы читаются легче даже при худшей чёткости. Этим иногда оправдывают светлый текст поверх фото именно в заголовке, но на тело статьи или блок с ценами то же послабление не распространяется.
Подробный разбор шрифтов, размеров и межстрочных интервалов для разных блоков лендинга - в статье Типография для лендинга.
Межстрочный интервал и длина строки
Плотный текст без воздуха между строками читается медленнее и с большей вероятностью ошибок восприятия у людей со сниженной остротой зрения. Комфортный межстрочный интервал для абзаца - 1.4-1.6 от размера шрифта. Строка длиннее 75-80 символов на широком десктопном экране тоже утомляет глаз: взгляд теряет строку при переходе к следующей.
Какого размера должны быть кнопки на лендинге?
Палец на экране телефона закрывает область примерно 10 на 10 миллиметров, а кнопка, нарисованная под курсор мыши, часто получается вдвое меньше. Рекомендованный минимум зоны нажатия - 44 на 44 пикселя, и это касается не только основной кнопки заявки, но и ссылок в меню, крестика закрытия попапа, стрелок в слайдере отзывов.
Отдельная беда - кнопки, поставленные впритык друг к другу без отступа. Промах на соседнюю кнопку раздражает и в лучшем случае стоит секунды, в худшем отправляет человека не туда. Правила размера, цвета и расположения главной кнопки разобраны в статье CTA-кнопка на лендинге.
То же касается ссылок в тексте, если лендинг ведёт на статьи блога. Слово-ссылка длиной в три буквы посреди абзаца - это цель размером меньше 44 пикселей почти всегда, и на телефоне в такую ссылку нужно целиться отдельно, вместо того чтобы просто продолжать читать.
Цвет как единственный носитель смысла - ошибка
Поле формы, которое подсвечивается красным при ошибке без текста рядом, не работает для людей с нарушением цветовосприятия, а таких среди мужчин около 8 процентов. Ошибку стоит дублировать текстом и иконкой, не только цветом рамки. То же самое касается статуса "в наличии" зелёным кружком без подписи - для части аудитории кружок просто серый, и смысл теряется.
Формы: подписи полей и текст ошибок
Плейсхолдер внутри поля, который исчезает при начале ввода, не заменяет подпись поля. Человек отвлёкся, вернулся к форме через минуту и не помнит, что вводил в третье поле, потому что подписи там нет, только пустое место. Подпись над или под полем должна оставаться видимой всегда, а не только до первого нажатия.
То же касается текста ошибки под полем. "Неверный формат" ничего не объясняет, а "Введите номер в формате +7 900 000 00 00" сразу показывает, что именно исправить, и не заставляет гадать. Какие типы и атрибуты полей ввода для этого использовать, показано в документации MDN.
Сколько полей вообще стоит оставлять в форме и как их подписывать, разобрано в статье Формы заявок на лендинге.
Минимальные значения для проверки
| Параметр | Минимум | Комфортно | Как проверить |
|---|---|---|---|
| Контраст текста | 4.5:1 | 7:1 | WebAIM Contrast Checker |
| Размер тела текста | 16px | 18px | DevTools, computed size |
| Межстрочный интервал | 1.4 | 1.6 | line-height в стилях |
| Зона нажатия кнопки | 44x44px | 48x48px | линейка в DevTools |
| Длина строки текста | 80 символов | 60-70 символов | подсчёт вручную на десктопе |
Частые ошибки на лендингах малого бизнеса
За несколько лет проверки чужих лендингов список повторяющихся ошибок почти не меняется:
- серый текст на белом фоне в блоке "о нас", потому что дизайнеру он показался воздушным;
- кнопка отправки формы серого цвета до наведения курсора, а на мобильном курсора нет, и кнопка выглядит неактивной;
- телефон и адрес мелким шрифтом в подвале, хотя это часто самая нужная информация для человека 45+;
- иконки без подписи, где смысл понятен только по цвету или форме;
- анимация появления текста, которая на медленном интернете оставляет блок невидимым дольше секунды.
Каждая из этих ошибок сама по себе не критична, но вместе они превращают лендинг в страницу, которая требует усилий на прочтение. А усилие - это именно то, чего человек, который ищет барбершоп или стоматологию с телефона на улице, тратить не готов. Как скорость и рендеринг страницы влияют на восприятие, разобрано в материалах MDN о производительности.
Быстрая проверка перед запуском
Полный аудит доступности - работа на день, и для лендинга малого бизнеса это избыточно. Пять минут хватает, чтобы отсечь худшие ошибки:
- открыть страницу на телефоне при максимальной яркости солнца на улице и попробовать прочитать текст;
- увеличить масштаб браузера до 150 процентов и проверить, не наезжает ли что-то друг на друга;
- нажать все кнопки большим пальцем, а не указательным, стоя, а не сидя за столом;
- закрыть глаза, представить, что не различаете красный и зелёный, и проверить, понятны ли статусы и ошибки формы без цвета.
Доступность на лендинге редко требует переделки дизайна. Чаще это три правки в CSS: цвет текста на пару тонов темнее, кегль на два пикселя крупнее, отступ вокруг кнопки на 8 пикселей шире.
Частые вопросы
Как быстро проверить контраст текста без специальных инструментов?
Точный процент даёт только инструмент вроде WebAIM Contrast Checker или проверка контраста в DevTools Chrome. На глаз легко ошибиться на одну-две ступени, а нарушение обычно лежит именно на этой границе.
Обязательно ли соблюдать доступность, если лендинг не рассчитан на людей с инвалидностью?
Формально требования касаются в том числе незрячих пользователей, но на практике те же правила решают заявки от аудитории 40+, людей с уставшими глазами после рабочего дня и посетителей с телефона на ярком солнце. Контраст и размер шрифта работают на конверсию у любой аудитории, а не только у людей с диагностированными нарушениями зрения.
Что делать, если дизайнер настаивает на светло-сером тексте?
Показать цифру контраста через инструмент проверки, а не спорить на глаз. Если соотношение ниже 4.5:1, это не вопрос вкуса, а нарушение стандарта, которое стоит части заявок от людей с обычным, не идеальным зрением.
Можно ли соблюдать доступность и оставить дизайн ярким?
Да, доступность не требует отказа от цвета или крупных фотографий. Обычно хватает точечных правок: тёмная подложка под текстом на фото, дублирование цвета ошибки формы текстом, шрифт на пару пикселей крупнее в теле текста.
Коротко
Контраст, размер шрифта и зона нажатия кнопки - не эстетика, а прямой путь к заявке для трети аудитории малого бизнеса. Проверка занимает несколько минут и не требует специальных инструментов, кроме DevTools браузера и здравого смысла.
Если лендинг рассчитан на аудиторию 40+, стоит закладывать эти параметры в дизайн сразу, а не чинить после первых жалоб в духе "ничего не видно на солнце". Починка после запуска стоит той же правки CSS, только вдобавок к потерянным за это время заявкам.
Проще всего встроить проверку в сам процесс приёмки лендинга: пять минут с телефоном на улице и открытыми DevTools экономят потом недели переписки о том, почему реклама льёт трафик, а заявок не прибавляется.
