Archiv štítku: kontrast

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu

Schopnost otestovat si, zda web, který vytvářím, neobsahuje žádné zásadní prohřešky proti pravidlům přístupnosti, by měla patřit mezi základní dovednosti každého webdesignéra. S tím, jak si takový jednoduchý audit přístupnosti webu udělat, seznamuje diváky v následujícím videu Rob Dodson. A protože mnou doporučovaný postup vypadá až na drobnosti prakticky stejně, pojďme si ukázat, jak takový jednoduchý audit provést a na co se zaměřit.

How I do an accessibility audit — A11ycasts #11

Jednoduchý audit přístupnosti pokrývá následující stěžejní oblasti

Přístupnost a ovladatelnost prvků webové stránky z klávesnice

První věc, kterou je vhodné zkontrolovat, je přístupnost a ovladatelnost prvků z klávesnice. Klávesnice je nejdostupnější nástroj pro testování přístupnosti webu, protože i přes čím dál větší zastoupení mobilních zařízení se stále jedná o primární vstupní zařízení a každý uživatel ji má po ruce.

Jak na to? Přístupnost z klávesnice velmi jednoduše otestujeme tak, že na klávesnici začneme mačkat tabulátor. Pokud jsme se tímto způsobem schopni dostat na každý prvek a máme možnost jej z klávesnice obsloužit, pak je vše v nejlepším pořádku.

Nezapomeneme také ověřit, zda

  • prvek, který při ovládání z klávesnice získá focus, je dostatečně zvýrazněn a uživatel je tak vizuálně informován o tom, na jakém prvku se právě nachází.
  • na stránce není žádný obsah mimo viditelnou oblast obrazovky, který může nedopatřením získat focus,
  • na stránce jsou k dispozici přeskakovací (skip to) odkazy.

Vyzkoušení jednoduché navigace po webu pomocí screen readeru

Znalost alespoň základní obsluhy některého ze screen readerů by dnes už měla také patřit mezi dovedosti tvůrců webů. Od webového vývojáře se samozřejmě neočekává, že bude znát všechny jejich funkce a bude schopen plnohodnotně nasimulovat práci nevidomého uživatele. Cílem je provést základní otestování, zda na uživatele screen readeru nečeká na webové stránce nějaká past, znemožňující mu práci s ní – tedy zda grafické prvky mají alternativní textové popisky, prvky, které slouží k interakci s uživatelem (tlačítka, rozbalovací seznamy…), je možné obsloužit, či zda dynamicky zobrazený obsah získá focus.

Více informací o tom, jaké kombinace screen readerů a prohlížečů (a jakým způsobem) používat, najdete v článcích

Adam na workshopu JAWS a braille

Strukturování webové stránky – nadpisy, oblasti stránky

Správné strukturování webové stránky korektně vyznačenými nadpisy a oblastmi stránek pomáhá uživatelům screen readerů v porozumění tomu, jak je webové stránka rozvržena. Umožňuje jim také efektivní práci s webem a nabízí možnost rychle se přesunout právě na tu část stránky, kterou potřebují. Dobře vytvořenou strukturu stránky si můžeme představit jako obsah knihy – podobně, jako z obsahu získáme představu o názvech kapitol a díky vazbě název kapitoly–číslo stránky se můžeme rychle v knize přesunout tam, kam potřebujeme, stejnou službu udělá uživateli screen readeru nadpisová osnova a oblasti stránky.

Další informace lze najít v článcích Jak definovat strukturu v HTML a proč jsem začal mít rád HTML5 tagy a Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod.

Otestovat strukturu je možné jak pomocí screen readeru, tak pomocí některého z mnoha rozšíření pro webové prohlížeče (nabízí se například Web Developer).

Bližší informace k testování pomocí screen readerů viz

