Как проверить типографику сайта на соответствие требованиям WCAG

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

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

Соответствие оценивают по уровням A, AA и AAA. На практике для коммерческих сайтов чаще ориентируются на уровень AA, но целевой уровень зависит от задачи проекта и применимых требований. Проверяйте не только визуальный макет: доступность типографики определяется тем, как браузер, клавиатура, экранный диктор и пользовательские настройки работают с реальным HTML и CSS.

Критерий 1.4.3 требует достаточного контраста между текстом и фоном. Для обычного текста минимальное соотношение составляет 4,5:1, а для крупного текста — 3:1. Крупным считается текст размером не менее 24 CSS-пикселей либо полужирный текст от 18,66 CSS-пикселя. Эти значения относятся к уровню AA и должны проверяться для каждого состояния интерфейса.

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

Критерий 1.4.4 требует, чтобы текст можно было увеличить до 200 процентов без потери контента или функциональности. Критерий 1.4.10 дополняет это требование: при увеличении страницы до 400 процентов на экране шириной 1280 CSS-пикселей контент должен перестраиваться примерно в область шириной 320 CSS-пикселей без горизонтальной прокрутки, кроме случаев, где двухмерный формат действительно необходим.

Для проверки откройте страницу в браузере, увеличьте масштаб до 200 и 400 процентов и пройдите основной сценарий. Ищите обрезанные заголовки, наложение строк, исчезнувшие кнопки, фиксированные панели поверх текста и горизонтальную прокрутку. Увеличение должно сохранять смысл и порядок чтения, а не просто делать буквы крупнее внутри прежней жёсткой сетки.

Критерий 1.4.12 проверяет устойчивость текста к изменению интервалов. Пользователь должен иметь возможность задать межстрочный интервал не менее 1,5 размера шрифта, расстояние после абзаца не менее двух размеров шрифта, межбуквенный интервал не менее 0,12 размера шрифта и расстояние между словами не менее 0,16 размера шрифта без потери информации или функций.

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

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

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

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

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

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

Оцените, не слишком ли мелким или плотным выглядит основной текст, но не сводите проверку к одному числу в CSS. Читаемость зависит от формы букв, начертания, длины строки, межстрочного интервала и ширины колонки. Слишком длинные строки затрудняют переход с одной строки на другую, а чрезмерно короткие создают рваный ритм и увеличивают количество переносов.

Проверьте самые важные действия: открыть меню, найти нужный раздел, заполнить форму, отправить данные и прочитать сообщение об ошибке. На каждом шаге следите за тем, чтобы текст не обрезался, не перекрывался фиксированными элементами и не исчезал за пределами экрана. Если горизонтальная прокрутка возникает в обычной статье, это сильный сигнал к пересмотру адаптивной вёрстки.

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

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

Представьте интернет-магазин с карточками товаров. На десктопе название помещается в две строки, поэтому дизайнер задаёт карточке фиксированную высоту и скрывает переполнение. При увеличении текста до 200 процентов третья строка исчезает. Исправление — убрать жёсткое ограничение высоты, позволить карточке расти и проверить, что соседние элементы сохраняют читаемый порядок.

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

WCAG не устанавливает универсальный минимальный размер основного текста. Требования сосредоточены на контрасте, масштабировании, reflow и сохранении функциональности. Поэтому оценивайте размер вместе с гарнитурой, начертанием, длиной строки, интервалом и реальным сценарием чтения на разных экранах.

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

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

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

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

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

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

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