Přístupnost pro designéry: Tvorba inkluzivního vizuálního a interakčního designu

Přístupný web začíná přístupným designem. Mnoho nejčastějších selhání přístupnosti — nedostatečný barevný kontrast, nejasná navigace, matoucí rozvržení, chybějící indikátory fokusu — má svůj původ v rozhodnutích učiněných ve fázi návrhu. V době, kdy je napsán kód, jsou tyto problémy zabudované a jejich oprava vyžaduje redesign, nikoli pouhou úpravu kódu.

Jako designér máte na přístupnost větší vliv než téměř kdokoli jiný v týmu. Rozhodnutí, která činíte ohledně barev, typografie, mezer, navigačních vzorů a interakčních modelů, určují, zda miliony uživatelů mohou efektivně interagovat s vaším produktem.

Barevný kontrast

Nedostatečný barevný kontrast je jedním z nejrozšířenějších problémů přístupnosti na webu. WCAG vyžaduje minimální kontrastní poměr 4,5:1 mezi textem a pozadím pro text běžné velikosti a 3:1 pro velký text (definovaný jako 18pt normální nebo 14pt tučný). Na úrovni AAA se požadavek zvyšuje na 7:1 pro normální text a 4,5:1 pro velký text.

Tyto poměry existují proto, že lidé se sníženým zrakem, stárnoucíma očima nebo poruchami barevného vidění potřebují dostatečný kontrast k rozlišení textu od pozadí. Světle šedý text na bílém pozadí může vypadat elegantně v designovém návrhu, ale stává se nečitelným pro značné procento uživatelů.

Požadavky na kontrast se vztahují i na netextové prvky. Komponenty uživatelského rozhraní — tlačítka, formulářová pole, ikony, indikátory fokusu — a smysluplné grafické objekty musí udržovat kontrastní poměr alespoň 3:1 oproti sousedním barvám. To zajišťuje, že uživatelé mohou identifikovat interaktivní prvky a porozumět informačním grafikám.

Používejte nástroje pro kontrolu kontrastu během celého procesu návrhu, nejen na konci. Nástroje jako WebAIM Contrast Checker nebo Colour Contrast Analyser vám umožní ověřit poměry dříve, než se zavážete k barevné paletě.

Barva jako informace

Barva nesmí být nikdy jediným vizuálním prostředkem pro předávání informací. Pokud používáte červenou k označení chyb a zelenou k označení úspěchu, uživatelé s poruchou barvocitu nemusí být schopni rozlišit mezi oběma stavy. Vždy doplňte barvu dalšími indikátory — ikonami, textovými popisky, vzory nebo podtržením.

To platí i pro odkazy. Pokud jsou odkazy v bloku textu odlišeny pouze barvou, musí splňovat kontrastní poměr 3:1 oproti okolnímu textu nebo být doplněny jiným vizuálním indikátorem, jako je podtržení.

Typografie a velikost textu

Veškerý text na vašem webu musí být možné zvětšit až na 200 % bez ztráty obsahu nebo funkčnosti. To znamená navrhovat s flexibilními, relativními jednotkami namísto fixních pixelových velikostí a zajistit, aby se vaše rozvržení plynule přizpůsobovalo při zvětšení textu.

WCAG 2.2 také zahrnuje požadavky na meziodstavcové řádkování textu. Uživatelé musí mít možnost upravit výšku řádku na alespoň 1,5násobek velikosti písma, mezeru mezi odstavci na alespoň 2násobek velikosti písma, mezerování písmen na 0,12násobek velikosti písma a mezerování slov na 0,16násobek velikosti písma — bez ztráty obsahu nebo funkčnosti.

Design odkazů

Odkazy musí být vizuálně odlišné od okolního textu. Měly by být popisné a stručné, sdělující uživatelům, co najdou, když je následují. Nikdy nepoužívejte „klikněte zde" nebo „čtěte více" jako text odkazu bez dalšího kontextu, protože tyto fráze jsou bezvýznamné pro uživatele čteček obrazovky, kteří navigují přes seznamy odkazů.

Navigace a konzistence

