Text odkazu, který dává smysl mimo kontext

Jak uživatelé čteček obrazovky skutečně navigují

Než začneme mluvit o tom, jak psát text odkazu, pomůže pochopit, jak lidé skutečně používají odkazy, když nevidí stránku.

Čtečky obrazovky nabízejí zkratku, o jejíž existenci většina vidoucích uživatelů neví: stisknutím jediné klávesy (typicky písmene L ve většině čteček obrazovky) se procházejí všechny odkazy na stránce a čtou se jeden po druhém, mimo kontext. Uživatelé to používají k rychlému prohlédnutí stránky, podobně jako by oko vidoucího uživatele mohlo přelétnout nadpisy a tlačítka s výzvou k akci.

Pokud má vaše stránka dvanáct odkazů, které říkají „Číst více”, je tento seznam bezvýznamný. Uživatel slyší: „Číst více. Číst více. Číst více. Číst více…” Nemohou poznat, kam který z nich vede.

To je zásadní problém, který se přístupnost textu odkazu snaží vyřešit: každý odkaz musí být sám o sobě popisný, protože kontext při navigaci podle odkazů mizí.

Co říká WCAG

2.4.4 Účel odkazu (v kontextu) na úrovni A vyžaduje, aby účel každého odkazu bylo možné určit ze samotného textu odkazu nebo z textu odkazu společně s jeho okolním kontextem (odstavcem, položkou seznamu, buňkou tabulky nebo nadpisem, ve kterém se nachází).

2.4.9 Účel odkazu (pouze odkaz) na úrovni AAA jde dále a vyžaduje, aby účel odkazu vyplýval ze samotného textu odkazu bez spoléhání na kontext. Usilovat o toto je dobrý nápad, i když cílíte pouze na shodu s úrovní AA.

2.5.3 Popisek ve jménu (úroveň A) vyžaduje, aby v případě, že odkaz nebo tlačítko má viditelný textový popisek, přístupné jméno začínalo tímto textem. Ikonové tlačítko s popiskem „Zjistit více o přístupnosti” a s aria-label „Klikněte zde” toto kritérium nesplňuje.

Běžné chyby a co dělat místo toho

„Klikněte zde” a „Číst více”

Toto jsou nejrozšířenější chyby přístupnosti odkazů na webu.

<!-- Neprojde: žádný význam mimo kontext -->
<a href="/blog/wcag-compliance">Číst více</a>

<!-- Projde: popisuje sám sebe -->
<a href="/blog/wcag-compliance">Přečtěte si našeho průvodce shodou s WCAG 2.2</a>

Náprava je téměř vždy jednoduchá: nahraďte vágní frázi textem, který popisuje cíl nebo akci.

Obecné odkazy „zde”

„Klikněte zde pro stažení zprávy” selhává ze stejného důvodu — samotné slovo odkazu je jen „zde”.

<!-- Neprojde -->
<p>Pro úplná zjištění klikněte <a href="/report.pdf">zde</a>.</p>

<!-- Projde: text odkazu popisuje, na co se odkazuje -->
<p>Stáhněte si <a href="/report.pdf">zprávu z auditu přístupnosti za rok 2025 (PDF)</a>.</p>

Všimněte si indikátoru PDF v závorkách — to je dobrá praxe pro informování uživatelů, že po kliknutí na odkaz se otevře PDF, nikoli webová stránka.

Odkazy na stejný cíl s odlišným textem nebo odlišné cíle se stejným textem

Obojí vytváří zmatek. Pokud pět navigačních odkazů říká „Zjistit více”, ale odkazuje na různé stránky služeb, uživatelé nemohou předvídat, kam se dostanou. Naopak dva různé odkazy, které říkají „průvodce shodou s WCAG”, ale vedou na různé stránky, jsou stejně matoucí.

Odkazy a tlačítka tvořená pouze ikonou

Odkaz nebo tlačítko, které obsahuje pouze ikonu — bez viditelného textu — musí mít přístupné jméno poskytnuté pomocí aria-label nebo aria-labelledby. Bez toho čtečky obrazovky oznamují název souboru ikony nebo vůbec nic.

