Prístupnosť pre vývojárov: Tvorba inkluzívneho kódu
Vývojári sú architektmi prístupnosti na implementačnej úrovni. Kým dizajnéri stanovujú vizuálne a interakčné základy, je to kód, ktorý v konečnom dôsledku určuje, či webová stránka funguje s navigáciou klávesnicou, správne komunikuje s čítačkami obrazovky a udržiava prístupnosť naprieč prehliadačmi a zariadeniami.
Dobrou správou je, že väčšina best practices pre prístupnosť sa zhoduje s všeobecnými best practices pre čistý, sémantický, štandardne kompatibilný kód. Písanie prístupného kódu nie je o pridávaní zložitosti — je to o správnom písaní kódu na prvý pokus.
Najprv sémantické HTML
Jediná najúčinnejšia vec, ktorú môžete pre prístupnosť urobiť, je správne používať sémantické HTML elementy. HTML5 poskytuje bohatú slovnú zásobu elementov, ktoré nesú vlastný význam a funkcie prístupnosti. Element <button> je automaticky zaostriteľný, aktivovateľný klávesnicou a oznámený čítačkami obrazovky ako tlačidlo. Element <div> s onclick handlerom nemá žiadnu z týchto vlastností bez výraznej dodatočnej práce.
Používajte <nav> pre navigačné oblasti, <main> pre hlavný obsah, <header> a <footer> pre ich príslušné sekcie, <section> a <article> pre obsahové oblasti, <h1> až <h6> pre nadpisy v správnom hierarchickom poradí, <ul> a <ol> pre zoznamy, <table> s <th> pre tabuľkové dáta, <label> s atribútmi for pre formulárové prvky a natívne <button> a <a> elementy pre interaktívne ovládacie prvky.
Tieto elementy vytvárajú strom prístupnosti, ktorý asistenčné technológie používajú na prezentáciu vášho obsahu používateľom. Keď ich používate správne, veľká časť prístupnosti je riešená automaticky.
Štruktúra nadpisov
Nadpisy vytvárajú štrukturálny obrys vašej stránky. Používatelia čítačiek obrazovky často navigujú podľa nadpisov, aby pochopili organizáciu obsahu a našli konkrétne sekcie. Každá stránka by mala mať presne jeden <h1> a nadpisy by mali nasledovať logickú hierarchiu bez preskakovania úrovní — <h3> by nemal nasledovať po <h1> bez <h2> medzi nimi.
Nikdy nepoužívajte nadpisové elementy na vizuálne štylizovanie. Ak potrebujete veľký tučný text, ktorý nie je nadpis, použite CSS na inom elemente. Naopak, ak obsah funguje ako nadpis, označte ho ako taký bez ohľadu na jeho vizuálnu prezentáciu.
Prístupnosť klávesnice
Všetky funkcie musia byť ovládateľné iba pomocou klávesnice. To znamená, že každý interaktívny prvok — odkazy, tlačidlá, formulárové prvky, ponuky, modálne okná, posuvníky, záložky — musí byť dosiahnuteľný cez klávesu Tab (alebo Shift+Tab pre spätný smer), aktivovateľný klávesou Enter alebo Space a ukončiteľný tam, kde je to vhodné.
Nikdy nevytvárajte klávesnicové pasce, kde sa používatelia môžu dostať do prvku tabom, ale nemôžu sa z neho dostať von. Modálne dialógy by mali zachytávať fokus v rámci dialógu, kým je otvorený, a vrátiť fokus na spúšťací prvok po zatvorení, ale stlačenie Escape by malo dialóg vždy zavrieť.
Zabezpečte, aby poradie fokusu nasledovalo logickú postupnosť zodpovedajúcu vizuálnemu rozloženiu. Poradie DOM by malo vo všeobecnosti zodpovedať vizuálnej prezentácii. Vyhnite sa používaniu kladných hodnôt tabindex, ktoré prepíšu prirodzené poradie fokusu a vytvárajú zmätok. Používajte tabindex="0" na zaostrenie neinteraktívnych elementov, keď je to potrebné, a tabindex="-1" pre elementy, ktoré by mali byť zaostriteľné len programovo.
Jazyk stránky
Nastavte predvolený jazyk každej stránky pomocou atribútu lang na elemente <html>. To hovorí čítačkám obrazovky, aké pravidlá výslovnosti použiť. Ak sa jazyk v rámci obsahu zmení — napríklad francúzska fráza v slovenskej stránke — označte zmenu atribútom lang na obsahujúcom elemente.
Prístupnosť formulárov
Formuláre sú miestom, kde používatelia poskytujú vstupy, a sú častým zdrojom zlyhaní prístupnosti. Každý formulárový prvok musí mať programovo priradený popis, typicky pomocou elementu <label> s atribútom for zodpovedajúcim id prvku. Zoskupte súvisiace prvky pomocou <fieldset> a <legend>.
Keď sú zistené chyby vstupu, identifikujte pole s chybou a opíšte chybu v texte. Poskytnite návrhy na opravu, kde je to možné. Pre polia, ktoré akceptujú konkrétne formáty, poskytnite jasné pokyny o očakávanom formáte. Používajte atribút autocomplete na povolenie automatického dopĺňania prehliadačom pre bežné polia ako meno, email, adresa a telefónne číslo.
Stavové správy, ktoré nedostanú fokus — ako „položka pridaná do košíka" alebo „nájdené 3 výsledky" — musia byť oznámené používateľom čítačiek obrazovky prostredníctvom ARIA živých oblastí alebo stavových rolí.
Alternatívny text
Každý nedekoratívny obrázok musí mať zmysluplný alternatívny text, ktorý popisuje jeho obsah alebo funkciu. Pre informatívne obrázky opíšte, čo obrázok sprostredkúva. Pre funkčné obrázky (ako logo, ktoré odkazuje na domovskú stránku) opíšte funkciu. Pre dekoratívne obrázky, ktoré nepridávajú žiadne informácie, použite prázdny atribút alt (alt=""), aby ich čítačky obrazovky úplne preskočili.
Zložité obrázky ako grafy, diagramy alebo schémy môžu potrebovať dlhšie popisy poskytnuté prostredníctvom titulku, priľahlého textu alebo prepojeného podrobného popisu.
WAI-ARIA
Špecifikácia Accessible Rich Internet Applications poskytuje ďalšiu sémantiku pre situácie, kde natívne HTML nie je dostatočné. ARIA umožňuje komunikovať roly, stavy a vlastnosti asistenčným technológiám pre vlastné widgety a dynamický obsah.
Avšak ARIA by mala byť používaná uvážlivo. Prvé pravidlo ARIA je: ak môžete použiť natívny HTML element, ktorý má sémantiku a správanie, ktoré potrebujete, urobte tak. ARIA nepridáva funkcionalitu — pridáva len sémantiku. <div role="button"> stále potrebuje JavaScript pre ovládanie klávesnicou, zatiaľ čo natívny <button> to zvláda automaticky.
Používajte ARIA orientačné roly (alebo ich HTML5 ekvivalenty) na definovanie oblastí stránky. Používajte aria-label a aria-labelledby na poskytnutie prístupných názvov, kde viditeľný text nie je dostatočný. Používajte aria-expanded, aria-selected, aria-checked a ďalšie stavové atribúty na komunikáciu aktuálneho stavu interaktívnych widgetov. Používajte aria-live oblasti na oznamovanie dynamických aktualizácií obsahu.
Responzívny dizajn a preformátovanie
Obsah musí byť prezentovateľný bez straty informácií pri šírke 320 CSS pixelov bez potreby horizontálneho rolovania. To zabezpečuje, že používatelia, ktorí zväčšia na 400 % na štandardnom desktopovom displeji, môžu stále pristupovať ku všetkému obsahu. Navrhujte svoje rozloženia tak, aby preformátovali obsah do jedného stĺpca pri úzkych šírkach namiesto vyžadovania rolovania v dvoch rozmeroch.
Preskočiť odkazy
Poskytnite mechanizmus pre používateľov klávesnice na obídenie opakujúcich sa blokov obsahu, ako sú navigačné ponuky, a priamy skok na hlavný obsah. Najčastejšou implementáciou je odkaz „Preskočiť na hlavný obsah", ktorý je prvým zaostriteľným prvkom na stránke a stáva sa viditeľným po zaostrení.
Kontrolný zoznam testovania pre vývojárov
Pred nasadením akejkoľvek funkcie overte: všetky funkcie fungujú iba s klávesnicou; poradie fokusu je logické; fokus je viditeľný na všetkých interaktívnych prvkoch; všetky obrázky majú vhodný alt text; všetky formulárové prvky majú popisy; jazyk stránky je nastavený; hierarchia nadpisov je správna; ARIA je používaná správne a iba keď je to nevyhnutné; obsah sa preformátuje pri šírke 320px; a dynamické aktualizácie obsahu sú oznámené čítačkám obrazovky.
V tejto sekcii
Je váš web prístupný?
Skenujte svoj web zadarmo a získajte WCAG skóre za pár minút.
Skenovať web zadarmo