Головна
Правила
Сайт працює лише в одній орієнтації екрана

Вимога WCAG A/AA Пріоритет: Серйозно · експериментальна перевірка: варто перевірити вручну

Сайт працює лише в одній орієнтації екрана

Стилі сайту примусово залишають сторінку лише в портретній або лише в альбомній орієнтації, тож коли телефон чи планшет тримають інакше, вміст повертається, обрізається або зникає.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

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

Кого це стосується

люди, чий пристрій закріплений в одному положенні
люди з обмеженими рухами рук
люди зі слабким зором, які використовують альбомний режим для більшого тексту
користувачі планшетів у чохлах із клавіатурою

Як виправити

Приберіть CSS, який повертає або ховає вміст у медіазапитах @media (orientation: portrait) чи (orientation: landscape), наприклад transform: rotate(90deg) або накладку «поверніть пристрій». Дайте адаптивній верстці підлаштовуватися під обидві орієнтації. Фіксуйте орієнтацію лише тоді, коли це справді необхідно. axe позначає цю перевірку як експериментальну, тож підтвердьте її, повернувши справжній телефон.

У Shopify

Зазвичай причина у власному CSS теми або в застосунку, що показує повідомлення «поверніть пристрій». Знайдіть «orientation» у файлах CSS і Liquid теми та приберіть правила, які повертають чи ховають сторінку; вимкніть відповідну опцію застосунку, якщо вона є.

У Shoptet (CZ)

Шаблони зазвичай адаптивні, тож причина часто у власному коді. Перевірте CSS, доданий через можливості власного коду Shoptet, на правила з «orientation» і приберіть їх.

У PrestaShop

Зазвичай це CSS теми або мобільний модуль. Знайдіть «orientation» у CSS-файлах теми й перевизначте правило у файлі власного CSS теми або в дочірній темі.

У WooCommerce

Зазвичай причина в темі, конструкторі сторінок або мобільному плагіні. Знайдіть медіазапити з «orientation» у CSS теми й перевизначте їх у CSS дочірньої теми, щоб оновлення не скасували виправлення.

Стандарти

Стандарти
Стандарт	Пункт
WCAG 2.2	1.3.4 (AA) Orientation
WCAG 2.1	1.3.4 (AA) Orientation
EN 301 549 4.1.1	9.1.3.4
EN 301 549 3.2.1	9.1.3.4
ДСТУ EN 301 549 2022	9.1.3.4

Автоматична перевірка: правило axe-core css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Усі правила, які ми перевіряємо