Neaktivní tlačítka a přístupnost

Zašedlé „Přidat do košíku“, dokud není vybraná velikost, tlačítko „Objednat“, které zůstává neaktivní, dokud nejsou vyplněná všechna pole — neaktivní tlačítka jsou na e-shopech všude. WCAG pro ně má zvláštní výjimku, ale to z nich nedělá dobrý nápad v každé situaci. Tato stránka popisuje pravidla, dva způsoby, jak tlačítko deaktivovat, a lepší alternativy. Je součástí série přístupné vzory UI.

Co říká WCAG

• Výjimka z kontrastu. 1.4.3 Kontrast (minimální) vyjímá „text nebo obrázky textu, které jsou součástí neaktivní součásti uživatelského rozhraní“, a 1.4.11 Netextový kontrast vyjímá rovněž neaktivní součásti. W3C definuje neaktivní součást jako takovou, která „je viditelná, ale momentálně neovladatelná“, a jako příklad uvádí neaktivní tlačítko pro odeslání. Dokument Understanding vysvětluje, že výjimka existuje, protože se nenašel jeden dobrý způsob, jak neaktivní prvky zobrazovat.
• Název, role, stav. 4.1.2 Název, role, hodnota: neaktivní stav musí být vyjádřen v kódu, nejen šedou barvou.
• Instrukce. 3.3.2 Popisky nebo instrukce: pokud uživatel musí něco udělat, než tlačítko začne fungovat, řekněte mu to.
• Chyby. 3.3.1 Identifikace chyb: neaktivní tlačítko pro odeslání není chybová zpráva. Uživatel se stále musí z textu dozvědět, co je špatně.

Nízký kontrast neaktivního tlačítka tedy WCAG neporušuje — ale neaktivní tlačítko, kterému nikdo nerozumí, může i tak nesplnit výše uvedená kritéria a rozhodně stojí tržby.

disabled vs aria-disabled

Průvodce APG ke klávesnici říká, že „prohlížeče odstraňují vstupní prvky HTML s atributem disabled z pořadí tabulátoru“. Tam, kde uživatelé potřebují neaktivní prvek objevit — APG zmiňuje položky menu, záložky, možnosti seznamu (listbox) a položky stromu —, používá aria-disabled="true", aby prvek mohl dál získat fokus. Vzor tlačítka v APG také uvádí, že když akce tlačítka není k dispozici, „má tlačítko aria-disabled nastavené na true“.

Praktické pravidlo: disabled použijte, když nevadí, že se tlačítko přeskočí; aria-disabled použijte, když uživatelé potřebují tlačítko najít a zjistit, proč nefunguje.

Příklad kódu

<!-- Dohledatelné: zůstává v pořadí tabulátoru, důvod se oznámí -->
<p id="size-hint">Vyberte velikost, abyste mohli zboží přidat do košíku.</p>
<button type="button" id="add" aria-disabled="true" aria-describedby="size-hint">
  Přidat do košíku
</button>

<script>
  const add = document.getElementById('add');
  add.addEventListener('click', (event) => {
    if (add.getAttribute('aria-disabled') === 'true') {
      event.preventDefault();          // akci zablokujte sami
      document.getElementById('size').focus();
      return;
    }
    addToCart();
  });
  // Po výběru velikosti: add.setAttribute('aria-disabled', 'false');
</script>

<!-- Přeskočení nevadí: nativní neaktivní prvek, ke kterému se uživatel nemusí dostat -->
<button type="button" disabled>Předchozí stránka</button>

Nastylujte [aria-disabled="true"] tak, aby vypadalo nedostupně — prohlížeč to za vás neudělá.

Lepší alternativy

1. Nechte „Objednat“ aktivní. Když ho uživatel stiskne s chybějícími údaji, zobrazte chybové zprávy textem a přesuňte fokus na první chybu nebo na souhrn chyb. Viz validace formulářů a chyby.
2. Řekněte, co je potřeba, vedle neaktivního tlačítka, viditelným textem, ne v tooltipu při najetí myší.
3. Neskrývejte nedostupnou možnost bez vysvětlení — vyprodaná velikost může v seznamu zůstat s označením „vyprodáno“.

Ovládání klávesnicí

Časté chyby na e-shopech

• „Přidat do košíku“ neaktivní, dokud není vybraná varianta, bez viditelné nápovědy. Uživatelé klávesnice se k tlačítku nikdy nedostanou a nevědí proč.
• Tlačítko „Zaplatit“ v pokladně neaktivní, dokud všechna pole neprojdou validací, zatímco pole neukazují žádné chybové zprávy.
• Tlačítko, které vypadá neaktivně, ale není (jen šedý styl), nebo tlačítko neaktivní v kódu, které vypadá aktivně.
• aria-disabled="true" bez ochrany ve skriptu, takže tlačítko formulář stejně odešle.
• Neaktivní stav naznačený jen nižší neprůhledností, zatímco důvod je v tooltipu title.
• Nečitelně světlý neaktivní text u důležitých informací, například „Není skladem“. Text může být z kontrastu vyjmutý, ale informace by měla být k dispozici i čitelným textem.

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

Všechna mají kartu v naší knihovně pravidel. Ruční testování: zkuste vyplnit formulář nebo vybrat produkt jen klávesnicí, ověřte, že každý neaktivní prvek má viditelný důvod, a čtečkou obrazovky ověřte, že se oznamuje stav i důvod. Kontrola kontrastu barev pomůže zvolit neaktivní styl, který zůstane čitelný.

Spusťte bezplatnou kontrolu jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Musí neaktivní tlačítka splňovat požadavky WCAG na kontrast?

Ne. Kritéria 1.4.3 Kontrast (minimální) i 1.4.11 Netextový kontrast vyjímají neaktivní součásti uživatelského rozhraní, které W3C definuje jako viditelné, ale momentálně neovladatelné. Příkladem, který W3C uvádí, je neaktivní tlačítko pro odeslání.

Jaký je rozdíl mezi disabled a aria-disabled?

Atribut HTML disabled učiní nativní ovládací prvek neovladatelným a odstraní ho z pořadí tabulátoru. aria-disabled="true" jen sděluje asistivním technologiím, že prvek není k dispozici; prvek dál může získat fokus a akci musíte zablokovat ve skriptu.

Je špatné nechat tlačítko pro odeslání neaktivní, dokud formulář není platný?

Často to způsobuje problémy: uživatelé nezjistí, co chybí, a uživatelé klávesnice se k tlačítku ani nedostanou. Obvykle funguje lépe nechat ho aktivní a po odeslání zobrazit jasné chybové zprávy.

Jak vysvětlit, proč je tlačítko neaktivní?

Uveďte důvod viditelným textem u tlačítka, například „Vyberte velikost, abyste mohli zboží přidat do košíku“, a propojte ho přes aria-describedby. Nespoléhejte na tooltip při najetí myší.

Dokáže automatizovaná kontrola otestovat neaktivní tlačítka?

Kontroly kontrastu neaktivní prvky přeskakují, stejně jako WCAG. Automatická pravidla ověřují, že aria-disabled má platnou hodnotu a že tlačítka mají název. Zda uživatelé chápou, proč tlačítko není k dispozici, vyžaduje ruční test.

Zdroje

• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, Understanding 1.4.11 Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• W3C WAI, APG Developing a Keyboard Interface (fokus u neaktivních prvků): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
• W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/