Představu o tom, jak taková nadpisová osnova vypadá třeba zde na Poslepu.cz, si můžete udělat z následujícího screenshotu (uživatelé screen readerů si ji mohou vyvolat pomocí odpovídající funce svého screen readeru 🙂

Poslepu.cz: ukázka nadpisové osnovy

Barvy a dostatečný kontrast

U jednotlivých prvků na stránce musí být zajištěn dostatečný barevný kontrast mezi popředím a pozadím tak, aby prezentované informace byly dobře čitelné. Nástrojů pro otestování dostatečného kontrastu existuje celá řada. Ve videu je doporučováno aXe extension od Deque Systems. Jedná se o jednoduché rozšíření, pomocí nějž je možné provést automatický audit stránky a nechat se upozornit na možné problémy. Jednou z testovaných oblastí je i dostatečný kontrast použitých barev.

Dalším rozšířením, které k testování používám, je Accessibility Developer Tools. Funguje podobně jako aXe extension, kromě upozornění na nedostatečný kontrast ale nabízí i doporučení, jaké barvy použít, aby byly vzájemně dostatečně kontrastní.

Pokud Vám testování kontrastu na úrovni kódu přijde příliš komplikované, doporučuji vyzkoušet Colour Contrast Analyser, který nabízí uživatelsky přívětivější rozhraní.

Testování přístupnosti jako součást vývoje webu

Na závěr videa pak zazní doporučení, se kterým nelze než souhlasit – zahrnout průběžné testování přístupnosti jako nedílnou součást vývoje webu a tím předcházet vzniku bariér.

Závěr

Tento přehled zcela jistě není vyčerpávající a nepokrývá všechny oblasti přístupnosti. Jeho hlavní výhoda a přínos spočívá v tom, že pomocí něj lze odhalit největší překážky v přístupnosti. Po jejich odstranění se tak může z webu, který bude pro uživatele se specifickými potřebami velmi obtížně přístupný, stát web, který bude vyhovovat alespoň základním požadavkům na přístupnost.

Contrast ratio – jednoduchý online nástroj na ověření kontrastu barev

Contrast ratio umožňuje rychle a online ověřit kontrastní poměr dvou barev (typicky barvy popředí a pozadí). Do dvou editačních polí stačí zadat informace o barvách, jejichž vzájemný kontrast chci zjistit, nástroj tyto informace v reálném čase vyhodnotí a zobrazí výsledek. Zadané barvy se současně aplikují i na samotnou stránku, takže je možné i pouhým pohledem zjistit, zda tato barevná kombinace bude dostatečně kontrastní a čitelná.

Hodnota kontrastního poměru je zobrazena v kruhu a ve chvíli, kdy tento kruh získá focus, zobrazí se informace o tom, jak si aktuální kontrast stojí z hlediska požadavků standardu WCAG 2.0. Pokud bych se chtěl podívat, jak bude stránka vypadat v opačném gardu, je možné se mezi barvami pozadí a popředí (textu) přepínat pomocí tlačítka Set as background color.

Contrast ratio - screenshot

Informace o naměřených hodnotách jsou přístupné i pro uživatele screen readerů – když tabulátorem přejdu z polí pro zadání hodnot barev, dostanu se na hodnotu s výsledkem měření a když zde stisknu šipku dolů, přečte se také informace z bubliny s oznámením o míře shody s požadavky WCAG 2.0.

Co mi ale u Contrast ratio trochu chybí, je nějaká aspoň stručná nápověda k tomu, jakými způsoby je možné hodnoty barev zadávat.

Za tip na nástroj děkuji Martinu Kleinovi.

Související odkazy

Jak vybrat barvy pro grafický návrh s ohledem na přístupnost

Dostatečný barevný kontrast umožňuje – či usnadňuje – uživatelům čtení textů a seznámení se s obsahem webu. Netýká se – jak si hodně lidí myslí – jen uživatelů s poruchou barvocitu, ale dostatečně kontrastní a dobře čitelný text ocení každý návštěvník webu. Proto je velmi důležité vzít při grafickém návrhu kontrast v potaz a zvolit pro jednotlivé části webu takové barvy, které budou vzájemně dostatečně kontrastní.

Metodika WCAG 2.0 i česká Pravidla přístupnosti používají pro měření dostatečného vzájemného kontrastu barev algoritmus světelnosti a berou také kromě použitých barev v potaz i velikost písma. Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1, pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.

Nástrojů, jak testovat dostatečný kontrast, jsem zde na POSLEPU v minulosti už několik představil. Dnes přidám další, které mohou pomoci ne primárně při zpětné kontrole, zda jsou použité barvy vzájemně dostatečně kontrastní, ale už při výběru barev pro grafický návrh.

Paletton

První krok, který musíme udělat, je vybrat si barvy pro grafický návrh. K tomu nám může posloužit například Paletton od Petra Staníčka. Paletton nabízí jako jednu ze svých funkcí simulátor některých zrakových vad (Vision simulation), takže už přímo při návrhu designu a výběru barev si můžeme vyzkoušet, jak zvolenou kombinaci barev uvidí návštěvníci, kteří barvy vidí špatně nebo je nevidí vůbec.

Paletton - Vision Simulation

Pro výběr barevných kombinací, které odpovídají požadavkům na minimální barevný kontrast, pak můžeme v Palettonu použít funkci Contrast Table. Najdeme ji pod odkazem Color Tables…, v dialogu Filter minimum contrast nastavíme hodnotu, kterou považujeme za minimální (WCAG vyžaduje 3 pro větší texty a 4,5 pro menší) a následně si v tabulce vybereme ty kombinace, které jsou dostatečně kontrastní a současně vyhovují našim záměrům.

Color tables - Contrast table

Color Palette Accessibility Evaluator

Dalším nástrojem, který nám může pomoci při výběru vhodných barev, je Color Palette Accessibility Evaluator. Jeho ovládání je také velmi jednoduché: nejprve zadáme RGB kódy vybraných barev (pokud víme, že chceme mít text černou nebo bílou barvou, je dobré do výběru zahrnout i tyto barvy), v dalším kroku si vybereme, zda chceme testovat podle požadavků WCAG AA nebo AAA a necháme si vygenerovat paletu.

Color Palette Accessibility Checker - Analysis

Nyní si vybereme jednu barvu a necháme si ji zanalyzovat, tzn. vygenerovat tabulku kontrastních poměrů této barvy oproti ostatním barvám.

color-palette-accessibility-checker-analysis

V tabulce pak vidíme, které barevné kombinace jsou dostatečně kontrastní a je tedy možné je použít (tabulka s výsledky je rozsáhlejší, v náhledu je jen její první část).

Tanaguru Contrast-Finder

Poslední z dnes představených nástrojů pomáhá v situacích, kdy nám některá z barevných kombinací nesplňuje požadavky na minimální kontrast. Vhodnou barevnou kombinaci můžeme v takovém případě hledat buď ručně (může nám k tomu posloužit třeba Colour Contrast Analyzer) nebo můžeme nalezení vhodné kombinaci svěřit nástroji s názvem Tanaguru Contrast-Finder.

Tanaguru Contrast Finder - formulář

Ovládání nástroje je opět velmi jednoduché. Do formuláře zadáme barvy, které chceme otestovat, vybereme barvu, se kterou má možnost nástroj „hýbat“ (tedy měnit ji tak, aby v kombinaci s druhou barvou vyhovovala požadavkům na minimální kontrast), zvolíme, zda chceme jako výsledek větší rozsah barev, nebo jen ty, které jsou „blízko“ původní barvě, potvrdíme a je to.

Tanaguru Contrast Finder - výsledky

Pak už jen stačí vybrat si z navržených barev tu, která se nám nejvíce líbí.

Závěr

A to je vše. Jak je z předchozích řádků zřejmé, výběr dostatečně kontrastních barev pro grafický návrh není při použití výše uvedených nástrojů nic složitého. Pokud tedy máte co do činění s barvami, zařaďte tyto nástroje do svého arsenálu. Chybu tím určitě neuděláte.

Kam dál?