Prečo na prístupných tlačidlách záleží
Prístupné tlačidlá prispievajú k inkluzívnemu webovému prostrediu a zlepšujú nasledovné:
- Skúsenosti používateľov: Zabezpečuje, aby všetci používatelia vrátane tých so zdravotným postihnutím mohli bezproblémovo interagovať s vašou stránkou.
- Výkon SEO: Súlad s prístupnosťou je v súlade s pokynmi pre vyhľadávače, čím sa zlepšuje vaše hodnotenie.
- Súlad s právnymi predpismi: Prístupné tlačidlá vám pomôžu splniť štandardy WCAG a ADA, čím sa vyhnete prípadným súdnym sporom.
Podrobný sprievodca pridávaním prístupných tlačidiel
Krok 1: Vyberte text pravého tlačidla
Text tlačidla by mal byť stručný a popisný a mal by označovať činnosť, ktorú vykonáva. Vyhnite sa vágnym označeniam ako „Kliknite sem“ alebo „Odoslať“.
- Dobrý príklad: "Stiahnuť prehľad"
- Zlý príklad: "Kliknite sem"
Krok 2: Zabezpečte správnu štruktúru HTML
Na vytváranie tlačidiel použite sémantický kód HTML. The <button> prvok je ideálny, pretože je natívne zaostriteľný a dobre funguje s asistenčnými technológiami.
Zistite viac
Krok 3: Pridajte atribúty ARIA tam, kde je to potrebné
Atribúty ARIA môžu zlepšiť dostupnosť poskytnutím dodatočného kontextu pre čítačky obrazovky. Použite aria-label or aria-labelledby na objasnenie funkcií tlačidiel v prípade potreby.
Odoslať
Krok 4: Zabezpečte navigáciu pomocou klávesnice
Prístupné tlačidlá musia byť ovládateľné pomocou navigácie pomocou klávesnice. Otestujte svoje stránky pomocou Tab kľúč na overenie funkčnosti tlačidla.
Krok 5: Otestujte farebný kontrast
Zabezpečte dostatočný farebný kontrast medzi textom tlačidla a pozadím. Používajte nástroje ako WAVE na overenie súladu s normami WCAG.
| Farba textu tlačidla | Farba pozadia | Kontrastný pomer | poddajný |
|---|---|---|---|
| #FFFFFF (biela) | #000000 (čierna) | 21:1 | Áno |
| #FFFFFF (biela) | #AAAAAA (sivá) | 3:1 | Nie |
Krok 6: Využite doplnok OneTap Accessibility Plugin
OneTap Accessibility Plugin zjednodušuje proces vytvárania prístupných tlačidiel. Medzi jeho vlastnosti patrí:
- Automatické nastavenie kontrastu tlačidiel.
- Nástroje na testovanie navigácie pomocou klávesnice.
- Kontroly súladu v reálnom čase.
Osvedčené postupy pre prístupné tlačidlá
- Uistite sa, že tlačidlá majú zaostrený stav pre lepšiu viditeľnosť počas navigácie pomocou klávesnice.
- Nespoliehajte sa len na farbu na vyjadrenie stavu tlačidiel (napr. použite štítky alebo ikony).
- Ponechajte dostatočne veľké tlačidlá pre jednoduchú interakciu na mobilných zariadeniach.
Často kladené otázky: Prístupné tlačidlá
Čo sprístupňuje tlačidlo?
Prístupné tlačidlo je také, ktoré umožňuje navigáciu pomocou klávesnice, je kompatibilné s čítačkou obrazovky a má dostatočný kontrast a popisný text.
Ako môžem otestovať dostupnosť svojich tlačidiel?
Použite nástroje ako WAVE alebo OneTap Accessibility Plugin identifikovať a opraviť problémy.
Prečo je farebný kontrast dôležitý pre tlačidlá?
Vysoký kontrast zabezpečuje, že používatelia so zrakovým postihnutím môžu čítať text tlačidla a efektívne interagovať s vašou stránkou.
Ako OneTap pomáha s prístupnými tlačidlami?
OneTap ponúka analýzu v reálnom čase, automatické úpravy kontrastu a kontroly súladu, aby bolo vytváranie tlačidiel bezproblémové a dostupné.
Musím použiť atribúty ARIA pre všetky tlačidlá?
Nie vždy. Atribúty ARIA sú potrebné len vtedy, keď je potrebný ďalší kontext, napríklad pre neštandardné funkcie tlačidiel.
