• Success Criterion 1.4.10
  • Conformance level AA

Fixed-Width Container Forcing Scrolling in Two Directions

1.4.10 — Reflow

Scenario

Setting

A language-learning app's lesson screen

What’s wrong

Fixed-width containers/tables (non-data), iframes, or embeds forcing 2D scroll.

Example 

<table style="width: 900px;">
  <tr><th>Spanish</th><th>English</th><th>Example sentence</th></tr>
  <!-- vocabulary rows -->
</table>

Why it matters

A learner on a phone has to scroll both down through the vocabulary list and sideways to see the example sentence column.

How to test

Set the viewport to 320px wide and inspect fixed-width elements (containers, non-data tables, iframes, embeds): any forcing two-directional scrolling fails.

How to fix

Let the table's own container scroll horizontally if needed, rather than widening the whole page past the viewport.

<table style="width: 100%; table-layout: fixed;">
  <tr><th>Spanish</th><th>English</th><th>Example</th></tr>
</table>

table { display: block; overflow-x: auto; }

Outcome

A learner reads a full vocabulary row on their phone without the page itself sliding sideways.

Who is affected

Mobile learners and low-vision users at high zoom must scroll in both directions just to read one lesson.

Learn more

Related scenarios