WCAG 1.3.4 — Orientation Locked to Single View

Who Is Affected

Users with mobility impairments who have their device mounted in a fixed orientation, users of assistive technology that requires a specific orientation, people using devices in wheelchairs or specialized equipment, and anyone whose device rotation is temporarily locked or broken.

What This Means

Modern websites and applications should work in both portrait and landscape orientations on mobile devices and tablets. When content is artificially restricted to only one orientation through CSS or JavaScript, it creates a barrier for users who cannot physically rotate their device or whose assistive technology requires a specific orientation.

This typically happens when developers use CSS media queries or viewport settings that force content to display only in landscape or only in portrait mode, regardless of how the user is holding their device.

Fix: CMS / Theme

Check your theme's CSS for orientation-locking rules and remove or modify them to be more flexible.

In Joomla:

1. Go to Extensions → Templates → Your Active Template → Edit Files
2. Open the main CSS file (usually template.css or custom.css)
3. Search for CSS rules containing orientation: landscape or orientation: portrait
4. Also look for @media queries that restrict content based on device orientation
5. Remove these restrictions or replace them with flexible responsive design rules

In WordPress:

1. Go to Appearance → Theme Editor (or use a child theme)
2. Open style.css or your theme's main stylesheet
3. Search for orientation-specific CSS rules like:

   @media screen and (orientation: portrait) { 
     /* rules that hide content */
   }
   

4. Replace rigid orientation locks with flexible responsive breakpoints based on screen width instead

Common problematic code to remove:

/* Don't do this */
@media (orientation: portrait) {
  .main-content { display: none; }
}

/* Do this instead */
@media (max-width: 768px) {
  .main-content { /* flexible responsive styles */ }
}

Fix: Content Editor

For content that appears broken in one orientation:

1. Test your pages on mobile devices in both portrait and landscape modes
2. If specific content blocks disappear or become unusable when rotating the device, contact your web developer
3. Avoid embedding content (like forms or media) that explicitly requires one orientation
4. When adding custom HTML or embedded widgets, test them in both orientations before publishing

Note: Essential exceptions exist for things like piano keyboard apps or specific data visualization that genuinely requires landscape orientation. However, general website content should always be accessible in both orientations.

Standard Reference

WCAG 2.1 Success Criterion 1.3.4 — Orientation, Level AA

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

• W3C Understanding SC 1.3.4
• WCAG Technique G214 — Using CSS to allow orientation changes
• WCAG Failure F97 — Locking orientation using CSS transform
• WCAG Failure F100 — Showing essential content only in landscape