• Success Criterion 1.4.10
  • Conformance level AA

Data-Table Reflow Exception Wrongly Applied to a Layout Table

1.4.10 — Reflow

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Data-table exception misapplied to layout tables or card grids.

Example 

<table class="toolbar-layout">
  <tr>
    <td><button>Bold</button></td>
    <td><button>Italic</button></td>
    <td><button>Font size</button></td>
    <!-- 18 more cells, one per toolbar control -->
  </tr>
</table>
<!-- the team excuses the resulting 320px horizontal scroll by citing the data-table reflow exception -->

Why it matters

This table holds toolbar buttons, not tabular data, so the two-dimensional layout exception doesn't apply, and the scrollable toolbar still fails reflow.

How to test

Set the viewport to 320px and check whether the reflow exception (for data tables) is being applied to something that isn't actually a data table (e.g., a layout table or card grid): misapplied exceptions fail.

How to fix

Reserve the reflow exception for genuine data tables; a row of buttons is a layout choice, not tabular data, and should wrap.

<div class="toolbar" role="toolbar">
  <button>Bold</button>
  <button>Italic</button>
  <button>Font size</button>
</div>

.toolbar { display: flex; flex-wrap: wrap; }

Outcome

A user on a phone finds the Italic button by wrapping to a second row instead of scrolling through a strip of icons.

Who is affected

Mobile users must scroll sideways through formatting buttons that could easily wrap onto multiple rows instead.

Learn more

Related scenarios