Přístupné weby: jak zpřístupnit online nabídku více lidem

Zjistěte, jak přehledný obsah, přístupný design a snadné ovládání umožňují, aby váš web mohl nezávisle používat více lidí.

Přístupnost začíná samostatným používáním

Web je přístupný, když jej lidé mohou spolehlivě ovládat navzdory rozdílným schopnostem a situacím. Patří sem nevidomí a slabozrací, neslyšící, lidé s pohybovým či kognitivním omezením i mnoho starších uživatelů. Používání může dočasně ztížit také zlomená ruka, hlučné okolí nebo pomalé připojení. Přístupnost proto není určena malé zvláštní skupině, ale zlepšuje přístup velmi různým lidem.

Skutečná přístupnost se ukáže na konkrétních úkolech. Dokáže člověk najít termín, odeslat formulář nebo zkopírovat telefonní číslo, aniž by selhal v navigaci? Rozumí povinným údajům a tomu, co se stane po odeslání? Dobře míněná poznámka o přístupnosti pomůže málo, pokud důležité informace stojí jen v obrázku nebo dialog nelze zavřít bez myši.

Pro provozovatele je užitečná jednoduchá změna perspektivy: středem pozornosti není jednotlivá funkce, ale celá cesta k cíli. Dobře čitelná úvodní stránka nestačí, pokud je objednávka nesrozumitelná. Nejprve proto sledujte nejčastější a nejdůležitější cesty návštěvníků. Právě tam jsou bariéry nejviditelnější a zlepšení bezprostředně přinášejí více samostatnosti, bezpečí a důvěry.

Jasná struktura stránky poskytuje spolehlivou orientaci

Lidé vnímají webové stránky různě. Někteří prolétají nadpisy, jiní obsah výrazně zvětšují a nevidomí si prvky nechávají číst čtečkou obrazovky. Jasná struktura pomáhá ve všech těchto situacích. Každá stránka má mít zřetelné hlavní téma a nadpisy mají obsah smysluplně členit. Už při čtení samotných nadpisů musí být zřejmé, o čem stránka je a kde hledat požadovanou informaci.

Také opakující se oblasti potřebují stálé místo. Logo, hlavní navigace, hledání a kontakt nemají mezi stránkami měnit polohu ani název. Stálé uspořádání pomáhá lidem, kteří se orientují obtížně nebo si potřebují pamatovat postupy. Zvlášť užitečné jsou výstižné názvy stránek a viditelné označení aktuální oblasti. Člověk tak vždy pozná, kde se nachází a jak se vrátit k nadřazenému tématu.

Vyhněte se stránkám, kde o pozornost soupeří mnoho stejně výrazných ploch. Když vstup současně určují tři bannery, několik dlaždic a automaticky se měnící obrázek, hlavní věc zůstává nejasná. Seřaďte obsah podle významu a nejdůležitějšímu úkonu dejte zřetelné místo. Klidná hierarchie usnadňuje orientaci, urychluje rozhodování a omezuje nechtěná kliknutí.

Čitelný design funguje bez hádání

Dobrá čitelnost vzniká dostatečně velkým písmem, jasnými tvary znaků a vhodnými rozestupy mezi řádky a odstavci. Velmi tenké písmo nebo nahuštěný text namáhají i dobrý zrak a na malých obrazovkách se problém zhoršuje. Uživatelé musí umět text zvětšit bez oříznutí obsahu či vodorovného posouvání. Kontrolujte proto nejen běžný pohled, ale i výrazné zvětšení.

Barva může informaci podporovat, ale nesmí ji nést sama. Červený rámeček chybného pole nemusí být pro člověka s poruchou barvocitu rozpoznatelný. Přidejte srozumitelnou zprávu a pole jednoznačně označte. Totéž platí pro grafy, stavové ukazatele a vybrané položky menu. Vzory, symboly nebo text zachovají význam i bez přesného vnímání barev.

Dostatečný kontrast zviditelní text, tlačítka a vstupní pole v různých světelných podmínkách. Světle šedá na bílém pozadí může působit elegantně, ale rychle se stává nečitelnou. Kritické jsou zejména drobné pokyny, zástupné texty a popisky na obrázcích. Kontrast ověřujte už při návrhu, ne až před zveřejněním. Barvy pak lze měnit bez obtížné opravy hotového vzhledu.

Všechny důležité funkce musí být dostupné klávesnicí

Ne každý může bezpečně ovládat myš nebo dotykovou obrazovku. Někteří používají jen klávesnici, hlasové ovládání či jiné vstupní zařízení. Odkazy, tlačítka, nabídky a formulářová pole proto musí být dostupné v logickém pořadí. Klávesa Tab má vést fokus podle viditelného uspořádání. Skoky do skrytých oblastí nebo uváznutí v jedné součásti zbytečně ztěžují i jednoduché úkoly.

