Kdy použít <a> a kdy <button> – přístupně a správně

Při tvorbě webových stránek se často setkáváme s otázkou, kdy použít HTML element <a> a kdy <button>. Na první pohled se může zdát, že rozdíl není velký – obojí může vypadat jako odkaz (link) nebo tlačítko. Pro přístupnost, použitelnost a správnou sémantiku je však rozdíl mezi elementy zásadní.

Kdy použít <a> (odkaz)

Element <a> (anchor) je určen pro navigaci – tedy když má kliknutí uživatele vést:

• na jinou stránku (href="/kontakt")
• na jinou část téže stránky (href="#formular") - kotva
• ke stažení souboru (href="soubor.pdf")

Příklad správného použití:

<a href="/o-nas">O nás</a> 
<a href="#kontakt">Přejít na kontakt</a> 
<a href="letak.pdf" download>Stáhnout leták</a>

Časté chyby, kterých se vyvarovat:

• Použití <a> bez href – nebude to odkaz, nebude fokusovatelný a screen readery ho nepřečtou jako odkaz
• Použití <a> pro akce jako otevření modálního okna nebo spuštění javascriptu– k tomu slouží <button>

Kdy použít <button> (tlačítko)

Element <button> je určen pro akce – tedy když kliknutí něco spustí, změní nebo ovlivní chování stránky bez změny adresy.

Typické případy použití:

• Odeslání formuláře
• Otevření nebo zavření modálového okna
• Zobrazení nebo skrytí části stránky
• Spuštění javascriptové funkce

Příklad správného použití:

<button type="submit">Odeslat</button> 
<button onclick="toggleMenu()">Menu</button>

Časté chyby, kterých se vyvarovat:

• Použití <button> pro navigaci (pokud nepoužíváte JavaScript, který stránku opravdu přesměruje)
• Vytvoiření z <a> tlačítko pomocí role="button" – pro asistivní technologie to bude matoucí

Jak udělat odkazy přístupné

• Používejte smysluplné texty odkazů, které dávají smysl i mimo kontext. Například místo „klikněte zde" napište „Zjistěte více o našich službách"
• Zajistěte dostatečný kontrast odkazu vůči pozadí
• Zachovejte viditelný indikátor fokusu – například rámeček při pohybu klávesou Tab
• Informujte o novém okně – pokud se odkaz otevírá v novém okně (target="_blank"), informujte o tom uživatele textem „(otevře se v novém okně)"

Čemu se vyhnout:

• Nepoužívejte onclick bez href – takový „odkaz" není přístupný
• Nedělejte odkazy z jiných elementů (například <div role="link">), pokud to není nezbytně nutné
• Neodstraňujte přístupnost pomocí outline: none bez náhrady