Tabulka bez vlastního scroll kontejneru

Najde se tabulka, která je širší než okno, a pak se prochází její rodiče až k <body> a hledá se mezi nimi prvek s vlastním vodorovným posuvníkem (overflow-x: auto nebo scroll). Když tam žádný není, vznikne nález.

Jinými slovy: tabulka se nevejde a nemá se kam posunout sama, takže roztáhne celou stránku. Právě proto se tenhle nález obvykle objeví spolu s DSG-01; je to jeho nejčastější konkrétní příčina.

Co kontrola nedělá: nekontroluje jiné široké prvky než <table> (předformátovaný kód, vložené rámy a galerie mají stejný problém a tenhle nález o nich mlčí), neposuzuje, jestli by šla tabulka zúžit, a nevidí posuvník řešený JavaScriptem.

Nález je na úrovni stránky a je informativní: skóre nesnižuje ani o bod.

Na viditelnost v odpovědích AI to vliv nemá: obsah tabulky je v HTML celý bez ohledu na to, jestli se vejde na obrazovku.

Hodnota tohohle nálezu je v tom, že pojmenuje konkrétní příčinu obecnějšího problému. DSG-01 řekne „stránka přetéká“; DSG-07 řekne „protože tahle tabulka“. Když máte obojí, opravujete jednu věc, ne dvě.

Souvislost s přístupností tu je a je normativní: kritérium WCAG 1.4.10 žádá, aby se obsah dal zobrazit bez vodorovného posouvání na šířce odpovídající 320 px. Tabulka s vlastním posuvníkem to splňuje; tabulka roztahující celou stránku ne. Tvrdit, že náš nález tohle kritérium měří, by ale bylo přehnané: měříme jednu konkrétní situaci, ne shodu s normou.

Praktický závěr: je to oprava na tři řádky CSS s okamžitým a viditelným výsledkem. Z celé desítky designových nálezů má nejlepší poměr mezi prací a užitkem.

Tabulku obalte kontejnerem, který převezme posouvání:

<div class="tabulka-obal">
  <table> … </table>
</div>

.tabulka-obal {
  overflow-x: auto;
  /* Ať je posuvník dostupný i z klávesnice: kontejner musí umět fokus. */
  /* V HTML k tomu patří tabindex="0" a popisek. */
}

Ta poznámka v komentáři není kosmetika: posuvný kontejner musí být dostupný z klávesnice. Bez tabindex="0" se k obsahu, který je mimo viditelnou část, nedostane nikdo, kdo nepoužívá myš ani dotyk. Kontrola přístupnosti to hlásí jako A11Y-scrollable-region-focusable.

<div class="tabulka-obal" tabindex="0" role="region" aria-label="Ceník podle výkonu">
  <table> … </table>
</div>

• Neřešte to zmenšením písma. Tabulka o osmi sloupcích se na mobil nevejde ani při 10 px, jen bude nečitelná.
• U opravdu širokých tabulek zvažte jiné zobrazení na mobilu: každý řádek jako karta se štítky. Je to víc práce, ale čitelné to je.
• Naznačte, že se dá posouvat. Tabulka useknutá na okraji vypadá jako chyba; stín nebo poloviční sloupec na kraji napoví, že pokračuje.
• Totéž udělejte s <pre> a vloženými rámy: mají stejný problém a náš nález je nehlásí.