WCAG 1.4.12 Интервалы в тексте

Критерий успеха 1.4.12 помогает людям с дислексией, слабым зрением и другими трудностями чтения, которые с помощью расширений браузера или собственных стилей увеличивают интервалы в тексте. Более широкие интервалы облегчают чтение, но только если страница при этом не ломается. Критерий добавлен в WCAG 2.1, относится к уровню AA и входит в EN 301 549 (пункт 9.1.4.12). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

В контенте на языках разметки, которые поддерживают эти свойства (HTML и CSS поддерживают), не должно быть потери контента или функциональности, когда пользователь задаёт все следующие значения и не меняет никаких других свойств стиля:

• межстрочный интервал — не менее 1,5 размера шрифта;
• отступ после абзацев — не менее 2 размеров шрифта;
• межбуквенный интервал — не менее 0,12 размера шрифта;
• интервал между словами — не менее 0,16 размера шрифта.

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

Исключение: языкам и письменностям, в которых какое-то из этих свойств не используется, достаточно поддерживать те свойства, которые для них существуют.

Типичные ошибки в интернет-магазине

• кнопки «В корзину» и другие с фиксированной высотой и overflow: hidden, из-за чего подпись обрезается;
• карточки товаров фиксированной высоты, из-за чего пропадает название товара или цена;
• вкладки навигации и чипы фильтров, текст которых наезжает на соседний элемент;
• бейджи вроде «−20 %» или «Новинка», абсолютно позиционированные поверх изображения, так что расширившийся текст закрывает цену;
• встроенные атрибуты style с интервалами и !important, которые блокируют пользовательскую замену.

Как проверить

Автоматически: наша проверка отмечает встроенные стили, которые задают межбуквенный, межсловный или межстрочный интервал с !important, что не даёт пользователям их переопределить (правило избегайте встроенных интервалов). Обрезается ли текст после изменения, можно только увидеть, поэтому нужна и ручная проверка.

Вручную: примените букмарклет для интервалов текста или пользовательскую таблицу стилей ровно с такими значениями: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; и margin-bottom: 2em для абзацев. Затем пройдите основные страницы и ищите обрезанный текст, наложения и элементы управления, которыми больше нельзя воспользоваться.

Как исправить

• Не задавайте фиксированную высоту элементам с текстом; используйте min-height и внутренние отступы.
• Не используйте overflow: hidden для контейнеров с текстом или позвольте им расти.
• Разрешите подписям, вкладкам и чипам переноситься на следующую строку.
• Не задавайте интервалы с !important во встроенных стилях.

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

• 1.4.4 Изменение размера текста — текст при масштабе 200 %.
• 1.4.10 Перекомпоновка (reflow) — без горизонтальной прокрутки при 320 px.
• Бесплатная проверка одной страницы — найдите проблемы со встроенными интервалами.

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

Обязан ли мой сайт использовать межстрочный интервал 1,5?

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

Как проверить WCAG 1.4.12?

Примените букмарклет для интервалов текста или пользовательскую таблицу стилей, которая задаёт line-height 1.5, отступ после абзаца 2em, letter-spacing 0.12em и word-spacing 0.16em, а затем ищите обрезанный, перекрывающийся или скрытый текст и сломанные элементы управления.

Какая самая частая причина ошибок?

Контейнеры с фиксированной высотой или overflow: hidden — кнопки, вкладки, бейджи и карточки, — которые обрезают текст, как только ему нужно больше места.