• Success Criterion 1.3.1
  • Conformance level A

Responsive Table Layout That Strips Out Header Relationships

1.3.1 — Info and Relationships

Scenario

Setting

A video streaming service's show detail page

What’s wrong

Data tables flattened with role="presentation" (code that strips an element's meaning)/CSS display:block on responsive views, destroying header-cell relationships.

Example 

<table role="presentation" class="mobile-stack">
  <tr><th>Season</th><th>Episodes</th></tr>
  <tr><td>1</td><td>10</td></tr>
</table>
<style>@media(max-width:480px){.mobile-stack tr,.mobile-stack td{display:block;}}</style>

Why it matters

A screen reader user on a phone hears "1, 10" stacked with no column names, since the responsive fix stripped the table's real structure.

How to test

Resize the browser to mobile width and inspect the (possibly CSS-flattened) table in DevTools: check header-cell relationships (th/scope or headers/id) survive the responsive layout.

How to fix

Restyle a table's layout with CSS for small screens, but never strip its role or header cells to do it.

<table class="mobile-stack">
  <tr><th>Season</th><th>Episodes</th></tr>
  <tr><td>1</td><td>10</td></tr>
</table>
<style>@media(max-width:480px){.mobile-stack td::before{content: attr(data-label) ": ";}}</style>

Outcome

A mobile user hears Season 1, Episodes 10 clearly, matching the same relationships shown on desktop.

Who is affected

Mobile screen reader users checking season and episode counts lose the header relationships desktop users still see.

Learn more

Related scenarios