Odkazy (a href)

Základní odkaz

Odkaz se vytvoří tagem <a> s atributem href, který obsahuje cíl odkazu:

<a href="kontakt.html">Kontaktuj mě</a>

Text uvnitř tagu je ten, na který uživatel klikne. Prohlížeč ho výchozím stylem zobrazí modře a podtržený.

Typy odkazů

Relativní odkaz

Cesta k souboru relativně od aktuální stránky. Používá se pro interní navigaci webu:

<a href="o-mne.html">O mně</a>
<a href="../index.html">Zpět na hlavní stránku</a>
<a href="doc/apple/i_gesta.html">Gesta VoiceOveru</a>

Absolutní odkaz

Plná URL adresa. Používá se pro externí weby:

<a href="https://www.apple.com">Přejít na Apple.com</a>

Kotevní odkaz

Odkaz na konkrétní místo na stránce pomocí atributu id:

<!-- Cíl -->
<h2 id="kapitola-css">CSS</h2>

<!-- Odkaz -->
<a href="#kapitola-css">Přejít na kapitolu o CSS</a>

Mailový odkaz

Odkaz, který otevře e-mailový klient s předvyplněnou adresou:

<a href="mailto:info@example.cz">Napsat e-mail</a>

Telefonní odkaz

Na mobilních zařízeních vytočí číslo:

<a href="tel:+420123456789">Zavolat</a>

Důležité atributy odkazů

target="_blank"

Otevře odkaz v novém okně nebo záložce. Používej jen pro skutečně odůvodněné případy:

<a href="https://webaim.org" target="_blank" rel="noopener noreferrer">WebAIM</a>

Atribut rel="noopener noreferrer" je bezpečnostní opatření – vždy ho přidej spolu s target="_blank".

aria-label

Přidá popisek pro odečítač obrazovky, pokud text odkazu není dostatečně výstižný:

<a href="clanek.html" aria-label="Přečíst celý článek o VoiceOveru na Mac">Číst dál</a>

Přístupné texty odkazů

Text odkazu musí dávat smysl sám o sobě – bez kontextu okolního textu. Nevidomí uživatelé si mohou nechat přečíst seznam všech odkazů na stránce. Pokud jsou všechny texty „Číst dál“, „Klikni zde“ nebo „Více“, neví uživatel vůbec nic.

Špatné příklady:

<a href="clanek.html">Klikni zde</a>
<a href="clanek.html">Číst dál</a>
<a href="clanek.html">Více</a>

Dobré příklady:

<a href="voiceover-gesta.html">Přehled gest VoiceOveru na iPhone</a>
<a href="aria-role.html">Celý průvodce ARIA rolemi</a>

Tip od Zdeňka

Zdeněk radí: Vždy si zkontroluj, jestli texty odkazů na tvé stránce dávají smysl vytrženy z kontextu. Ve VoiceOveru existuje zkratka pro zobrazení seznamu všech odkazů na stránce – a je to jeden z nejčastěji používaných způsobů navigace. Pokud vidíš v takovém seznamu samé „Číst dál“ a „Klikni zde“, odkazy jsou nepřístupné. A nezapomínej: odkaz je pro přechod na jinou stránku nebo místo, tlačítko je pro akci. Tyto dvě věci nemíchej.