1.4.10 Reflow

Elements need scrolling in two directions at 320 pixels wide

At 320 CSS pixels wide the page scrolls in two directions, so people who zoom must scroll sideways to read each line.

Who it affects. People with low vision who zoom to 400% must scroll sideways for every line, and lose their place.

How to fix it. Let the layout wrap at narrow widths: replace fixed widths with max-width: 100% and flexible layouts. Give a wide data table its own scrolling container.

<div class="table-scroll" tabindex="0" role="region" aria-label="Invoices">
  <table>…</table>
</div>
<style>.table-scroll { overflow-x: auto; } img { max-width: 100%; }</style>

<div className="table-scroll" tabIndex={0} role="region" aria-label="Invoices">
  <table>…</table>
</div>