Page scrolls sideways

Why it matters

People who zoom in to read, and everyone on a phone, need text to wrap to the width of the screen. When one wide element pushes the page wider than the window, they have to scroll sideways on every line, which makes reading slow and tiring. WCAG asks for content to work at 320 pixels wide, which is what a desktop page looks like at 400% zoom.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What Lumtera flags

Checked in review mode's Whole page tab, at the current window width: a page that is wider than the window, so it scrolls sideways. The item names the first element that sticks out past the right edge, as a place to start. To test narrow screens and zoom, resize the window or zoom in and run the check again.

How to fix it in WordPress

Find the element that sticks out (often a wide table, image, embed or fixed-width block) and let it shrink: max-width: 100%, or wrap tables so they scroll on their own. Then test with the window 320 pixels wide, or zoomed to 400%.

Example

.price-table { width: 960px; }

.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; }

How to check your fix

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.