<!-- Neprojde: oznámeno jako „odkaz, grafika" nebo název souboru SVG -->
<a href="/social/twitter">
  <svg><!-- ikona twitter --></svg>
</a>

<!-- Projde: aria-label poskytuje přístupné jméno -->
<a href="/social/twitter" aria-label="QualiBooth na Twitteru">
  <svg aria-hidden="true"><!-- ikona twitter --></svg>
</a>

Atribut aria-hidden="true" na SVG brání čtečkám obrazovky oznamovat titulek nebo obsah SVG — protože samotný odkaz již má popisek, obsah ikony je nadbytečný.

Použití aria-label k doplnění viditelného textu

Když má stránka více odkazů „Stáhnout” a nemůžete změnit viditelný text (designové omezení), aria-label může rozšířit přístupné jméno:

<!-- Viditelný text je „Stáhnout", ale přístupné jméno je celý řetězec -->
<a href="/report-2025.pdf" aria-label="Stáhnout zprávu o přístupnosti za rok 2025 PDF">
  Stáhnout
</a>

Zde upozornění: WCAG 2.5.3 vyžaduje, aby přístupné jméno začínalo viditelným textem. „Stáhnout zprávu o přístupnosti za rok 2025 PDF” začíná slovem „Stáhnout” — dobře. „Zpráva o přístupnosti za rok 2025 — Stáhnout PDF” nikoli — špatně.

Odkazy, které se otevírají v nové kartě

Otevření nové karty bez varování dezorientuje uživatele, zejména ty s kognitivním postižením nebo uživatele čteček obrazovky, kteří si nemusí uvědomit, co se stalo. Naznačte chování otevření v nové kartě v textu odkazu nebo vizuálně skrytou poznámkou.

<!-- Signalizuje chování nové karty vizuálně i asistenční technologii -->
<a href="https://example.com" target="_blank">
  Zobrazit ukázkovou zprávu
  <span class="sr-only">(otevře se v nové kartě)</span>
</a>

Když text odkazu funguje, aniž by byl zřejmý

Kontext může legitimně poskytnout chybějící význam podle WCAG 2.4.4. Odkaz „Stáhnout” je přijatelný, pokud se nachází v buňce tabulky, jejíž záhlaví sloupce říká „Výroční zpráva” a jejíž záhlaví řádku říká „2025”. Kontext činí účel jasným.

To se liší od odkazu „Číst více” na konci samostatného odstavce. Odstavec poskytuje kontext, ale „Číst více” stále selhává, protože text odkazu by mohl platit pro jakýkoli odstavec — jednoznačně neidentifikuje cíl.

Obrázkové odkazy

Když je obsahem odkazu obrázek namísto textu, atribut alt obrázku se stává přístupným jménem odkazu. Alternativní text by měl popisovat cíl odkazu, ne samotný obrázek.

<!-- Alt popisuje cíl odkazu, ne vzhled obrázku -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Služby auditu přístupnosti">
</a>

Pokud je obrázek čistě dekorativní a doprovázen viditelným textem ve stejném odkazu, měl by mít obrázek alt="", aby se zabránilo dvojímu oznámení stejného textu.

Rychlý audit, který si můžete provést sami

Otevřete svou stránku a vyvolejte seznam odkazů pomocí své čtečky obrazovky (nebo si nainstalujte bezplatné rozšíření prohlížeče HeadingsMap nebo WAVE, abyste viděli odkazy vyňaté z kontextu). Projděte si seznam. Pokud nemůžete z textu samotného poznat, kam každý odkaz vede, potřebuje úpravu.

Nejběžnější náprava je přidání <span class="sr-only"> (vizuálně skrytý, přístupný čtečkám obrazovky) s dodatečným kontextem, nebo prostě úplné přepsání textu odkazu. Přepsání je vždy upřednostňováno — často zlepšuje použitelnost pro každého, ne jen pro uživatele čteček obrazovky.

Pro důkladný přezkum odkazů vašeho webu a dalších kritérií WCAG naše manuální audity přístupnosti pokrývají účel odkazu jako součást širšího přezkumu testery, kteří každodenně používají asistenční technologie.