Ako otestovať prístupnosť webu: bezplatné nástroje a kontroly

Tento príbeh počúvame často. Niekto spustí Lighthouse, dostane za prístupnosť zelenú stovku a ide ďalej. O týždeň neskôr napíše zákazník, že nemohol zaplatiť, pretože sa k formuláru na zadanie karty nedostal klávesnicou. Obe veci sú pravdivé. Automatická kontrola prešla a web aj tak zlyhal pri skutočnom človeku.

Tento návod ukazuje, ako testovať poriadne s malým rozpočtom: ktoré bezplatné nástroje spustiť, 15-minútovú ručnú rutinu, prvý pokus s čítačkou obrazovky a kedy sa oplatí zaplatiť za audit.

Povie mi automatický nástroj, či je môj web prístupný?

Nie. Automatické nástroje rýchlo nájdu niektoré problémy, no na mnohé otázky prístupnosti musí odpovedať človek. Keď britská Government Digital Service (GDS) testovala 10 nástrojov na stránke so 143 známymi chybami, najlepší našiel 41 %. W3C to hovorí priamo: hodnotiace nástroje „nedokážu určiť prístupnosť, môžu pri tom len pomáhať“.

Test GDS (otvorí sa na novej karte) pochádza z februára 2017 a jeho 41 % (výsledok nástroja Asqatasun) zahŕňalo aj výzvy nástroja na ručnú kontrolu. Nástroje sa odvtedy zlepšili, no medzera má stále tú istú príčinu. Softvér zistí, že obrázok nemá alternatívny text. Nezistí však, že „červené šaty“ je nesprávny opis fotky modrého obleku, ani to, či má poradie fokusu zmysel.

Berte preto nástroj ako požiarny hlásič, nie ako statický posudok budovy. Spustiť ho sa aj tak oplatí: WebAIM Million 2026 (otvorí sa na novej karte) našiel zistiteľné chyby na 95,9 % z milióna najnavštevovanejších domovských stránok, takže väčšina webov má čo rýchlo opraviť. Ako hovorí príručka W3C k výberu nástrojov (otvorí sa na novej karte): „Je potrebný ľudský úsudok.“

Ktoré bezplatné nástroje na testovanie prístupnosti použiť?

Použite jeden alebo dva automatické nástroje, nástroj na kontrolu kontrastu a čítačku obrazovky. Nástroje uplatňujú rôzne pravidlá a výsledky hlásia rôzne, takže dva nástroje zvyčajne zachytia viac ako jeden. Každý z nástrojov nižšie má bezplatnú verziu. Skôr než sa na niektorý spoľahnete, overte si jeho aktuálne podmienky, pretože názvy, funkcie aj ceny sa menia.

Čo môžem ručne skontrolovať za 15 minút?

Pomerne veľa. Easy Checks (otvorí sa na novej karte) (jednoduché kontroly) od W3C pokrývajú titulky stránok, alternatívny text, nadpisy, kontrast, odkazy na preskočenie, viditeľný fokus klávesnice, jazyk stránky, priblíženie, titulky k videám a popisy formulárov. Vyberte jednu dôležitú stránku, napríklad stránku produktu alebo rezervačný formulár, a každej kontrole venujte minútu či dve. Nájdete veci, ktoré nenahlási žiadny nástroj.

W3C uvádza, že tieto kontroly „pokrývajú len niekoľko problémov s prístupnosťou“, takže nejde o úplné hodnotenie. Aj tak je to najlepšia štvrťhodina, ktorú tomu môžete venovať:

1. Titulok stránky (1 minúta). Hovorí karta prehliadača, o akú stránku ide, napríklad „Rezervácia stola | Bistro Ruža“, a nie všade len „Domov“?
2. Obrázky (2 minúty). Zobrazte alternatívny text pomocou WAVE alebo podobného nástroja. Je presný? Preskakujú sa dekoratívne obrázky?
3. Nadpisy (2 minúty). Vypíšte si nadpisy a prečítajte ich samostatne. Fungujú ako prehľadný obsah stránky?
4. Kontrast (2 minúty). Skontrolujte základný text, malý sivý text, text tlačidiel a text na obrázkoch.
5. Klávesnica (4 minúty). Odložte myš a prejdite stránku klávesom Tab (pozri ďalšiu časť).
6. Priblíženie (2 minúty). Prečítate pri 200 % a potom pri 400 % stále všetko a dokážete používať menu bez posúvania do strán?
7. Formuláre a jazyk (2 minúty). Kliknite na popis každého poľa; v dobre postavenom formulári sa tým kurzor presunie do poľa. V správe nástroja skontrolujte, či nechýba jazyk stránky.

Ako testovať klávesnicou?

Odložte myš. Klávesom Tab sa posúvate dopredu, Shift+Tab dozadu, Enter otvára odkazy, medzerník alebo Enter stláča tlačidlá a šípky slúžia v menu a medzi prepínačmi. Každý interaktívny prvok by mal byť dostupný, vždy by ste mali vidieť, kde ste, a nikdy by ste nemali uviaznuť.

