---
title: "Never make people scroll sideways · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/no-sideways-scrolling
updated: 2026-10-20
licence: "All rights reserved"
---

# Never make people scroll sideways

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Never let a page or a component scroll sideways with a visible scrollbar, at any width from 320 CSS px up. This meets WCAG criterion 1.4.10 (AA).
- How: Let tables reflow instead of scroll. In a narrow container (a container query), stack each row and show each cell's column name from a `data-label` attribute. Wrap code with `white-space: pre-wrap; overflow-wrap: anywhere`. Wrap navigation rows. If one swipeable row works better on phones, hide its scrollbar and fade the edge, so people see there is more. Make the build reject any `overflow-x: auto` or `scroll` rule that does not also hide the scrollbar.
- Check: Open every sitemap URL in a browser at 320 px and at desktop width. Fail if `document.documentElement.scrollWidth` is wider than the window. Also fail if any `overflow-x: auto` element has `scrollWidth > clientWidth` and a visible scrollbar. axe `scrollable-region-focusable` passes.
- Measured: On a reference site, this check covered 227 pages at two widths. It found 0 problems after the change.

Example:

```css
.table-wrap { container-type: inline-size; }
@container (max-width: 30rem) {
  .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table td::before { content: attr(data-label) ": "; font-weight: 600; }
}
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tabs { overflow-x: auto; scrollbar-width: none; }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/no-sideways-scrolling`.

- Previous: [Give tables headers](https://agentwranglers.se/playbook/website/accessibility/data-tables)
- Next: [Let text grow without breaking the page](https://agentwranglers.se/playbook/website/accessibility/text-resize)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)