Text přetištěný přes jiný text

Kontrola si u každého prvku s vlastním textem vezme obálky vykreslených řádků toho textu (Range.getClientRects()) a hledá dvojice prvků, jejichž řádky se protínají. Průnik musí být větší než pár pixelů v obou rozměrech; dotyk hran dvou sousedních řádků překryv není.

Klíčové je, že se neporovnávají rámečky prvků, ale řádky textu. Text, který přetiskuje souseda, obvykle vyteče ze svého rámečku: buňka tabulky s table-layout: fixed, pevný sloupec mřížky, prvek s white-space: nowrap. Rámečky se přitom nepřekrývají vůbec, takže kontrola postavená na nich by nenašla nic. Tuhle vadu jsme při vlastním auditu poprvé našli až okem nad screenshotem; tohle je způsob, jak ji najít strojově.

Co se vynechává, aby nevznikaly falešné nálezy: dvojice, kde je jeden prvek předkem druhého (potomek leží ve svém předkovi z definice); dvojice, kde je jeden z prvků v umístěné vrstvě (position: absolute/fixed/sticky nebo pod transform): rozbalovací nabídka, přilepená hlavička nebo modální okno leží přes obsah záměrně; a prvky, které návštěvník na obrazovce nemá (obsah zavřeného <details>, popisky pro čtečky obrazovky).

Prahy a stropy jsou v config/design.json (overlap). Nález je varování; když se objeví ve dvou a více z měřených šířek, zvýší se na kritický. Do skóre designu se počítá jako vysoký problém; přetištěný text je nečitelný stejně jako oříznutý (DSG-04).

Co kontrola nedělá: neposuzuje překryv textu s obrázkem ani s podkladovou barvou (to měří kontrast, COLOR-01), nevidí překryv, který vznikne až po interakci uživatele, a nepozná, jestli je zrovna tenhle překryv pro autora přijatelný.

Na viditelnost v odpovědích AI to vliv nemá. Oba texty jsou v HTML celé; překryv vzniká až při vykreslení.

Zato je to z celé designové rodiny nález, který návštěvník uvidí nejdřív. Nečitelné slovo přes jiné slovo vypadá jako rozbitá stránka, i když všechno ostatní funguje, a protože vzniká jen v některých šířkách okna, majitel webu ho na svém notebooku nikdy nevidí.

Souvislost s přístupností je nepřímá. Kritérium WCAG 1.4.10 (Reflow) žádá, aby se obsah dal zobrazit bez vodorovného posouvání; překrývající se text bývá druhý příznak téhož rozvržení, které to kritérium porušuje. Tvrdit, že tenhle nález měří shodu s normou, by ale bylo přehnané: měříme geometrii, ne kritérium.

Falešný nález tu není vyloučený. Překryv o pár pixelů může být záměr (dekorativní podtržení, přesah čísla přes rámeček). Proto je nález doporučení k prohlédnutí, ne verdikt; ke každému dostanete i screenshot s vyznačeným místem, ať se dá posoudit za pár sekund.

Nejčastější příčina je pevně široká buňka, ze které text nesmí zalomit:

table { table-layout: fixed; }
td.kod {
  width: 60px;
  white-space: nowrap;   /* text se nezalomí… */
  overflow: visible;     /* …a vyteče přes sousední sloupec */
}

Buď textu dovolte zalomit, nebo mu dejte dost místa:

td.kod {
  width: 60px;
  white-space: normal;   /* zalomí se uvnitř buňky */
  overflow-wrap: break-word;
}

• Mřížka a flex: položka s výchozím min-width: auto se nezúží pod šířku svého obsahu a vytlačí ho přes sousedy. Přidejte jí min-width: 0.
• Absolutně umístěné popisky (číslo v rohu karty, štítek přes obrázek) rezervujte v běžném toku, nebo jim dejte podklad; jinak se s obsahem pod nimi potkají na jiné šířce, než jste zkoušeli.
• Nezkoušejte to opravit z-indexem. Ten rozhodne, který text je nahoře; nečitelný bude pořád ten druhý.
• Ověřte si opravu ve všech třech šířkách. Překryv typicky vzniká v jedné z nich a v dalších dvou vypadá všechno v pořádku.