„Prístupný“ znie ako vlastnosť celého webu. V praxi je to rad malých rozhodnutí vo frontende. Tu je šesť z nich, tak ako ich nachádzame na skutočných stránkach, a tak, ako vyzerajú, keď sú v poriadku.
1. Sivý text na bielej
Ako to nachádzame. Pomocné texty, ceny pod produktmi a nápovedy pri formulároch v bledosivej. Pôsobí to pokojne a v návrhu na jasnom monitore sa to číta dobre.
Ako to má byť. Text a pozadie dosiahnu pomer kontrastu 4,5:1. Veľký text, od 24 px alebo od 18,66 px tučne, si vystačí s 3:1. Dvojicu farieb overte v kontrole kontrastu WCAG skôr, než skončí v dizajnovom systéme.
Kritérium. 1.4.3 Minimálny kontrast, úroveň AA.
2. Fokus nie je vidieť
Ako to nachádzame. V CSS je outline: none, pretože rámček pri klikaní prekážal. S myšou si toho nikto nevšimne. Kto ovláda web klávesnicou, od tej chvíle nevidí, kde je.
Ako to má byť. Vlastný viditeľný štýl fokusu namiesto žiadneho: zreteľný rámček alebo prstenec, ktorý sa odlíši od pozadia, na každom odkaze, tlačidle aj poli.
Kritérium. 2.4.7 Viditeľné zameranie (fokus), úroveň AA.
3. Formulárové pole bez popisku
Ako to nachádzame. Vyhľadávacie pole alebo pole pre newsletter, ktoré má len zástupný text. Ten pri písaní zmizne a čítačky obrazovky ho ako názov nečítajú spoľahlivo.
Ako to má byť. label, ktorého for mieri na id poľa. Keď v rozložení viditeľný popisok byť nemá, popisok zostáva v kóde a schová sa vizuálne, neodstráni sa.
Kritérium. 3.3.2 Popisky alebo pokyny, úroveň A, spolu so 4.1.2 Názov, rola, hodnota.
4. Cookie lišta, z ktorej sa fokus nedostane
Ako to nachádzame. Lišta drží fokus, kým je otvorená. To je správne. Zle je, že jej tlačidlá reagujú len na myš: kto tlačí tabulátor, vracia sa na „Prijať“, Enter nič neurobí a na stránku sa nedostane.
Ako to má byť. Každé tlačidlo v lište funguje z klávesnice a po zavretí sa fokus vráti tam, kde bol. Zavretie klávesom Escape je navyše dobrá prax.
Kritérium. 2.1.1 Klávesnica a 2.1.2 Žiadna klávesová pasca, obe úroveň A. Prečo to automatický sken nenájde, je v článku prečo automatický sken nenájde pascu na klávesnici.
5. Obrázok so zlou textovou alternatívou
Ako to nachádzame. alt="obrazok", alt="foto_2024_final.jpg", alebo alternatíva popisujúca, čo je na fotke, aj keď je obrázok v skutočnosti tlačidlo.
Ako to má byť. Textová alternatíva hovorí, čo obrázok na danom mieste robí. Pri obrázkovom tlačidle teda akciu, nie motív. Čisto dekoratívne obrázky dostanú prázdne alt="", aby ich čítačka preskočila.
Kritérium. 1.1.1 Netextový obsah, úroveň A.
6. Nadpisy, ktoré len veľké vyzerajú
Ako to nachádzame. div s písmom 32 px ako titulok stránky a pod ním skutočné prvky h3. Opticky hierarchia sedí, v dokumente chýba. Kto sa pohybuje podľa zoznamu nadpisov, nevyzná sa na stránke.
Ako to má byť. Jedna h1 na stránku, pod ňou h2 a h3 v poradí, ktoré plynie z obsahu. Veľkosť robí CSS, štruktúru robí kód.
Kritérium. 1.3.1 Informácie a vzťahy, úroveň A.
Čo majú tieto príklady spoločné
Ani jeden z nich nie je zvláštny prípad pre malú skupinu. Neviditeľný fokus sa týka každého, kto práve nemá myš. Sivý text sa týka každého, kto číta vo vlaku na slnku. Chýbajúca štruktúra nadpisov sa týka každého, kto sa po stránke pohybuje po nadpisoch.
A ani jeden z nich nie je drahý, kým sa nájde v návrhu. Drahý je vo chvíli, keď sedí v dizajnovom systéme a je rozvezený na všetkých stránkach naraz.
Zistite, na čom je váš web
Bezplatné skenovanie preverí stránku podľa automatizovaných pravidiel WCAG 2.1 AA a ukáže prvé zistenia.
Tento článok je informatívny a nepredstavuje právne poradenstvo.