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 Перекомпоновка (reflow) — контент, который помещается на узких экранах без горизонтальной прокрутки.
• 1.4.4 Изменение размера текста — увеличение текста до 200 %.
• WCAG тестер — проверьте страницу своего сайта.

Частые вопросы

Должен ли мой магазин одинаково выглядеть в портретной и альбомной ориентации?

Нет. Вёрстка может меняться, но контент и функции должны быть доступны в обеих ориентациях. Нарушением является только фиксация вида в одной ориентации или требование повернуть устройство.

Когда фиксированная ориентация допустима?

Только когда определённая ориентация необходима. WCAG приводит примеры: банковский чек, приложение-пианино, слайды для проектора или телевизора и контент виртуальной реальности.

Может ли автоматический инструмент найти блокировку ориентации?

Он может найти CSS, который поворачивает или скрывает контент в зависимости от медиазапроса orientation. Блокировки через JavaScript или в нативном приложении нужно проверять вручную на устройстве.