Как сделать сайт читаемым: аудит текста и интерфейса

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

Что считать читаемым сайтом

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

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

Начинайте аудит с реального текста на маленьком экране. Макет с короткими заглушками не показывает переполнение, тяжёлые абзацы и неясные ссылки.

Порядок аудита за один проход

1. Откройте главную задачу страницы и сформулируйте её одним предложением. Если это невозможно, сначала упростите содержание.
2. Просмотрите только заголовки. Они должны образовать понятный план без чтения абзацев.
3. Проверьте основную колонку, размер строки, интервалы и выравнивание.
4. Проверьте контраст обычного текста, ссылок, подписей и состояний кнопок.
5. Уменьшите окно до ширины телефона и увеличьте страницу до 200 процентов.
6. Пройдите ключевой путь и запишите места, где приходится перечитывать, искать действие или прокручивать в двух направлениях.

Для каждой найденной проблемы запишите симптом и проверяемое исправление. Пример: «строка уходит через весь монитор» превращается в «ограничить текстовую колонку и повторить проверку на широком экране». Такой журнал полезнее общей задачи «улучшить дизайн».

Настройте текстовую колонку

Слишком длинная строка мешает быстро находить начало следующей. Критерий WCAG 1.4.8 уровня AAA предусматривает возможность ограничить строку 80 знаками, не выравнивать абзацы по двум краям и увеличить межстрочный интервал. Это ориентир, а не обещание полного соответствия. Формулировка критерия доступна в разъяснении W3C о визуальном представлении.

Для обычной статьи можно начать с колонки около 68ch, межстрочного интервала 1.6 и левого выравнивания. Затем проверьте кириллицу, длинные ссылки, жирные фрагменты и подписи. Значение 68ch является рабочей отправной точкой, а не обязательным стандартом.

.article {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: 20px;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}
.article p + p { margin-top: 1em; }
.article img { max-width: 100%; height: auto; }

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

По теме: Как сделать контент сайта: карта страниц и проверка

Проверьте контраст без догадок

Для обычного текста критерий WCAG 2.2 уровня AA требует контраст не ниже 4,5:1, для крупного текста допускается 3:1. Числа и исключения приведены в официальном разъяснении W3C. Не оценивайте контраст только на глаз: используйте проверку в инструментах браузера или калькулятор, который считает отношение цветов.

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

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

Сделайте структуру заметной

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

• Начинайте раздел с ответа, затем добавляйте объяснение или шаги.
• Делите абзац, если в нём появились две самостоятельные мысли.
• Используйте список для набора равноправных пунктов, а нумерованный список для последовательности.
• Замените «подробнее» и «нажмите сюда» на ссылку, которая называет результат перехода.
• Оставляйте свободное пространство между смысловыми блоками, но не прячьте связь между заголовком и его текстом.

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

По теме: Как сделать сайт как Pinterest: галерея с карточками

Проверьте телефон и увеличение

W3C требует, чтобы обычный контент мог перестраиваться при ширине, эквивалентной 320 CSS-пикселям, без потери информации и прокрутки в двух направлениях. Исключения возможны для карт, таблиц и других двумерных материалов. Подробное объяснение есть в критерии Reflow.

1. Откройте страницу в узком окне или режиме устройства в браузере.
2. Увеличьте масштаб до 200 процентов.
3. Проверьте, что абзацы переносятся, кнопки не перекрывают текст, а меню остаётся доступным.
4. Найдите элементы с фиксированной шириной, длинные слова, таблицы и блоки pre.
5. Исправьте обычный контент через гибкую ширину и перенос. Для таблицы оставьте локальную прокрутку внутри её контейнера.

Граничный случай: широкая таблица может требовать горизонтального движения, но вся страница из-за неё не должна становиться шире экрана. Оберните таблицу в отдельный контейнер и оставьте текст страницы в одной колонке.

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

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

• Главная цель страницы понятна по первому экрану.
• Заголовки дают связный план.
• Обычный текст проходит проверку контраста.
• Строки не растягиваются через весь монитор.
• При 200-процентном масштабе текст не обрезается и не перекрывается.
• На узком экране обычные блоки не требуют горизонтальной прокрутки.
• Ссылки понятны без соседней фразы «нажмите сюда».

Частые вопросы

Какой размер шрифта выбрать для сайта?

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

Можно ли выровнять длинный текст по ширине?

Для основного веб-текста лучше левое выравнивание. При выравнивании по двум краям пробелы становятся неравномерными, особенно в узкой колонке.

Достаточно ли высокого контраста для читаемости?

Нет. Контраст не исправит длинные строки, тяжёлые абзацы, неясные заголовки и сломанный мобильный макет. Проверяйте признаки вместе.

Когда этот способ не подходит?

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