This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Tables, maps, and videos: elements that don't fit on a phone
Some building blocks are inevitably wide: data tables, maps, embedded videos. They still shouldn't make the page scrollable. The solution is a dedicated scrollable area around the element — not widening the whole page.
- A container that only scrolls the wide element keeps the page steady and preserves the content in full. WCAG explicitly exempts content like this from the reflow requirement, if it genuinely needs the width.
- An area like this must be reachable by keyboard, though, otherwise nobody without a mouse gets to its right-hand part. We found this finding twice on our own site — once on a code block, once on a table in the privacy policy.
- For embedded videos, the common solution is a frame with a fixed aspect ratio; without it, the video brings its own width along.
FAQ
May a table scroll sideways?
Yes, if it genuinely needs the width and the scroll area is limited to the table. It's not fine if that makes the whole page scrollable.
What needs attention with the scrollable area?
It must be able to receive keyboard focus and carry a label. Otherwise people with no mouse never reach the right-hand part — a violation of WCAG 2.1.1.