Navigace musí být konzistentní na všech stránkách vašeho webu. Uživatelé, kteří se spoléhají na navigaci klávesnicí nebo čtečky obrazovky, si budují mentální model struktury vašeho webu a neočekávané změny tento model narušují. WCAG vyžaduje, aby navigační mechanismy zobrazené na více stránkách byly pokaždé ve stejném relativním pořadí a aby komponenty se stejnou funkcionalitou byly konzistentně identifikovány.

Indikátory fokusu

Když uživatel naviguje vaším webem pomocí klávesnice, musí být viditelný indikátor ukazující, který prvek má aktuálně fokus. Tento indikátor fokusu musí být jasně viditelný — WCAG 2.2 vyžaduje, aby nebyl zakrytý jiným obsahem (SC 2.4.11) a na úrovni AAA, aby celý indikátor fokusu a zaměřený komponent byly plně viditelné (SC 2.4.12).

Navrhujte indikátory fokusu záměrně. Výchozí obrys prohlížeče je často nedostatečný nebo je odstraněn CSS resety. Navrhněte vlastní styl fokusu, který má dostatečný kontrast a je vizuálně výrazný.

Velikosti dotykových cílů

Interaktivní prvky musí být dostatečně velké, aby je bylo možné aktivovat bez obtíží. WCAG 2.2 vyžaduje, aby interaktivní cíle měly alespoň 24×24 CSS pixelů (SC 2.5.8), včetně jakéhokoli bílého prostoru obklopujícího cíl. Na úrovni AAA se požadavek zvyšuje na 44×44 pixelů (SC 2.5.5). To prospívá uživatelům s motorickým postižením, třesem nebo omezenou obratností, stejně jako komukoli, kdo používá mobilní zařízení v nestabilním prostředí.

Design formulářů

Formuláře jsou jednou z nejkritičtějších oblastí pro přístupný design. Každý formulářový prvek potřebuje jasně viditelný popisek, který uživateli sdělí, jakou informaci má poskytnout. Chybové zprávy musí být konkrétní, viditelné a umístěné poblíž pole, ke kterému se vztahují. Poskytnějte instrukce tam, kde je potřeba, a nespoléhejte se výhradně na zástupný text jako popisek — zástupný text zmizí, když uživatel začne psát, a často má nedostatečný kontrast.

Navrhujte pro prevenci chyb. Umožněte uživatelům zkontrolovat a opravit vstupy před odesláním, zejména u akcí s významnými důsledky, jako jsou finanční transakce nebo právní dohody. Když jsou zjištěny chyby, poskytnějte jasné návrhy, jak je opravit.

Pohyb a animace

Někteří uživatelé trpí záchvaty, migrénami nebo závratěmi z animovaného nebo blikajícího obsahu. Nic na vašem webu by nemělo blikat více než třikrát za sekundu. Poskytnějte ovládací prvky k pozastavení, zastavení nebo skrytí jakéhokoli obsahu, který se pohybuje, bliká nebo roluje déle než pět sekund. Respektujte nastavení operačního systému „prefers-reduced-motion" a poskytnějte alternativy s redukovaným pohybem pro animace.

Obrázky textu

Vyhněte se používání obrázků textu na vašem webu. Skutečný text může být zvětšen, přeformátován a přečten asistenčními technologiemi. Obrázky textu nemohou. Jediné výjimky jsou loga a situace, kdy je konkrétní vizuální prezentace textu nezbytná pro předávanou informaci.

Kontrolní seznam přístupnosti pro designéry

Před předáním jakéhokoli návrhu vývojářům ověřte: kontrastní poměry splňují požadavky pro veškerý text a interaktivní prvky; barva není nikdy jediným indikátorem informace; stavy fokusu jsou navrženy pro všechny interaktivní prvky; dotykové cíle splňují minimální požadavky na velikost; navigace je konzistentní na všech stránkách; chybové stavy a zprávy jsou jasně navrženy; text lze zvětšit bez porušení rozvržení; animace respektují uživatelské preference; a veškerý netextový obsah má naplánované textové alternativy.