Prístupnosť pre dizajnérov: Tvorba inkluzívneho vizuálneho a interakčného dizajnu

Prístupná webová stránka začína prístupným dizajnom. Mnohé z najbežnejších zlyhaní prístupnosti — nedostatočný farebný kontrast, nejasná navigácia, mätúce rozloženia, chýbajúce indikátory fokusu — vznikajú v rozhodnutiach urobených počas dizajnovej fázy. V čase, keď sa píše kód, sú tieto problémy zabudované a ich oprava vyžaduje redizajn, nie len úpravu kódu.

Ako dizajnér máte na prístupnosť väčší vplyv než takmer ktokoľvek iný v tíme. Voľby, ktoré robíte ohľadom farieb, typografie, medzier, navigačných vzorov a interakčných modelov, určujú, či milióny používateľov môžu efektívne interagovať s vaším produktom.

Farebný kontrast

Nedostatočný farebný kontrast je jedným z najrozšírenejších problémov prístupnosti na webe. WCAG vyžaduje minimálny kontrastný pomer 4,5:1 medzi textom a jeho pozadím pre text bežnej veľkosti a 3:1 pre veľký text (definovaný ako 18pt normálne alebo 14pt tučné). Na úrovni AAA sa požiadavka zvyšuje na 7:1 pre bežný text a 4,5:1 pre veľký text.

Tieto pomery existujú preto, lebo ľudia so slabým zrakom, starnúcimi očami alebo poruchami farebného videnia potrebujú dostatočný kontrast na rozlíšenie textu od pozadia. Svetlosivý text na bielom pozadí môže vyzerať elegantne v dizajnovom návrhu, ale stáva sa nečitateľným pre významné percento používateľov.

Požiadavky na kontrast majú aj netextové prvky. Komponenty používateľského rozhrania — tlačidlá, formulárové polia, ikony, indikátory fokusu — a zmysluplné grafické objekty musia udržiavať aspoň kontrastný pomer 3:1 voči susedným farbám. To zabezpečuje, že používatelia môžu identifikovať interaktívne prvky a pochopiť informačnú grafiku.

Používajte nástroje na kontrolu kontrastu počas celého procesu návrhu, nielen na konci. Nástroje ako WebAIM Contrast Checker alebo Colour Contrast Analyser vám umožnia overiť pomery pred záväzkom k farebnej palete.

Farba ako informácia

Farba nesmie byť nikdy jediným vizuálnym prostriedkom na sprostredkovanie informácií. Ak používate červenú na označenie chýb a zelenú na označenie úspechu, používatelia s farbosleposťou nemusia byť schopní rozlíšiť medzi oboma stavmi. Vždy doplňte farbu ďalšími indikátormi — ikonami, textovými popiskami, vzormi alebo podčiarknutím.

To sa vzťahuje aj na odkazy. Ak sú odkazy v bloku textu odlíšené iba farbou, musia spĺňať kontrastný pomer 3:1 voči okolitému textu alebo byť doplnené iným vizuálnym indikátorom, ako je podčiarknutie.

Typografia a veľkosť textu

Všetok text na vašom webe musí byť možné zväčšiť až o 200 % bez akejkoľvek straty obsahu alebo funkcionality. To znamená navrhovať s flexibilnými, relatívnymi jednotkami namiesto pevných pixelových veľkostí a zabezpečiť, aby sa vaše rozloženia plynule prispôsobili pri zväčšení textu.

WCAG 2.2 tiež zahŕňa požiadavky na medzery textu. Používatelia musia byť schopní nastaviť výšku riadku na aspoň 1,5-násobok veľkosti písma, medzery medzi odsekmi na aspoň 2-násobok veľkosti písma, medzery medzi písmenami na 0,12-násobok veľkosti písma a medzery medzi slovami na 0,16-násobok veľkosti písma — bez akejkoľvek straty obsahu alebo funkcionality.

Dizajn odkazov

Odkazy musia byť vizuálne odlíšené od okolitého textu. Mali by byť popisné a stručné, hovoriac používateľom, čo nájdu, keď odkaz nasledujú. Nikdy nepoužívajte „kliknite sem" alebo „čítajte viac" ako text odkazu bez ďalšieho kontextu, pretože tieto frázy sú bezvýznamné pre používateľov čítačiek obrazovky, ktorí navigujú podľa zoznamov odkazov.

Navigácia a konzistentnosť

