WCAG 1.4.4 Изменение размера текста

Критерий успеха 1.4.4 позволяет людям со слабым зрением увеличивать текст без специальных программ и при этом продолжать пользоваться сайтом. Многие пожилые посетители просто нажимают Ctrl и + или разводят пальцы на экране телефона. Это уровень AA, критерий входит в EN 301 549 (пункт 9.1.4.4). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Размер текста можно изменить без вспомогательных технологий до 200 процентов без потери контента или функциональности.

• Подходит любой механизм масштабирования текста, который поддерживает браузер, включая масштабирование всей страницы; собственные кнопки «A+» не нужны.
• При 200 % весь текст должен оставаться видимым и читаемым, а все функции — работать: никакого обрезанного или наезжающего текста, никаких кнопок, ушедших за пределы экрана или под другие элементы.

Исключения: субтитры и изображения текста (об изображениях текста см. 1.4.5).

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

• мета-тег viewport содержит user-scalable=no или maximum-scale=1, поэтому на телефонах не работает масштабирование жестом;
• текст в кнопках, бейджах или вкладках обрезается, потому что у их контейнеров фиксированная высота или ширина;
• закреплённая шапка и баннер cookie при 200 % разрастаются так, что закрывают большую часть экрана;
• выпадающие меню или мини-корзина становятся недоступными при увеличении;
• размер шрифта задан только в единицах области просмотра (vw), поэтому текст не растёт при масштабировании.

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

Автоматически: наша проверка отмечает мета-тег viewport, который запрещает масштабирование или ограничивает его значением меньше 2× (правило meta viewport). Теряется ли контент при 200 %, зависит от раскладки, поэтому нужна ручная проверка.

Вручную: в окне настольного браузера шириной около 1280 px увеличьте масштаб до 200 % и выполните основные действия: поиск, переход к товару, выбор параметров, добавление в корзину, оформление заказа. Ищите обрезанный текст, наложения и всё, до чего нельзя добраться. На телефоне проверьте, что работает масштабирование жестом. Увеличение только текста (в Firefox «Только текст») — более строгая дополнительная проверка.

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

• Уберите user-scalable=no и maximum-scale из мета-тега viewport.
• Используйте относительные единицы (rem, em) для размера шрифта и не задавайте фиксированную высоту элементам с текстом.
• Позвольте кнопкам, подписям и бейджам переноситься на две строки вместо обрезки.
• Делайте закреплённые шапки небольшими при большом масштабе или открепляйте их на невысоких экранах.

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

• 1.4.10 Перекомпоновка (reflow) — без горизонтальной прокрутки при масштабе 400 %.
• 1.4.12 Интервалы в тексте — увеличенные межстрочные и межбуквенные интервалы без потерь.
• 1.4.5 Изображения текста — текст на картинках плохо масштабируется.

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

Достаточно ли масштабирования браузера для 1.4.4?

Да, масштабирование страницы в браузере — признанный способ изменения размера текста. Страница должна оставаться удобной при 200 %: без обрезанного текста, наложения элементов и скрытых кнопок.

Задаёт ли WCAG минимальный размер шрифта?

Нет. В WCAG 2.2 нет минимального размера шрифта. 1.4.4 требует, чтобы текст можно было увеличить до 200 %, а 1.4.3 задаёт контраст текста независимо от его размера.

Является ли user-scalable=no ошибкой?

Мета-тег viewport, который отключает или ограничивает масштабирование (user-scalable=no или низкий maximum-scale), не даёт пользователям мобильных устройств увеличить текст и считается нарушением этого критерия.

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

Задайте окну браузера ширину 1280 px, увеличьте масштаб до 200 % и пройдите ключевые страницы и действия. Всё должно оставаться читаемым и работать.