Na Macu Safari pri stlačení Tab preskakuje odkazy, kým v rozšírených nastaveniach nezapnete, aby Tab zvýrazňoval každú položku na stránke (v angličtine „Press Tab to highlight each item on a webpage“). Potom skontrolujte:

• Vidíte vždy, kde ste? Ak obrys fokusu zmizne, používateľ klávesnice sa stratí.
• Je poradie logické? Fokus by mal nasledovať poradie čítania.
• Nie je niečo zakryté? Fixná hlavička alebo lišta s cookies, ktorá skryje prvok s fokusom, porušuje kritérium WCAG 2.2 Nezakrytý fokus.
• Dostanete sa von? Otvorte každé menu, vyskakovacie okno a výber dátumu a skúste odísť. Kláves Escape by mal dialógové okná zatvárať.
• Funguje celá cesta? Pridajte produkt, zmeňte množstvo, uplatnite zľavový kupón a dostaňte sa k platbe bez myši.

Každú chybu zapíšte presne: „Výber veľkosti na stránke produktu sa nedá otvoriť klávesom Enter ani medzerníkom“ sa opraví oveľa rýchlejšie ako „klávesnica nefunguje“.

Ako prvýkrát testovať s čítačkou obrazovky?

Začnite čítačkou obrazovky, ktorú už vaše zariadenie má, alebo na Windows programom NVDA, a vypočujte si jednu stránku. Nesnažíte sa ju používať ako expert. Kontrolujete, či sa nadpisy, odkazy, tlačidlá, obrázky a polia formulárov oznamujú so zmysluplnými názvami a či nič dôležité nezostáva nemé.

• Mac: Command+F5 zapína a vypína VoiceOver; Control+Option+U otvára rotor, zoznam nadpisov, odkazov a ovládacích prvkov formulárov.
• Windows: v NVDA klávesom H preskakujete medzi nadpismi a Insert+F7 vypíše odkazy a nadpisy.
• Telefón: zapnite VoiceOver (iPhone) alebo TalkBack (Android) a potiahnutím doprava prechádzajte z položky na položku. Najprv sa naučte, ako ho vypnúť.

Sústreďte sa na to najdôležitejšie. V prieskume WebAIM medzi používateľmi čítačiek obrazovky z roku 2024 (otvorí sa na novej karte) uviedlo 71,6 % respondentov, že sa v dlhej stránke najprv orientujú podľa nadpisov, takže začnite tam. Potom si zobrazte zoznam odkazov: päť odkazov s názvom „Čítať viac“ nikomu nič nepovie. „Pridať do košíka, tmavomodrý sveter“ je užitočné tlačidlo; „tlačidlo“ nie. Nakoniec vyplňte formulár a skontrolujte, či sa prečíta každé pole a každá chyba.

Pri záveroch buďte skromní. Ak vám to znie pokazene, pravdepodobne to pokazené je; ak to znie v poriadku, nie je to dôkaz. Ako skúsení používatelia naozaj pracujú, si prečítajte v článku ako používajú web ľudia so zdravotným postihnutím.

Ako skontrolovať priblíženie, preformátovanie a medzery v texte?

Priblížte prehliadač na 200 % a skontrolujte, či sa text zväčší bez orezania a prekrývania. Potom otestujte preformátovanie: pri priblížení na 400 % v okne širokom 1 280 pixelov by sa mal obsah zmestiť bez posúvania do strán. Nakoniec zväčšite medzery medzi písmenami, slovami, riadkami a odsekmi a overte, že sa nič nerozpadne ani nezmizne.

Zodpovedá to kritériám WCAG Zmena veľkosti textu (1.4.4), Preformátovanie (1.4.10) (otvorí sa na novej karte) a Medzery v texte (1.4.12) (otvorí sa na novej karte). Preformátovanie počíta so šírkou 320 CSS pixelov, čo podľa W3C „zodpovedá počiatočnej šírke zobrazenia 1 280 CSS pixelov pri priblížení na 400 %“. Medzery v texte požadujú, aby sa nič nestratilo, keď si čitateľ nastaví výšku riadka na 1,5-násobok veľkosti písma, medzery medzi odsekmi na 2-násobok, medzery medzi písmenami na 0,12-násobok a medzery medzi slovami na 0,16-násobok.

Bookmarklet na medzery v texte, teda malý skript uložený ako záložka, použije všetky štyri hodnoty jedným kliknutím. Sledujte, či text nepreteká z tlačidiel a či sa popisy na okrajoch neorezávajú. Pri priblížení na 400 % ukáže notebook zhruba to, čo malý telefón, takže dobre postavený responzívny web väčšinu z toho zvládne už sám osebe.

Ako skontrolovať formuláre, chybové hlásenia a pokladňu?

Každý dôležitý formulár vyplňte trikrát: raz správne, raz so všetkými poľami prázdnymi a raz s úmyselnými chybami. Každé pole by malo mať viditeľný popis, každá chyba by mala byť vysvetlená slovami pri svojom poli a do polí na heslo a overovací kód by sa malo dať vkladať.

