WCAG 1.4.10 Прокрутка в кількох напрямках

Критерій успіху 1.4.10 (в оригіналі — Reflow, тобто перекомпонування вмісту; в офіційному українському перекладі — «Прокрутка в кількох напрямках») допомагає людям зі слабким зором, які сильно збільшують сторінку. Коли вміст перекомпоновується в одну колонку, їм достатньо прокручувати в одному напрямку; коли ні — доводиться прокручувати ліворуч і праворуч на кожному рядку. Його додано у WCAG 2.1, це рівень AA, і він входить до EN 301 549 (пункт 9.1.4.10; в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Вміст можна показати без втрати інформації чи функціональності і без потреби прокручувати у двох вимірах для:

• вмісту з вертикальною прокруткою (звичайні вебсторінки) — при ширині, що відповідає 320 CSS-пікселям;
• вмісту з горизонтальною прокруткою — при висоті, що відповідає 256 CSS-пікселям.

320 CSS px — це те, що показує вікно браузера на комп'ютері шириною 1280 CSS px при масштабі 400 %; 256 CSS px відповідає вікну висотою 1024 px при 400 %.

Виняток: частини вмісту, яким потрібен двовимірний макет для використання чи змісту. WCAG називає зображення на кшталт мап і схем, відео, ігри, презентації, таблиці з даними (але не окремі їхні комірки) та інтерфейси, де панелі інструментів мають залишатися на виду під час роботи з вмістом. Лише ці частини можуть прокручуватися в обидва боки.

Типові помилки в інтернет-магазині

• сторінка ширша за екран при 320 px через банер фіксованої ширини, iframe чи таблицю варіантів товару;
• головне меню чи фільтри, які зникають при великому масштабі, і до них немає іншого доступу;
• закріплена шапка й панель cookie, які закривають більшу частину малого вікна перегляду;
• довгі назви товарів, артикули чи URL, які не переносяться й розсувають макет убік;
• оформлення замовлення у дві колонки, яке не вміщується і потребує горизонтальної прокрутки.

Як перевірити

Автоматично: жодне автоматичне правило нашого сканера не відповідає цьому критерію. Перекомпонування залежить від макета при певному масштабі і від того, чи щось втрачається, — правило цього не оцінить. Тут потрібна ручна перевірка.

Вручну: задайте ширину вікна браузера на комп'ютері 1280 px і збільште масштаб до 400 % або скористайтеся емуляцією пристрою 320 × 256 px для горизонтального вмісту. Пройдіть головну, категорію, товар, кошик і оформлення замовлення. Перевірте, що вам ніколи не доводиться прокручувати вбік, щоб прочитати текст, що весь вміст і меню на місці і що ніщо не накладається.

Як виправити

• Використовуйте адаптивний макет із гнучкою шириною (ширина у відсотках, max-width, minmax() у grid) замість фіксованої ширини в пікселях.
• Дозвольте довгим словам і URL переноситися (overflow-wrap: anywhere).
• Розміщуйте широкі таблиці з даними в контейнері з власною прокруткою, а решта сторінки нехай перекомпоновується.
• Зробіть вбудовані відео та iframe адаптивними.
• Робіть закріплені шапки невеликими або відкріплюйте їх на вузьких екранах.

Пов'язані критерії

• 1.4.4 Зміна розміру тексту — текст при масштабі 200 %.
• 1.4.12 Міжрядковий інтервал — більші інтервали без втрат.
• 1.3.4 Орієнтація — портретна й альбомна орієнтація.

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

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

Відкрийте сторінку у вікні браузера на комп'ютері шириною 1280 CSS px і збільште масштаб до 400 % або задайте в інструментах розробника ширину вікна перегляду 320 px. Прокрутіть сторінку донизу й виконайте ключові завдання: вам ніколи не має знадобитися прокрутка вбік, щоб прочитати текст чи дістатися елемента керування.

Чи можуть таблиці з даними прокручуватися горизонтально?

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

Чи достатньо адаптивної теми для 1.4.10?

Зазвичай це добрий початок, але перевірте все одно. Елементи фіксованої ширини, широкі вбудовані блоки, довгі слова чи URL і закріплені шапки часто ламають перекомпонування навіть в адаптивних темах.

Чим 1.4.4 відрізняється від 1.4.10?

1.4.4 «Зміна розміру тексту» вимагає, щоб текст працював при масштабі 200 %. 1.4.10 вимагає, щоб при 400 % (ширина 320 px) вміст уміщався без горизонтальної прокрутки.