WCAG 1.4.12 Міжрядковий інтервал

Критерій успіху 1.4.12 (в оригіналі — Text Spacing, тобто інтервали в тексті; в офіційному українському перекладі — «Міжрядковий інтервал») допомагає людям із дислексією, слабким зором та іншими труднощами читання, які за допомогою розширень браузера чи власних стилів збільшують інтервали в тексті. Ширші інтервали полегшують читання, але лише якщо сторінка не ламається. Його додано у 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 Прокрутка в кількох напрямках — без горизонтальної прокрутки при 320 px.
• Безкоштовна перевірка однієї сторінки — знайдіть проблеми з вбудованими інтервалами.

Часті запитання

Чи мусить мій сайт використовувати висоту рядка 1,5?

Ні. WCAG не вимагає цих значень інтервалів у вашому дизайні. Вона вимагає, щоб нічого не втрачалося, коли користувач замінює ними ваші інтервали.

Як перевірити WCAG 1.4.12?

Застосуйте букмарклет для інтервалів тексту або користувацьку таблицю стилів, що задає line-height 1.5, інтервал між абзацами 2em, letter-spacing 0.12em і word-spacing 0.16em, а потім шукайте обрізаний, накладений чи прихований текст і зламані елементи керування.

Яка найчастіша причина порушень?

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