Princípy POUR: Základ webovej prístupnosti

Každá požiadavka v WCAG je postavená na štyroch základných princípoch. Ak tieto princípy pochopíte do hĺbky, často dokážete intuitívne identifikovať problémy prístupnosti, aj bez zapamätania si jednotlivých kritérií úspešnosti. Tieto štyri princípy — Vnímateľný, Ovládateľný, Zrozumiteľný a Robustný — definujú základné podmienky, ktoré musia byť splnené, aby bol obsah prístupný.

Vnímateľný: Používatelia musia byť schopní vnímať obsah

Princíp vnímateľnosti rieši najzákladnejšiu požiadavku prístupnosti: informácie musia byť dostupné aspoň jednému zo zmyslov používateľa. Ak používateľ nemôže obsah vôbec vnímať, žiadne množstvo dobrého interakčného dizajnu alebo čistého kódu ho neurobí použiteľným.

Tento princíp poháňa požiadavky na textové alternatívy k netextovému obsahu, titulky a prepisy pre audio a video, dostatočný farebný kontrast, schopnosť zmeniť veľkosť textu a oddelenie informácie od jej vizuálnej prezentácie.

Ako to vyzerá v praxi:

Propagačný banner obrázok oznamujúci sezónny výpredaj potrebuje alt text popisujúci propagáciu, pretože nevidiaci používateľ obrázok neuvidí. Školiace video potrebuje titulky, pretože nepočujúci používateľ nebude počuť rozprávanie. Text na vašom webe potrebuje dostatočný kontrast voči pozadiu, pretože používateľ so slabým zrakom nemusí byť schopný čítať nízko kontrastný text. Formulár, ktorý používa červený okraj na označenie chýb, tiež potrebuje textovú správu, pretože farboslepý používateľ nemusí vnímať červenú farbu.

Bežné zlyhania:

Obrázky bez alt textu. Videá bez titulkov. Nedostatočný farebný kontrast. Informácie sprostredkované iba farbou. Obsah, ktorý sa stáva neprístupným pri zväčšení na 200 %. Zástupný text použitý ako jediný popis formulárových polí.

Ovládateľný: Používatelia musia byť schopní ovládať rozhranie

Princíp ovládateľnosti zabezpečuje, že používatelia môžu interagovať so všetkými komponentmi rozhrania a navigovať cez všetok obsah, bez ohľadu na to, ako interagujú so svojím zariadením. Krásny, vnímateľný web je zbytočný, ak sa používateľ nemôže preklikať, ťuknúť alebo preklávesnicovať k obsahu, ktorý potrebuje.

Tento princíp poháňa požiadavky na prístupnosť klávesnice, dostatočný čas na interakciu s obsahom, vyhýbanie sa obsahu, ktorý by mohol spôsobiť záchvaty, efektívne navigačné mechanizmy a flexibilné vstupné metódy.

Ako to vyzerá v praxi:

Rozbaľovacie menu, ktoré sa otvára pri prejdení kurzorom, sa musí otvoriť aj pri fokuse klávesnice a byť navigovateľné šípkami. Časový limit relácie na bankovom webe musí používateľa varovať a umožniť mu predĺžiť reláciu. Prezentácia, ktorá sa automaticky posúva, musí mať ovládacie prvky na pozastavenie. Panel filtra vyhľadávania musí byť prístupný klávesnicou, aby používatelia, ktorí nemôžu používať myš, mohli stále filtrovať výsledky. Interaktívne prvky musia byť dostatočne veľké na to, aby sa na ne dalo ťuknúť bez náhodného zasiahnutia susedných ovládacích prvkov.

Bežné zlyhania:

Interaktívne prvky, ktoré reagujú len na kliknutie myšou. Rozbaľovacie menu neprístupné klávesnicou. Klávesnicové pasce v modálnych oknách alebo widgetoch. Chýbajúce odkazy na preskočenie. Časové limity bez možnosti predĺženia. Obsah, ktorý rýchlo bliká.

Zrozumiteľný: Používatelia musia byť schopní pochopiť obsah a rozhranie

Princíp zrozumiteľnosti zabezpečuje, že prezentované informácie aj spôsob fungovania rozhrania sú pre používateľov pochopiteľné. Obsah, ktorý je vnímateľný a ovládateľný, ale nezrozumiteľný, stále zlyháva v teste prístupnosti.

Tento princíp poháňa požiadavky na čitateľný obsah, predvídateľné správanie rozhrania a vstupnú asistenciu, ktorá pomáha používateľom vyvarovať sa chybám a opraviť ich.

Ako to vyzerá v praxi:

Stránka napísaná v slovenčine má atribút lang="sk", aby čítačky obrazovky použili správnu výslovnosť. Navigačné menu sa zobrazujú na rovnakom mieste a v rovnakom poradí na každej stránke. Keď používateľ urobí chybu vo formulári, chyba je jasne identifikovaná a je poskytnutý návrh na opravu. Používatelia sú varovaní pred akciami s významnými dôsledkami, ako je odoslanie platby alebo vymazanie údajov.

Bežné zlyhania:

Chýbajúce deklarácie jazyka. Nekonzistentná navigácia medzi stránkami. Validácia formulárov, ktorá identifikuje chyby bez ich vysvetlenia. Automatické zmeny kontextu spúšťané výberom možnosti alebo vstupom do poľa. Obsah plný žargónu bez vysvetlení.

Robustný: Obsah musí fungovať naprieč technológiami

Princíp robustnosti zabezpečuje, že obsah je postavený na pevných technických základoch, ktoré spoľahlivo fungujú naprieč rôznymi prehliadačmi, zariadeniami a asistenčnými technológiami — súčasnými aj budúcimi.

Tento princíp poháňa požiadavky na čisté, štandardne kompatibilné značkovanie, správne použitie ARIA, keď natívne HTML nie je dostatočné, a programovú komunikáciu stavov a hodnôt komponentov asistenčným technológiám.

Ako to vyzerá v praxi:

Vlastný rozbaľovací widget používa správne ARIA roly, stavy a vlastnosti, aby čítačka obrazovky oznámila, že ide o combobox, komunikovala, či je rozbalený alebo zbalený, a identifikovala aktuálne vybranú možnosť. Indikátor živého chatu používa ARIA živú oblasť, aby čítačky obrazovky oznamovali nové správy bez toho, aby používateľ musel navigovať do chatového okna. Stavové správy ako „Položka pridaná do košíka" sú oznamované čítačkám obrazovky prostredníctvom príslušných rolí.

Bežné zlyhania:

Vlastné widgety bez ARIA rolí a stavov. Stavové správy, ktoré sú iba vizuálne zobrazené, ale nie oznamované čítačkám obrazovky. Zneužitie ARIA, ktoré je v konflikte s natívnou sémantikou HTML. Obsah, ktorý funguje v jednom prehliadači, ale zlyháva v inom kvôli neštandardnému kódu.

Aplikovanie POUR ako dizajnového princípu

Princípy POUR nie sú len kategórie na organizovanie kritérií úspešnosti — sú to myšlienkový rámec. Pri hodnotení akéhokoľvek kúsku obsahu alebo funkcionality sa pýtajte štyri otázky: Môžu ho všetci používatelia vnímať? Môžu ho všetci používatelia ovládať? Môžu ho všetci používatelia pochopiť? Bude fungovať naprieč všetkými relevantnými technológiami? Ak je odpoveď na akúkoľvek z týchto otázok nie, identifikovali ste bariéru prístupnosti.