Требование 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
Похожие проверки
-
На странице не указан её язык
WCAG 3.1.1 A
-
Кнопки и ссылки слишком маленькие, по ним трудно попасть
WCAG 2.5.8 AA
-
Поля оформления заказа не заполняются автоматически
WCAG 1.3.5 AA
-
У атрибутов доступности неверные значения
WCAG 4.1.2 A