• Chyby. Červené „Neplatný vstup“ nestačí. „Zadajte dátum platnosti vo formáte MM/RR“ pri poli áno. Po odoslaní by sa mal fokus presunúť na súhrn chýb alebo na prvé chybné pole.
• Prihlásenie a kódy. Podľa kritéria Prístupná autentifikácia (otvorí sa na novej karte) vo WCAG 2.2 je blokovanie vkladania alebo správcov hesiel porušením, ak neexistuje iný spôsob prihlásenia.
• CAPTCHA a časové limity. Používatelia čítačiek obrazovky v prieskume WebAIM označili CAPTCHA za najproblematickejší prvok na webe. Overte, či existuje prístupná alternatíva a či sa dajú časové limity predĺžiť.

Náš kontrolný zoznam prístupnosti webu má pre e-shopy podrobnejší zoznam vrátane líšt s cookies a vyskakovacích okien.

Čo zahŕňa profesionálny audit prístupnosti a kedy ho potrebujem?

Audit prístupnosti je štruktúrovaná kontrola odborníka podľa konkrétnej normy, zvyčajne WCAG 2.1 alebo 2.2 na úrovni AA. Kombinuje automatické skeny s ručným testovaním a testovaním asistenčnými technológiami na kľúčových šablónach a cestách a končí správou so zoradenými zisteniami. Potrebujete ho, keď sa na vás vzťahuje zákon, pred veľkým spustením alebo keď klienti žiadajú dôkazy.

Skôr než sa dohodnete na cene, opýtajte sa:

• Podľa akej normy, verzie a úrovne budete testovať?
• Ktoré šablóny a cesty sú v rozsahu? Pri e-shope: domovská stránka, kategória, produkt, košík, pokladňa, stránky účtu a formuláre.
• Testujete ručne s čítačkami obrazovky, klávesnicou a priblížením, a v akých prehliadačoch a zariadeniach?
• Zoraďuje správa problémy podľa závažnosti, uvádza, kde sa nachádzajú, a navrhuje opravy?
• Je súčasťou opakovaný test?

Ceny sa výrazne líšia podľa dodávateľa, krajiny a rozsahu, preto porovnávajte, čo je v cene. Ak sa na vás vzťahuje Európsky akt o prístupnosti, audit podloží aj vaše verejné vyhlásenie; náš návod k EAA vysvetľuje, koho sa týka.

Prečo testovať s používateľmi so zdravotným postihnutím?

Pretože spĺňať normu a byť ľahko použiteľný nie je to isté. Pokladňa môže splniť každé kritérium WCAG, a používateľovi čítačky obrazovky môže aj tak trvať dvadsať minút. W3C uvádza, že hodnotenie s používateľmi so zdravotným postihnutím „odhalí problémy s použiteľnosťou, ktoré samotné hodnotenie zhody neodhalí“, a ukáže vášmu tímu, ako ľudia web naozaj používajú.

Laboratórium nepotrebujete. Niekoľko stretnutí nad najdôležitejšou úlohou, napríklad nájdením produktu a zaplatením, vás naučí viac ako ďalšie kolo skenov. Účastníkov hľadajte cez organizácie ľudí so zdravotným postihnutím, výskumné agentúry alebo medzi vlastnými zákazníkmi a za ich čas im zaplaťte. Nechajte ich používať vlastné zariadenia a nastavenia. Príručka W3C o zapájaní používateľov do hodnotenia (otvorí sa na novej karte) pokrýva praktickú stránku.

Čo robiť s výsledkami?

Zoraďte problémy podľa toho, ako veľmi ľuďom prekážajú a kde sa vyskytujú, opravte ich vo vlastnom kóde a obsahu webu, testujte znova a zaznamenajte, čo ešte zostáva. Pole bez popisu v pokladni je dôležitejšie ako nedostatočný kontrast v päte a oprava v zdieľanej šablóne opraví každú stránku, ktorá ju používa.

1. Stanovte priority. Najprv prekážky na kľúčových cestách (pokladňa, rezervácia, registrácia), potom zdieľané šablóny a nakoniec jednotlivé stránky.
2. Opravujte pri zdroji. Zmeňte tému, komponent alebo obsah, nielen prejav problému.
3. Testujte znova. Zopakujte tie isté kontroly, ručne aj nástrojmi.
4. Dokumentujte. Známe problémy s dátumami uveďte vo svojom vyhlásení o prístupnosti. Náš návod k WCAG 2.2 vysvetľuje novšie kritériá.
5. Opakujte. Ku každému vydaniu pridajte kontrolu klávesnicou a automatický sken.

Ak používate widget prístupnosti vrátane nášho, testujte so zatvoreným widgetom. Panel ako SiteAccessible dáva návštevníkom ďalšie možnosti úpravy stránky, no WCAG posudzuje, či stránka funguje vo svojom predvolenom stave. Niektoré audítorské schémy stránky s overlay skriptom nehodnotia, preto sa najprv poraďte s audítorom.