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 Прокрутка в кількох напрямках — без горизонтальної прокрутки при масштабі 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 % і пройдіть ключові сторінки та завдання. Усе має залишатися читабельним і працювати.