WCAG 1.3.4 Орієнтація

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

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

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

Це означає:

• сайт працює й показує весь вміст і в портретній, і в альбомній орієнтації;
• макет може пристосовуватися (одна колонка в портретній, дві в альбомній) — це нормально;
• повідомлення на кшталт «поверніть пристрій» або макет, що обертає вміст на 90° в одній з орієнтацій, — порушення.

Необхідні випадки за WCAG: банківський чек, застосунок-піаніно, слайди для проєктора чи телевізора і вміст віртуальної реальності.

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

• конфігуратор товару або 3D-переглядач, який у портретній орієнтації показує «поверніть телефон»;
• CSS, який на малих екранах в альбомній орієнтації приховує оформлення замовлення чи основний вміст;
• мобільна обгортка вебзастосунку, яка блокує весь магазин у портретній орієнтації;
• галерея зображень, яка відкривається лише в альбомній орієнтації.

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

Автоматично: наш сканер виявляє CSS, який блокує вміст в одній орієнтації, наприклад обертаючи чи приховуючи його в медіазапиті orientation (правило блокування орієнтації в CSS). Блокування, задані в JavaScript, у маніфесті вебзастосунку чи в нативній обгортці, не охоплено, тож перевірте також на пристрої.

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

Як виправити

• Приберіть CSS, який обертає або приховує вміст у правилах @media (orientation: …); натомість використовуйте точки зламу за шириною.
• Приберіть накладки «поверніть пристрій».
• Не задавайте фіксовану orientation у маніфесті вебзастосунку, якщо вона справді не є необхідною.
• Проєктуйте компоненти, як-от галереї та конфігуратори, так, щоб вони працювали у вузькому портретному макеті.

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

• 1.4.10 Прокрутка в кількох напрямках — вміст, який вміщується на вузьких екранах без горизонтальної прокрутки.
• 1.4.4 Зміна розміру тексту — збільшення тексту до 200 %.
• Перевірка за WCAG — перевірте сторінку свого сайту.

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

Чи мій магазин мусить виглядати однаково в портретній і альбомній орієнтації?

Ні. Макет може змінюватися, але вміст і функції мають бути доступні в обох орієнтаціях. Порушенням є лише блокування вигляду в одній орієнтації або вимога повернути пристрій.

Коли фіксована орієнтація дозволена?

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

Чи може автоматичний інструмент знайти блокування орієнтації?

Він знаходить CSS, який обертає або приховує вміст залежно від медіазапиту orientation. Блокування в JavaScript чи в нативному застосунку потребує ручної перевірки на пристрої.