Aktuální fokus musí zůstat jasně viditelný. Jemný stín téměř nerozeznatelný od pozadí nestačí. Člověk ovládající web klávesnicí musí vždy vědět, který prvek aktivuje dalším stiskem. Výchozí označení fokusu odstraňte jen tehdy, když vytvoříte alespoň stejně výraznou náhradu. Platí to také pro nabídky, dialogy cookies, návrhy hledání a překryvná okna.

Vyzkoušejte hlavní cesty celé bez myši. Otevřete navigaci, zvolte službu, vyplňte formulář a zavřete všechny dialogy. Sledujte místa, kde fokus mizí nebo lze úkon provést jen tažením, přejetím či ukázáním. Tento jednoduchý pokus odhalí mnoho překážek, které při obvyklém používání myši zůstávají skryté.

Srozumitelný obsah vede rychleji ke správnému úkonu

Přístupný obsah brzy říká, co lidé potřebují vědět nebo udělat. Začněte nejdůležitějším sdělením a potom vysvětlete potřebné podrobnosti. Dlouhé úvody, interní odborné pojmy a nejasné odkazy orientaci ztěžují. Místo Další informace najdete zde má odkaz pojmenovat cíl, například Podklady k žádosti o příspěvek na bydlení. Význam tak zůstane jasný i při čtení odkazu mimo odstavec.

Krátké věty pomáhají, ale srozumitelnost neznamená vše silně zjednodušit. Neznámé pojmy vysvětlete tam, kde jsou potřeba, a stejný název používejte důsledně. Střídání výrazů zákaznický účet, profil a uživatelská sekce vytváří zbytečnou nejistotu. Konkrétní příklady pomáhají hlavně u lhůt, podmínek či nejednoznačných rozhodnutí, pokud nenahrazují samotný obsah.

Nadpisy, popisky a tlačítka mají spolehlivě naplnit očekávání. Tlačítko Pokračovat říká málo, zatímco Zkontrolovat údaje vysvětluje další krok. Varování má pojmenovat problém i možné řešení. Přátelské a přímé formulace podporují lidi s menší čtenářskou zkušeností i ty, kdo jednají pod časovým tlakem. Jasný text je proto podstatnou součástí ovládání, ne pozdější jazykovou ozdobou.

Formuláře potřebují jednoznačné otázky a užitečnou zpětnou vazbu

Formuláře patří k nejčastějším místům, kde lidé web opouštějí. Každé pole potřebuje trvale viditelný popisek vysvětlující jeho účel. Příklad v poli může pomoci, ale popisek nenahradí, protože při psaní zmizí. Žádejte jen údaje skutečně potřebné pro daný postup. Kratší formuláře se lépe chápou, rychleji vyplňují a způsobují méně chyb.

Povinná pole a očekávané formáty musí být zřejmé před zadáním. Vyžaduje-li datum určitou podobu, ukažte srozumitelný příklad. Kde je to možné, povolte běžné varianty místo odmítání lidí kvůli mezerám či pomlčkám. U delších postupů pomáhá jasný ukazatel průběhu, pokud říká, která část se právě zpracovává a kolik kroků zbývá.

Chybová zpráva musí stát poblíž dotčeného pole a konkrétně vysvětlit potřebnou změnu. Neplatný vstup nechá člověka bez pomoci, zatímco Zadejte poštovní směrovací číslo o pěti číslicích nabízí řešení. Po odeslání je nutné jednoznačné potvrzení, zda byl přenos úspěšný a kdy lze očekávat odpověď.

Obrázky, zvuk a video potřebují rovnocenné přístupy

Obrázky často předávají informace, které v okolním textu chybějí. Alternativní text má stručně popsat to, co je důležité pro účel stránky. U fotografie v profilu týmu může stačit jméno a funkce. U grafu musí být bez obrázku dostupné sdělení i důležité hodnoty. Čistě dekorativní obrázky mají pomocné technologie přeskočit, aby obsah neprodlužovaly nesmyslnými názvy souborů či opakováním.

Videa potřebují titulky pro mluvený obsah a důležité zvuky. Pokud viditelné dění nevyplývá ze zvuku, může být nutný zvukový popis. Přepis nabízí další přístup a usnadňuje dohledání jednotlivých výroků. Titulky pečlivě kontrolujte, protože automatické verze často zaměňují jména, odborné pojmy nebo čísla a mění tím význam.

