4 běžné problémy s přístupností webu, které je třeba znát

Problém kontrastního poměru

Nejčastějším problémem s přístupností, se kterým jsem se v průběhu let setkal, je. problém s kontrastem a přístupností barev, špatný kontrastní poměr ztěžuje viditelnost obsahu stránky, což je pro uživatele, včetně těch se zrakovým postižením, velmi škodlivé.

Kontrast je měřítkem rozdílu ve vnímané "svítivosti" nebo jasu dvou barev, například rozdílu mezi barvou pozadí a barvou popředí obsahu stránky. Podívejme se na tento navigační panel.

Řekněme, že se vašemu klientovi tato zelenkavá barva opravdu líbí a považuje ji za úžasnou, ale je zde problém s kontrastem. Máme #FFFFFF pozadí s #83A94C barva textu, což vede ke kontrastnímu poměru 2,71:1, který je mnohem nižší než minimální hodnota. 4.5:1 potřebné. Pro zjištění tohoto problému máme několik řešení:

1. Použijte online nástroj pro kontrolu kontrastu, jako je Kontrola kontrastu Webaim, který vypočítá kontrastní poměr a poskytne vám informace o tom. Předat nebo Selhání stupeň.
2. Použijte jedno z mnoha rozšíření pro kontrolu kontrastu v prohlížeči, např: Kontrola kontrastu barev WCAG.
3. Vyzkoušejte integrovanou kontrolu kontrastu v prohlížeči. Chcete-li jej použít v prohlížeči Google Chrome, otevřete nástroje pro vývojáře, prohlédněte si cílový prvek (např. odkaz Home našeho navigačního panelu), přejděte na vlastnost CSS color a kliknutím na obdélník barvy otevřete nástroj pro výběr barvy, v dolní části se zobrazí hodnota kontrastního poměru, rozbalte ji a získejte další podrobnosti. Pro Firefox je postup naprosto stejný, jen v levém dolním rohu nástroje pro výběr barev je zobrazen malý rozdíl v poměru.

Chcete-li získat více informací o kontrastu, podívejte se na tuto stránku Článek o kontrastu a přístupnosti barev.

Problém s textem odkazu

Odkazy jsou v dnešní době velkou součástí webu, proto je jejich zpřístupnění velmi důležité. Odkaz musí dávat smysl a informovat uživatele o jeho kontextu, takže neinformativní odkaz s textem typu přečtěte si více, klikněte zde, zkontrolujte podrobnosti není příliš užitečný, takže místo přidání "zkontrolujte podrobnosti" pro produkt podrobnosti, například použití názvu produktu, jako je "Mandalorianská helma", je lepší a informativnější. Slova jako např. klikněte zde nebo více o lze vynechat, protože odkaz je standardně klikací a něco jako "více o dnešních zprávách" lze zkrátit na "dnešní zprávy". Neexistuje žádné zvláštní pravidlo nebo omezení týkající se délky odkazu, tzv. odkaz musí být čitelný a dostatečně dlouhý, aby bylo možné dobře popsat jeho účel.

Obrázky jako odkazy jsou široce používaným vzorem, takže se musí řídit stejnými pravidly, o kterých jsme hovořili výše. Atribut alt obrázku bude hrát roli textu odkazu a bude ohlašován čtečkami obrazovky. Při zacházení s obrázky jako odkazy existuje více scénářů, pokud je obrázek jediným obsahem odkazu, pak musí mít atribut alt, pokud je v odkazu nějaký text a obrázek, pak můžeme atribut alt vynechat, zde je několik příkladů:

<a href="/notifications">
  <img src="/img/notification.png" alt="Oznámení">
</a>

Podívejte se na některé odkazy zde a přečtěte si o přístupnosti odkazů:Text a vzhled odkazu, Funkční obrázky.

Chybějící popisek vstupního formuláře

Všichni jsme se již setkali s formulářovými vstupy bez popisku a pouze se zástupným znakem, který popisuje účel vstupu. První poznámka je, že jakmile uživatel vyplní všechny vstupy a zástupné symboly již nebudou v dohledu, nebudeme mít žádný vizuální kontext o účelu vstupů, ale nechme nás zaměřte se na přístupnost.

Přidružení štítek na vstup nám přináší dvě hlavní výhody: čtečka obrazovky přečte štítek, když je uživatel zaměřen na vstup formuláře, a když je na štítek kliknuto nebo se ho dotknete, prohlížeč předá zaměření na přidružený vstup. Jednoduchým řešením takové situace je prostě přidat štítky následujícím způsobem:

    Křestní jméno

    
  

    Příjmení

    
  

    E-mail

    
  

    Odeslat
  

