Proč na přístupných tlačítkách záleží
Přístupná tlačítka přispívají k inkluzivnímu webovému prostředí a zlepšují následující:
- Uživatelská zkušenost: Zajišťuje, že všichni uživatelé, včetně těch se zdravotním postižením, mohou bezproblémově interagovat s vaším webem.
- Výkon SEO: Soulad s přístupností je v souladu s pokyny pro vyhledávače a zlepšuje vaše hodnocení.
- Soulad s právními předpisy: Přístupná tlačítka vám pomohou splnit standardy WCAG a ADA a vyhnout se potenciálním soudním sporům.
Podrobný průvodce přidáváním přístupných tlačítek
Krok 1: Vyberte text pravého tlačítka
Text tlačítka by měl být stručný a popisný, označující akci, kterou provádí. Vyhněte se vágním štítkům jako „Klikněte sem“ nebo „Odeslat“.
- Dobrý příklad: "Stáhnout zprávu"
- Špatný příklad: "Klikněte sem"
Krok 2: Zajistěte správnou strukturu HTML
K vytváření tlačítek použijte sémantické HTML. The <button> prvek je ideální, protože je nativně zaostřitelný a dobře funguje s asistenčními technologiemi.
Další informace
Krok 3: Přidejte atributy ARIA tam, kde je to nutné
Atributy ARIA mohou zlepšit dostupnost poskytnutím dalšího kontextu pro programy pro čtení z obrazovky. Použití aria-label or aria-labelledby pro objasnění funkcí tlačítek v případě potřeby.
Předložit
Krok 4: Zajistěte navigaci pomocí klávesnice
Přístupná tlačítka musí být ovladatelná pomocí klávesnice. Otestujte svůj web pomocí Tab klíč k ověření funkčnosti tlačítka.
Krok 5: Otestujte barevný kontrast
Zajistěte dostatečný barevný kontrast mezi textem tlačítka a pozadím. Používejte nástroje jako VLNA k ověření souladu se standardy WCAG.
| Barva textu tlačítka | Barva pozadí | Kontrastní poměr | V souladu |
|---|---|---|---|
| #FFFFFF (bílá) | #000000 (černá) | 21:1 | Ano |
| #FFFFFF (bílá) | #AAAAAA (šedá) | 3:1 | Ne |
Krok 6: Využijte OneTap Accessibility Plugin
Jedno Plugin pro usnadnění přístupu OneTap zjednodušuje proces vytváření přístupných tlačítek. Mezi jeho vlastnosti patří:
- Automatické nastavení kontrastu tlačítek.
- Nástroje pro testování navigace pomocí klávesnice.
- Kontroly shody v reálném čase.
Nejlepší postupy pro přístupná tlačítka
- Ujistěte se, že tlačítka mají aktivní stav pro lepší viditelnost při navigaci na klávesnici.
- Nespoléhejte se pouze na barvu pro vyjádření stavu tlačítek (např. použití štítků nebo ikon).
- Udržujte velikost tlačítek dostatečně velká pro snadnou interakci na mobilních zařízeních.
Často kladené otázky: Přístupná tlačítka
Co zpřístupňuje tlačítko?
Přístupné tlačítko je tlačítko, které lze ovládat pomocí klávesnice, kompatibilní se čtečkou obrazovky a má dostatečný kontrast a popisný text.
Jak mohu otestovat dostupnost mých tlačítek?
Používejte nástroje jako VLNA nebo Plugin pro usnadnění přístupu OneTap identifikovat a opravit problémy.
Proč je barevný kontrast důležitý pro tlačítka?
Vysoký kontrast zajišťuje, že uživatelé se zrakovým postižením mohou číst text tlačítka a efektivně interagovat s vaším webem.
Jak OneTap pomáhá s přístupnými tlačítky?
OneTap nabízí analýzu v reálném čase, automatické úpravy kontrastu a kontroly souladu, aby bylo vytváření tlačítek bezproblémové a dostupné.
Musím pro všechna tlačítka používat atributy ARIA?
Ne vždy. Atributy ARIA jsou nutné pouze tehdy, když je potřeba další kontext, například pro nestandardní funkce tlačítek.