Média se nesmí neočekávaně spouštět se zvukem. Pohyblivý obsah musí jít zastavit, pokud déle rozptyluje nebo ztěžuje čtení. Pozor také na rychlé blikání a hektické přechody. Ovládání pomůže jen tehdy, když jsou jeho tlačítka srozumitelně označena a dostupná klávesnicí. Obsah tak zůstane použitelný pro lidi s omezením sluchu, zraku či soustředění, aniž by rušil ostatní.

Na malých obrazovkách se kvalita ukazuje obzvlášť zřetelně

Mnoho lidí navštěvuje weby převážně telefonem. Setkává se tam málo místa, proměnlivé světlo a ovládání prstem. Dotykové plochy proto musí být dost velké a mít dostatečné rozestupy. Malé zavírací tlačítko na okraji dialogu může být pro člověka s omezenou pohyblivostí téměř nedostupné. Dobře umístěné a jasně popsané prvky brání nechtěným úkonům.

Obsah se má přizpůsobit úzkému zobrazení bez ztráty důležitých funkcí. Kontrolujte zejména tabulky, mapy, nastavení cookies a víceúrovňovou navigaci. Informace zobrazovaná jen při najetí myší na dotykovém zařízení úplně chybí. Nabídněte stejnou funkci klepnutím nebo viditelným odkazem a zajistěte snadné zavření zobrazeného obsahu.

Orientace zařízení se také nemá bez dobrého důvodu vynucovat. Někteří lidé mají tablet či telefon upevněný v držáku a nemohou jej otočit. Stránka fungující jen na výšku se tak může stát nepoužitelnou. Flexibilní návrh s těmito situacemi počítá od začátku a spojuje mobilní použitelnost s přístupností místo odděleného řešení obou témat.

Testy skutečného používání odhalí více než automatické kontroly

Automatické nástroje rychle najdou chybějící popisky, slabý kontrast a některé strukturální chyby. Jsou užitečným začátkem, ale nepoznají, zda je navigace srozumitelná nebo chybová zpráva skutečně pomáhá. I technicky přítomný alternativní text může být bezcenný. Výsledky nástrojů proto chápejte jako podněty a nechte je posoudit lidmi, kteří znají kontext stránky.

Technickou kontrolu doplňte jednoduchými ručními pokusy. Stránku zvětšete, ovládejte ji jen klávesnicí a poslechněte si hlavní oblasti čtečkou obrazovky. Ještě výpovědnější jsou testy s lidmi, kteří v běžném životě používají různé pomůcky a strategie. Zadejte jim skutečný úkol, například najít událost nebo odeslat dotaz, a sledujte, kde se orientace či činnost zastaví.

Zpětnou vazbu hodnoťte podle dopadu. Nepřístupná rezervace nebo chybějící zdravotní informace jsou naléhavější než drobná chyba rozestupu. Zaznamenejte problém, stránku a dotčené uživatele. Po opravě stejnou cestu znovu ověřte. Z dlouhého seznamu obecných připomínek tak vznikne dohledatelné zlepšení skutečného používání.

Přístupnost je trvalá, když je jasná odpovědnost

Přístupný web nevznikne jednorázovou revizí. Nový obsah, funkce a kampaně mohou kdykoli zavést další překážky. Každá zapojená role proto potřebuje odpovídající odpovědnost. Redakce sleduje srozumitelné texty a popisy obrázků, design kontrast a stavy, vývoj ovládání a technickou strukturu. Kdo obsah schvaluje, má znát základní vlastnosti kontrolované před zveřejněním.

Pomáhají přístupné šablony a opakovaně použitelné součásti. Jsou-li formuláře, dialogy a navigace od začátku správně navrženy a ověřeny, týmy nemusejí na každé stránce znovu řešit stejné problémy. Redakční rozhraní má srozumitelně vyžadovat nutné údaje, například alternativní texty. Zároveň potřebuje prostor pro výjimky, protože složitý graf vyžaduje jiný popis než dekorativní fotografie. Dobré základy usnadňují správnou každodenní realizaci.

Největší praktický přínos se projeví, když návštěvníci dokončí důležité úkoly bez zbytečných překážek. Začněte nejpoužívanějšími cestami, odstraňte závažné bariéry a účinek ověřte se skutečnými uživateli. Postupně se zlepší nejen přístupnost jednotlivých stránek, ale kvalita celé nabídky. Inkluzivní online přítomnost vzniká tam, kde jsou srozumitelnost, design a technika společně zaměřeny na samostatné používání.

Začněte zdarma používat Simple8.

Vytvořte si svůj bezplatný účet a používejte až 15 000 znaků zdarma každý měsíc.