Tlačítko nebo odkaz: kdy použít které

„Tlačítko, nebo odkaz?“ je nejčastější otázka přístupného front-endu a odpověď je krátká: odkaz vás někam zavede, tlačítko něco udělá. Vizuální styl je samostatné rozhodnutí. Tato stránka ukazuje rozdíl z pohledu kódu, klávesnice a WCAG a chyby, které na e-shopech vídáme nejčastěji. Je součástí série přístupné vzory UI.

Kdy použít které

APG to formuluje takto: „je důležité, aby vzhled i role widgetu odpovídaly funkci, kterou poskytuje“. Pokud něco vypadá jako odkaz, ale provádí akci, APG doporučuje změnit vizuální podobu, ne mu jen přidělit roli tlačítka.

Související kritéria WCAG

• 4.1.2 Název, role, hodnota (A): role v kódu musí být správná a každé tlačítko a odkaz potřebuje název.
• 2.1.1 Klávesnice (A): oba prvky musí fungovat z klávesnice.
• 2.4.4 Účel odkazu (v kontextu) (A): text odkazu říká, kam vede; samotné „klikněte zde“ ne.
• 2.4.7 Viditelný fokus (AA): oba ukazují fokus.
• 2.5.3 Popisek v názvu (A): přístupný název obsahuje viditelný text.
• 2.5.8 Velikost cíle (minimum) (AA): malá ikonová tlačítka potřebují 24 × 24 CSS pixelů nebo dostatečné odstupy.
• 1.4.1 Použití barvy (A): barva nesmí být jediným znakem, který odlišuje odkazy v textu od okolního textu.

Příklad kódu

<!-- Navigace: odkaz, i když je nastylovaný jako tlačítko -->
<a href="/cs/collections/sale" class="btn btn-primary">Nakupovat ve výprodeji</a>

<!-- Akce: tlačítko. type="button", aby neodeslalo okolní formulář -->
<button type="button" class="btn" aria-describedby="price-123">Přidat do košíku</button>

<!-- Tlačítko jen s ikonou: název ze skrytého textu, ikona je skrytá -->
<button type="button" class="icon-btn">
  <svg aria-hidden="true" focusable="false"><use href="#icon-heart"></use></svg>
  <span class="visually-hidden">Přidat do oblíbených</span>
</button>

<!-- Přepínací tlačítko: název zůstává stejný, mění se stav -->
<button type="button" aria-pressed="false">Zobrazit ceny s DPH</button>

Poznámky:

• <a> bez href není odkaz: nedostane fokus a nemá roli odkazu. Pokud neexistuje URL, jde o tlačítko.
• href="#" nebo href="javascript:void(0)" s obsluhou kliknutí je tlačítko, které se vydává za odkaz. Použijte <button>.
• U přepínacího tlačítka APG uvádí, že se popisek nemá měnit se stavem — „Ztlumit“ zůstává „Ztlumit“ a aria-pressed říká, zda je zapnuté.

Ovládání klávesnicí

Vzor tlačítka v APG uvádí pro tlačítka mezerník a Enter; vzor odkazu uvádí Enter. Uživatelé na tento rozdíl spoléhají. Odkaz, který reaguje jen na mezerník, nebo „tlačítko“, které reaguje jen na kliknutí myší, porušuje očekávání. Když tlačítko otevírá dialog, fokus se má přesunout do dialogu — viz modální dialog.

Časté chyby na e-shopech

• Klikatelné prvky div a span pro „Přidat do košíku“, vzorky barev nebo „Načíst další“. Pro klávesnici jsou neviditelné.
• Celé produktové karty zabalené do odkazu, který obsahuje i tlačítka („Přidat do oblíbených“ uvnitř odkazu karty). Interaktivní prvky vnořené do sebe matou prohlížeče i asistivní technologie.
• Ikonová tlačítka bez názvu: košík, hledání, zavřít (×), srdíčko oblíbených, plus a minus u množství.
• Odkazy „Více“ a „Nakupovat“ opakované dvacetkrát bez kontextu nebo stejný text vedoucí na různé stránky.
• Odkazy v textu odlišené jen barvou, často barvou značky blízkou barvě textu.
• <button> ve formuláři bez type="button", který formulář odešle, i když chtěl uživatel jen otevřít tabulku velikostí.
• Drobné ikonové cíle u ovládání množství a odebrání z košíku.

Co najdou automatizované kontroly a co ruční testování

Karty z naší knihovny pravidel, které pokrývají tento vzor:

Ruční testování je potřeba, abyste rozhodli, zda má být prvek odkazem, nebo tlačítkem, našli klikatelné prvky div úplně bez role, ověřili, že se Enter a mezerník chovají správně a že texty odkazů dávají smysl. Projděte klávesou Tab stránku produktu, košík a pokladnu a vše aktivujte jen klávesnicí.

Automatizovanou část najdete bezplatnou kontrolou jedné stránky na stránce produktu. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Kdy použít tlačítko a kdy odkaz?

Odkaz (prvek a s atributem href) použijte, když jeho aktivace uživatele přenese na jinou stránku, jiné místo na stránce nebo k souboru. Tlačítko použijte, když provádí akci na aktuální stránce: přidání do košíku, otevření dialogu, odeslání formuláře, přepnutí filtru.

Může odkaz vypadat jako tlačítko?

Ano. WCAG vizuální styl neupravuje. Důležité je, aby prvek v kódu odpovídal tomu, co dělá. Výzva k akci „Nakupovat“, která otevře stránku kategorie, je odkaz, i když je nastylovaná jako tlačítko.

Proč na tom záleží uživatelům čteček obrazovky?

Čtečky obrazovky oznamují roli („odkaz“ nebo „tlačítko“), takže uživatelé očekávají buď navigaci, nebo akci. Odkazy a tlačítka také vypisují v samostatných seznamech. Chybná role vytváří chybné očekávání.

Je div s obsluhou onclick přístupný?

Sám o sobě ne. Nemá roli, nedostanete se na něj klávesou Tab a nereaguje na Enter ani mezerník. Použijte místo něj skutečné tlačítko nebo odkaz.

Pozná automatizovaná kontrola tlačítko od odkazu?

Najde tlačítka a odkazy bez názvu a interaktivní prvky vnořené do sebe. Nepozná, zda měl být odkaz ve skutečnosti tlačítkem, a klikatelné prvky div obvykle nevidí.

Zdroje

• W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
• W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/
• W3C, Using ARIA (pravidla používání ARIA): https://www.w3.org/TR/using-aria/