Přístupné otevření odkazu v novém okně

Kdykoli potřebujete odkaz, který se otevře v novém okně nebo záložce prohlížeče, nestačí jen target="_blank". Sám o sobě totiž nikoho nevaruje, že se něco takového stane — a to je problém, který WCAG přímo řeší.

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. HTML — vzor odkazu otevíraného v novém okně

<a href="https://priklad.cz" target="_blank" rel="noopener noreferrer">
    Text odkazu
    <span class="sr-only">(otevře se v novém okně)</span>
    <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3"/>
    </svg>
</a>

Proč to takhle je

• target="_blank" samo o sobě nikoho nevaruje — vidomý uživatel novou záložku uvidí, uživatel čtečky ne. Proto viditelný text odkazu zůstává beze změny a hned za něj se přidá <span class="sr-only">(otevře se v novém okně)</span> — přečte se hned po textu odkazu, ale nic se vizuálně nepřidává.
• Ikonka je čistě dekorativní upozornění pro vidomé uživatele → aria-hidden="true" focusable="false", jinak by ji čtečka ohlásila znovu navíc k tomu sr-only textu.
• rel="noopener noreferrer" je bezpečnostní nutnost — bez něj by nová stránka měla přes window.opener přístup zpátky k vaší stránce (a mohla by třeba přesměrovat tu původní záložku).

Pravidla

• WCAG 2.4.4** (Účel odkazu)

To je celé — žádné JS není potřeba, jen tahle třída a vzor markupu zopakovaný u každého odkazu, co se má otevírat v novém okně.