Table without its own scroll container

We find a table wider than the window, then walk its ancestors up to <body> looking for one with its own horizontal scrollbar (overflow-x: auto or scroll). When there is none, the finding is raised.

In other words: the table does not fit and has nowhere to scroll on its own, so it stretches the whole page. That is why this finding usually appears alongside DSG-01: it is its commonest concrete cause.

What the check does not do: it checks no wide elements other than <table> (preformatted code, embedded frames and galleries have the same problem and this finding says nothing about them), it does not judge whether the table could be narrowed, and it cannot see a scrollbar implemented in JavaScript.

The finding is page-level and informational: it costs no score at all.

For visibility in AI answers there is no effect: the table's content is in the HTML in full whether or not it fits the screen.

The value of this finding is that it names a specific cause of a more general problem. DSG-01 says “the page overflows”; DSG-07 says “because of this table”. When you have both, you fix one thing, not two.

There is a normative accessibility connection: WCAG 1.4.10 requires content to be presentable without horizontal scrolling at a width equivalent to 320 px. A table with its own scrollbar satisfies that; a table stretching the whole page does not. Claiming our finding measures that criterion would be overreaching, though: we measure one specific situation, not conformance.

The practical conclusion: it is a three-line CSS fix with an immediate, visible result. Of all ten design findings it has the best ratio of work to benefit.

Wrap the table in a container that takes over the scrolling:

<div class="table-wrap">
  <table> … </table>
</div>

.table-wrap {
  overflow-x: auto;
  /* Make the scroll region reachable by keyboard. The container must be focusable. */
  /* In HTML that means tabindex="0" and a label. */
}

That comment is not cosmetic: a scrollable container must be reachable by keyboard. Without tabindex="0", content outside the visible part is unreachable for anybody not using a mouse or touch. The accessibility check reports it as A11Y-scrollable-region-focusable.

<div class="table-wrap" tabindex="0" role="region" aria-label="Price list by output">
  <table> … </table>
</div>

• Do not solve it by shrinking the font. An eight-column table will not fit a phone even at 10 px; it will just be illegible.
• For genuinely wide tables, consider a different mobile presentation: each row as a card with labels. More work, but readable.
• Signal that it scrolls. A table cut off at the edge looks like an error; a shadow or a half-visible column suggests it continues.
• Do the same for <pre> and embedded frames: same problem, and our finding does not report them.