Skip to content
Pandus
en Change language
Menu

WCAG A/AA requirement Priority: Serious · experimental check: may need a manual look

The site works in only one screen orientation

The site's styles force the page into portrait or landscape only, so when a phone or tablet is held the other way, the content is rotated, cut off or hidden.

This text was translated automatically and has not been reviewed by a native speaker yet.

Why it matters to your customers

Some shoppers cannot turn their device: it is mounted on a wheelchair or a stand, or they hold it one way because of limited hand movement. If the shop only works in the other orientation, they see a sideways or broken page and cannot buy at all.

Who is affected

  • people whose device is mounted in a fixed position
  • people with limited hand or arm movement
  • people with low vision who use landscape for larger text
  • tablet users with keyboard cases

How to fix it

Remove CSS that rotates or hides content inside @media (orientation: portrait) or (orientation: landscape) queries, for example transform: rotate(90deg) or a "please rotate your device" overlay. Let the responsive layout adapt to both orientations. Lock orientation only when it is truly essential. axe marks this check as experimental, so confirm it by turning a real phone.

On Shopify

Usually comes from custom CSS in the theme or from an app that shows a "rotate your device" message. Search the theme's CSS and Liquid files for "orientation" and remove rules that rotate or hide the page; switch off the app's orientation option if it has one.

On Shoptet (CZ)

Templates are usually responsive, so the cause is often custom code. Check CSS added through Shoptet's custom code options for "orientation" rules and remove them.

On PrestaShop

Usually in the theme's CSS or a mobile module. Search the theme's CSS files for "orientation" and override the rule in the theme's custom CSS file or a child theme.

On WooCommerce

Usually comes from the theme, a page builder or a mobile plugin. Search the theme's CSS for "orientation" media queries and override them in a child theme's CSS so updates do not undo the fix.

Standards

Standards
StandardClause
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

Automated check: axe-core rule css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Related checks

All rules we check