Preventing Screen Orientation Lock for Accessibility
Rule ID: css-orientation-lock
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (Experimental), EN 301 549
How to Fix the Problem
Ensure that your content does not lock the screen orientation (portrait or landscape) unless it is absolutely necessary for the content’s function (e.g., a piano-playing app or a game that requires landscape mode).
Here’s how to prevent locking orientation using CSS:
Avoid using the following in your CSS:
Instead, design your layout to be responsive using flexible grids and media queries that adapt to both portrait and landscape orientations. Use CSS Flexbox or Grid to create layouts that naturally adjust to screen orientation changes.
Best practices include:
-
Using
viewportsettings that support scaling and rotation. -
Testing your application in both portrait and landscape modes across different devices.
-
Avoiding fixed-width elements that do not respond to orientation changes.
-
Allowing the device’s default behavior to determine orientation unless a specific orientation is critical to the app’s function.
Why it Matters
Locking orientation can make your app or content unusable for people who rely on assistive technologies or have devices mounted in a fixed orientation (like on wheelchairs). Users should always be able to rotate their device and have the content respond correctly.
By not restricting orientation, you support:
-
Greater device usability for users with limited dexterity
-
Better compatibility with assistive technologies
-
Improved user experience and satisfaction
Rule Description
Content must not restrict its display and operation to a single orientation (portrait or landscape), unless a specific display orientation is required for the function of the content.
The Algorithm (in simple terms)
Check if the content enforces a single orientation. If yes, ensure that this restriction is essential for the application’s function. If not essential, allow the interface to respond to both orientations dynamically.