```

To je vše, všechny vstupy mají přiřazené štítky, takže jsou přístupné všem. Můžeme dokonce odstranit zástupné symboly, abychom se vyhnuli duplicitnímu účelu vstupu, ale všichni víme, že reálné scénáře nejsou tak snadno řešitelné, právě jste obdrželi návrh, který má tyto vstupy formuláře bez štítků, a klient nechce tuto část změnit. Prvním řešením, které vás napadne, je použít tzv. zobrazení: žádné; nebo viditelnost: skrytá; k našim štítkům, což je skryje, ale stále tam jsou, že? Tyto vlastnosti skrývají prvky nejen na obrazovce, ale také pro uživatele čtečky obrazovky, takže to náš problém nevyřeší.

Můžeme použít vzor klipu k vyřešení tohoto problému. Tímto způsobem obsah vizuálně skryjeme, ale zároveň ho poskytneme čtenářům obrazovky. Vytvoříme následující CSS pouze pro sr a použít ji na všechny štítky:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }

Tím se naše štítky skryjí, budou dostupné pro čtečky obrazovky a budou odpovídat našemu designu. Stránka :not(:focus):not(:active) pseudotřída zabraňuje zaostřitelným prvkům, jako jsou např. a, tlačítko, vstup před skrytím při přijímání zaměření.

Žádný indikátor zaostření

Kdysi dávno jsem to udělal v globálním souboru stylů CSS:

* {
outline: none; /* strašná chyba */
}

Kolem roku 2020 jsem si všiml, že se na vstupech formuláře v prohlížeči Google Chrome objevují černé okraje, když je na ně zaostřeno, nebo na tlačítkách, když se do nich dostanete na kartě - to bylo opravdu divné, protože jsem tomu tehdy nerozuměl, po nějakém výzkumu jsem zjistil, že je to kvůli vlastnosti CSS outline, takže odstranění tohoto "problému" pro mě vyřešilo.

V té době jsem netušil, jak se to má správně dělat. Poté, co jsem trochu pátral po tom, co a jak je s tímto novým výchozím nastavením, jsem zjistil, že obrys je indikátorem zaměření prvku a v případě jeho odstranění musí být zajištěno zjevné stylizování zaměření, což je v podstatě to, co jsem dělal, považováno za špatný postup. Indikátory zaměření si můžete upravit podle svého uvážení, ale jejich úplné odstranění z webu je velkým problémem pro přístupnost. Přizpůsobení stylování zaměření prvku je například poměrně snadné:

 a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }

Nástroje pro zpřístupnění

Kontrola všech problémů, o kterých jsme hovořili, může být velmi náročná, zejména s vědomím, že je třeba pokrýt ještě mnoho dalších věcí týkajících se přístupnosti, takže abychom se s přístupností vypořádali, máme 2 skvělá rozšíření prohlížeče.

Nástroj pro hodnocení WAVE je sada hodnotících nástrojů, která nám pomáhá zpřístupnit náš webový obsah. Je k dispozici v prohlížečích Google Chrome a Firefox.

Vyzkoušíme si to na malé webové stránce obsahující navigační panel a vstup, kterému chybí popisek, a uvidíme, co nám to vrátí.Po instalaci rozšíření stačí kliknout na ikonu rozšíření, abychom ho mohli použít.

Na kartě Souhrn je zobrazena 1 chyba (chybějící popisek prvku formuláře), 2 chyby kontrastu a 1 upozornění (chybějící struktura nadpisu), jak vidíte, výsledek je velmi přehledný a podrobný. Karta Podrobnosti zobrazí seznam všech chyb, upozornění a prvků. Můžeme také interagovat přímo na stránce kliknutím na tyto červené obdélníky a zkontrolovat popis a typ chyby.

Nástroje Axe DevTools je výkonná a přesná sada nástrojů pro přístupnost. Je k dispozici v prohlížečích Google Chrome i Firefox. Po instalaci rozšíření budeme muset otevřít nástroje pro vývojáře prohlížeče, přejít na kartu axe DevTools a kliknout na možnost Skenovat všechny mé stránky.

Můžete vidět, že Axe DevTools hlásí stejné problémy s hodnotícím nástrojem WAVE, což jsou problémy s kontrastem, chybějícím prvkem formuláře a chybějícím prvkem nadpisu, a dokonce nám poskytl několik osvědčených postupů, které bychom měli dodržovat.

Dalším způsobem, jak otestovat přístupnost, je použít čtečku obrazovky a otestovat s ní své webové stránky.K dispozici je mnoho čteček obrazovky, jmenujme alespoň některé:

• NVDA
• VoiceOver je k dispozici v zařízeních macOs.
• Orca je bezplatná čtečka obrazovky s otevřeným zdrojovým kódem pro Linux.

Souhrn

V tomto článku jsme se seznámili s některými běžnými problémy s přístupností webu, způsoby jejich řešení a skvělými nástroji pro testování přístupnosti webu. O přístupnosti prvků, jako jsou dialogová okna, akordeony a karusely, je toho ještě hodně, ale jak jste viděli v tomto článku, existuje spousta dokumentace a nástrojů, které vám s přístupností pomohou.

Několik klíčových bodů, které je třeba si zapamatovat:

• Vždy zkontrolujte kontrastní poměr.
• Odkazy vždy opatřete informativním obsahem.
• K formulářovému prvku musí být přiřazen popisek.
• Je třeba zajistit zřejmé zaměření stylingu.