WCAG 2.2.2 Пауза, Зупинення, Приховування

Критерій успіху 2.2.2 потрібен для того, щоб рухомий і самооновлюваний вміст не заважав користуватися рештою сторінки. Рух відволікає від читання, що важко людям із дефіцитом уваги чи когнітивними порушеннями, а рухомий текст важко читати людям зі слабким зором чи труднощами читання. Це рівень A, і він входить до EN 301 549 (пункт 9.2.2.2; в Україні — ДСТУ EN 301 549:2022).

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

Рухома, блимаюча чи прокручувана інформація, яка (1) запускається автоматично, (2) триває понад п'ять секунд і (3) показується паралельно з іншим вмістом, повинна мати механізм, щоб поставити її на паузу, зупинити чи приховати, — якщо рух не є необхідною частиною дії.

Автооновлювана інформація, яка (1) запускається автоматично і (2) показується паралельно з іншим вмістом, повинна мати механізм, щоб поставити її на паузу, зупинити чи приховати або керувати частотою оновлення, — якщо оновлення не є необхідним.

Примітки WCAG:

• спалахи окремо регулює 2.3.1;
• анімацію завантаження можна вважати необхідною, якщо на цьому етапі ніхто не може взаємодіяти зі сторінкою, а приховування прогресу могло б створити враження, що сторінка зламалася;
• оскільки рухомий вміст може заважати всій сторінці, цьому критерію має відповідати увесь вміст (невтручання).

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

• слайдер на першому екрані чи карусель товарів, що прокручується безкінечно без кнопки паузи;
• бігучий рядок з оголошеннями («Безкоштовна доставка від 50 € · Нова колекція …»);
• фонове відео в шапці, що повторюється по колу без жодного керування;
• спливне вікно «Цей товар зараз переглядають 12 людей» чи «Анна з Берліна щойно купила…», яке постійно оновлюється;
• застарілі елементи <marquee> чи <blink> у старих описах товарів або банерах.

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

Автоматично: наш сканер позначає елементи <marquee> і <blink> (див. бібліотеку правил). Каруселі, відео, анімації CSS і JavaScript надійно виявити неможливо, тож більша частина цього критерію потребує ручної перевірки.

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

Як виправити

• Додайте до каруселей і фонових відео видиму кнопку паузи/відтворення, що працює з клавіатури; зупинки лише при наведенні чи фокусі не всім достатньо.
• Ще краще — не прокручуйте автоматично: дайте покупцям самим перемикати слайди.
• Враховуйте prefers-reduced-motion, щоб зупиняти необов'язкову анімацію для користувачів, які просять менше руху.
• Приберіть <marquee> і <blink> і замініть бігучі рядки статичним текстом.
• Дайте користувачам змогу закрити чи вимкнути живі сповіщення «соціального доказу».

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

• 2.3.1 Обмеження на три чи менше спалахи — вміст зі спалахами і напади.
• 2.2.1 Налаштування часу — ліміти часу мають бути налаштовуваними.
• 2.1.1 Клавіатура — кнопка паузи має працювати з клавіатури.

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

Чи порушує карусель з автопрокручуванням WCAG 2.2.2?

Лише якщо вона запускається автоматично, рухається понад п'ять секунд поряд з іншим вмістом і не має способу поставити її на паузу, зупинити чи приховати. Видима кнопка паузи, що працює з клавіатури, розв'язує проблему.

Що таке правило п'яти секунд у WCAG 2.2.2?

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

Чи охоплює 2.2.2 фонові відео та анімовані GIF?

Так, якщо вони автоматично рухаються понад п'ять секунд поруч з іншим вмістом. Спалахи, що можуть спричинити напади, — окремий критерій, 2.3.1.