Rearrange app screens for narrow windows

How to do it

Many people open a dashboard on a phone, or zoom a desktop browser to 400%, which gives the same width. Change the layout with container queries, so a panel adapts to the space it gets rather than to the screen. Keep the main action of each screen visible without scrolling sideways, as Never make people scroll sideways requires. Hide nothing people need. Move it into a menu instead.

Examples

JavaScript example

// Playwright
for (const width of [320, 1280]) {
  await page.setViewportSize({ width, height: 800 });
  await page.goto('/invoices');
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
  await expect(page.getByRole('button', { name: 'New invoice' })).toBeVisible();
}

Python example

# Playwright for Python
for width in (320, 1280):
    page.set_viewport_size({"width": width, "height": 800})
    page.goto("/invoices")
    assert page.evaluate("document.documentElement.scrollWidth") <= width
    expect(page.get_by_role("button", name="New invoice")).to_be_visible()

How to check

A browser test opens every route at 320 px and at 1280 px wide. At both widths, document.documentElement.scrollWidth is at most the window width, and the main action button is visible.

Sources

• WCAG 2.2 – 1.4.10 Reflow
• W3C CSS Containment Module Level 3 (container queries)

Related rules

• AXS-8 Never make people scroll sideways in Accessibility