Navigácia musí byť konzistentná na všetkých stránkach vášho webu. Používatelia, ktorí sa spoliehajú na navigáciu klávesnicou alebo čítačky obrazovky, budujú si mentálny model štruktúry vášho webu a neočakávané zmeny tento model narúšajú. WCAG vyžaduje, aby navigačné mechanizmy zobrazujúce sa na viacerých stránkach mali zakaždým rovnaké relatívne poradie a aby komponenty s rovnakou funkcionalitou boli konzistentne identifikované.

Indikátory fokusu

Keď používateľ naviguje vaším webom pomocou klávesnice, musí existovať viditeľný indikátor ukazujúci, ktorý prvok má momentálne fokus. Tento indikátor fokusu musí byť jasne viditeľný — WCAG 2.2 vyžaduje, aby nebol zakrytý iným obsahom (SC 2.4.11) a na úrovni AAA, aby celý indikátor fokusu a sústredený komponent boli plne viditeľné (SC 2.4.12).

Navrhujte indikátory fokusu zámerne. Predvolený obrys prehliadača je často nedostatočný alebo je odstránený CSS resetmi. Navrhnite vlastný štýl fokusu, ktorý má dostatočný kontrast a je vizuálne výrazný.

Veľkosti dotykových cieľov

Interaktívne prvky musia byť dostatočne veľké na to, aby sa dali aktivovať bez ťažkostí. WCAG 2.2 vyžaduje, aby interaktívne ciele mali aspoň 24×24 CSS pixelov (SC 2.5.8), vrátane akéhokoľvek bieleho priestoru okolo cieľa. Na úrovni AAA sa požiadavka zvyšuje na 44×44 pixelov (SC 2.5.5). To prospieva používateľom s motorickými postihnutiami, trasením alebo obmedzenou obratnosťou, ako aj komukoľvek, kto používa mobilné zariadenie v hýbajúcom sa prostredí.

Dizajn formulárov

Formuláre sú jednou z najkritickejších oblastí pre prístupný dizajn. Každý formulárový prvok potrebuje jasne viditeľný popis, ktorý hovorí používateľovi, aké informácie poskytnúť. Chybové hlásenia musia byť konkrétne, viditeľné a umiestnené blízko poľa, na ktoré sa vzťahujú. Poskytnite pokyny tam, kde sú potrebné, a nespoliehajte sa iba na zástupný text ako na popis — zástupný text zmizne, keď používateľ začne písať a často má nedostatočný kontrast.

Navrhujte s ohľadom na prevenciu chýb. Umožnite používateľom skontrolovať a opraviť vstupy pred odoslaním, najmä pre akcie s významnými dôsledkami ako finančné transakcie alebo právne dohody. Keď sú chyby zistené, poskytnite jasné návrhy na ich opravu.

Pohyb a animácie

Niektorí používatelia zažívajú záchvaty, migrénu alebo závrat z animovaného alebo blikajúceho obsahu. Nič na vašom webe by nemalo blikať viac ako trikrát za sekundu. Poskytnite ovládacie prvky na pozastavenie, zastavenie alebo skrytie akéhokoľvek obsahu, ktorý sa pohybuje, bliká alebo sa roluje dlhšie ako päť sekúnd. Rešpektujte nastavenie operačného systému „prefers-reduced-motion" a poskytnite alternatívy so zníženým pohybom pre animácie.

Obrázky textu

Vyhnite sa používaniu obrázkov textu na vašom webe. Skutočný text sa dá zväčšiť, preformátovať a prečítať asistenčnými technológiami. Obrázky textu nie. Jedinými výnimkami sú logá a situácie, kde konkrétna vizuálna prezentácia textu je nevyhnutná pre sprostredkovanú informáciu.

Kontrolný zoznam dizajnéra pre prístupnosť

Pred odovzdaním akéhokoľvek dizajnu do vývoja overte: kontrastné pomery spĺňajú požiadavky pre všetok text a interaktívne prvky; farba nie je jediným indikátorom informácie; stavy fokusu sú navrhnuté pre všetky interaktívne prvky; dotykové ciele spĺňajú minimálne požiadavky na veľkosť; navigácia je konzistentná na všetkých stránkach; chybové stavy a hlásenia sú jasne navrhnuté; text sa dá zväčšiť bez narušenia rozloženia; animácie rešpektujú preferencie používateľov; a pre všetok netextový obsah sú naplánované textové alternatívy.