Skrytý text pro čtečky obrazovky (sr-only)

Ne všechno, co čtečka obrazovky potřebuje vědět, se dá vyjádřit vizuálně — barvou, polohou nebo ikonou. Řešením je text, který vidomý návštěvník nikdy neuvidí, ale čtečka ho přečte úplně normálně.

1. CSS — vizuálně skrytý text, ale dostupný pro čtečku

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

Tahle třída zmenší prvek na 1×1 pixel, ořízne ho a schová mu přetékající obsah — vizuálně tak zmizí úplně. Text ale pořád zůstává v DOMu, takže ho čtečka obrazovky normálně přečte.

2. Kde se to na tomhle webu používá

• Odkaz otevíraný v novém okně — za viditelný text se přidá <span class="sr-only">(otevře se v novém okně)</span>; vidomý uživatel novou záložku uvidí sám, čtečka ne.
• Datum vydání u aktualit a článků — <span class="sr-only">Datum vydání: </span>18. 8. 2026; vizuálně stačí pozice data pod nadpisem, čtečka ale potřebuje vědět, co to číslo znamená.

Proč to takhle je

• Vizuální kontext čtečka nevidí. Umístění, barva nebo velikost písma nesou informaci jen pro vidomé uživatele — pokud na nich něco závisí, potřebuje to i textový ekvivalent.
• Ikona vedle popisného textu se skryje přes aria-hidden="true", ne přes sr-only na textu — jinak by čtečka přečetla oboje a informace by zazněla dvakrát.
• Není to totéž co display: none nebo visibility: hidden. Ty text schovají úplně, i před čtečkou. sr-only schovává jen vizuálně.

Pravidla

• WCAG 2.4.4 (Účel odkazu), 4.1.2 (Název, role, hodnota) nebo 1.1.1 (Netextový obsah).

To je celé — jedna CSS třída, použitá všude tam, kde vizuální kontext čtečka obrazovky nemá jak zachytit.