🎁 Startovací workshop ZDARMAMáte SW problém?
Zpět na blog
UI/UX DesignPřístupnostMobilní aplikaceUXDesign

Přístupnost v mobilních aplikacích: Proč na ní záleží

Lukáš Huso24. března 20268 min čtení
Přístupnost v mobilních aplikacích: Proč na ní záleží
Photo: Sigmund / Unsplash

Když se řekne přístupnost mobilních aplikací, mnoho vývojářů a zadavatelů si představí okrajový požadavek, který se řeší až na konci projektu -- pokud vůbec. Realita je však úplně jiná. Přístupnost není luxus ani doplněk. Je to základní vlastnost kvalitního software, která ovlivňuje životy milionů lidí a stále častěji také právní soulad vaší aplikace.

V tomto článku se podíváme na to, proč přístupnost v mobilních aplikacích patří mezi priority od prvního dne vývoje, jaké standardy a nástroje používat a jak se vyhnout nejčastějším chybám.

Koho se přístupnost týká

Světová zdravotnická organizace odhaduje, že přibližně 15 % světové populace žije s nějakou formou zdravotního postižení. To není malá skupina -- v České republice to znamená více než milion a půl lidí. Ale přístupnost není jen o lidech s trvalým postižením. Zahrnuje také:

  • Dočasná omezení -- zlomená ruka, oční operace, infekce ucha
  • Situační omezení -- silné slunce na displeji, hlučné prostředí, řízení jednou rukou s dítětem v náručí
  • Věkové změny -- zhoršující se zrak, snížená motorika, pomalejší reakce

Když navrhujete přístupnou aplikaci, nenavrhujete ji jen pro někoho. Navrhujete ji lépe pro všechny.

15 %
světové populace žije s postižením
1,85 mld.
tržní segment lidí s postižením (USD)
2025
rok účinnosti Evropského aktu o přístupnosti

Legislativní rámec: Už to není volitelné

Evropský akt o přístupnosti (EAA)

V červnu 2025 vstoupil v platnost Evropský akt o přístupnosti (European Accessibility Act, směrnice 2019/882). Tato směrnice vyžaduje, aby digitální produkty a služby -- včetně mobilních aplikací -- splňovaly základní požadavky na přístupnost. Týká se to:

  • E-commerce aplikací a služeb
  • Bankovních a finančních aplikací
  • Komunikačních služeb
  • E-knih a mediálních služeb
  • Dopravních aplikací

Pokud vaše aplikace spadá do některé z těchto kategorií a působí na evropském trhu, přístupnost je právní povinnost, nikoliv dobrovolné vylepšení.

WCAG jako základ

Web Content Accessibility Guidelines (WCAG) 2.1 na úrovni AA je de facto standard, na který se odkazuje většina legislativy včetně EAA. I když WCAG původně vznikl pro webové stránky, jeho principy jsou plně aplikovatelné na mobilní aplikace. Čtyři základní principy WCAG jsou:

  1. Vnímatelnost (Perceivable) -- obsah musí být prezentován způsoby, které uživatelé mohou vnímat
  2. Ovladatelnost (Operable) -- rozhraní musí být ovladatelné různými způsoby
  3. Srozumitelnost (Understandable) -- obsah a ovládání musí být srozumitelné
  4. Robustnost (Robust) -- obsah musí být dostatečně robustní pro různé asistivní technologie

Screen readery: VoiceOver a TalkBack

Screen readery jsou nejdůležitější asistivní technologií pro mobilní zařízení. Na iOS je to VoiceOver, na Androidu TalkBack. Oba fungují tak, že čtou obsah obrazovky nahlas a umožňují navigaci gesty.

Co musejí vývojáři zajistit

Smysluplné popisky (accessibility labels). Každý interaktivní prvek musí mít textový popisek, který vysvětluje jeho účel. Tlačítko s ikonou košíku nestačí -- screen reader musí říci "Přidat do košíku" nebo "Nákupní košík, 3 položky".

// Špatně -- screen reader řekne jen "tlačítko"
<TouchableOpacity onPress={addToCart}>
  <CartIcon />
</TouchableOpacity>

// Správně -- screen reader řekne "Přidat do košíku"
<TouchableOpacity
  onPress={addToCart}
  accessibilityLabel="Přidat do košíku"
  accessibilityRole="button"
>
  <CartIcon />
</TouchableOpacity>

Správná hierarchie a seskupování. Souvisejí prvky by měly být seskupeny tak, aby screen reader četl logické celky, ne jednotlivé fragmenty. Karta produktu by se měla číst jako "iPhone 15, 24 990 Kč, skladem" -- ne jako tři oddělené texty.

Oznamování změn. Když se na obrazovce něco změní (načte se obsah, objeví se chyba, odešle se formulář), screen reader o tom musí být informován pomocí live regions nebo announcements.

Dotykové cíle a motorika

Jeden z nejčastějších problémů přístupnosti je příliš malý dotykový cíl. Apple doporučuje minimálně 44x44 bodů, Google Material Design 48x48 dp. To není náhodné číslo -- odpovídá průměrné ploše prstu na dotykovém displeji.

Praktická pravidla

  • Minimální velikost dotykového cíle: 44x44 pt (iOS) / 48x48 dp (Android)
  • Mezera mezi cíli: minimálně 8 bodů, aby se předcházelo nechtěným tapnutím
  • Důležité akce větší: hlavní CTA tlačítka by měla být výrazně větší než minimum
  • Destruktivní akce chráněné: smazání, odhlášení a podobné akce by měly vyžadovat potvrzení

Častou chybou je, že vývojář nastaví vizuální velikost tlačítka správně, ale dotyková oblast (hit area) je menší než vizuální prvek. Vždy ověřujte skutečnou dotykovou oblast, ne jen to, co vidíte na obrazovce.

Barevný kontrast a barvoslepost

Přibližně 8 % mužů a 0,5 % žen má nějakou formu poruchy barvocitu. To znamená, že barva sama o sobě nesmí být jediný způsob, jak sdělit informaci.

Pravidla pro kontrast

WCAG 2.1 AA vyžaduje:

  • Běžný text: kontrast minimálně 4.5:1 vůči pozadí
  • Velký text (18pt+ nebo 14pt+ tučně): kontrast minimálně 3:1
  • Interaktivní prvky a grafika: kontrast minimálně 3:1

Barva není jediná informace

Typický příklad: formulářové pole označené červenou barvou při chybě. Pro člověka s deuteranopií (červeno-zelenou barvoslepostí) může být tato červená prakticky neviditelná. Řešení:

  • Přidejte ikonu chyby (například vykřičník)
  • Přidejte textový popis chyby
  • Použijte podtržení nebo změnu tvaru, ne jen barvy
  • Testujte s filtry simulujícími různé typy barvosleposti

Dynamická velikost textu

Oba mobilní operační systémy umožňují uživatelům změnit velikost systémového písma. Vaše aplikace musí toto nastavení respektovat. V praxi to znamená:

  • Nepoužívejte pevné velikosti v pixelech pro text. Používejte relativní jednotky (sp na Androidu, Dynamic Type na iOS)
  • Testujte s největší velikostí písma. Rozložení se nesmí rozbít, text se nesmí oříznout, důležité funkce musí zůstat dostupné
  • Umožněte zalamování. Text, který se při zvětšení nevejde na řádek, se musí umně zalomit, ne zmizet
  • Nezavírejte zoom. Na webových aplikacích nikdy nenastavujte maximum-scale=1 ve viewport meta tagu

Na iOS podporuje Dynamic Type změnu velikosti až na 310 % výchozí hodnoty. Pokud vaše aplikace na této velikosti nefunguje, velká část uživatelů se slabým zrakem ji nemůže používat.

Nejčastější chyby přístupnosti v mobilních aplikacích

Po letech praxe jsme identifikovali chyby, které se opakují v naprosté většině projektů:

1. Chybějící popisky u ikon a obrázků. Každá ikona, která nese význam, musí mít accessibility label. Dekorativní obrázky by naopak měly být označeny jako dekorativní, aby je screen reader přeskočil.

2. Nefunkční navigace klávesnicí a přepínači. Uživatelé s motorickým omezením často používají externí klávesnici nebo speciální přepínače. Pokud je fokus (zvýraznění aktivního prvku) neviditelný nebo nelogický, aplikace se stává nepoužitelnou.

3. Časové limity bez možnosti prodloužení. Automatické odhlášení, časované kvízy nebo mizející notifikace -- to všechno je problém, pokud uživatel nemá možnost čas prodloužit nebo funkci časovače vypnout.

4. Videa bez titulků. Každý video obsah musí mít titulky (captions) a ideálně také audiodeskripci pro významné vizuální informace.

5. Nekonzistentní navigace. Když se stejný prvek chová na různých obrazovkách různě, je to matoucí pro všechny uživatele, ale zvláště pro ty, kteří se spoléhají na předvídatelnost rozhraní.

Nástroje pro testování přístupnosti

Testování přístupnosti by mělo být součástí běžného QA procesu, ne jednorázovou akcí před vydáním.

Automatizované nástroje

  • Accessibility Inspector (Xcode) -- vestavěný nástroj pro iOS, kontroluje labels, traits, kontrast
  • Accessibility Scanner (Android) -- Google nástroj, který analyzuje obrazovky a hlásí problémy
  • axe DevTools -- pro webové a hybridní aplikace
  • Colour Contrast Analyser -- samostatný nástroj pro měření kontrastu

Manuální testování

Žádný automatizovaný nástroj neodhalí všechny problémy. Nezbytné manuální testy zahrnují:

  • Projděte celou aplikaci se screen readerem (VoiceOver zapnete triple-clickem Home/bočního tlačítka, TalkBack v Nastavení > Přístupnost)
  • Zvětšete systémové písmo na maximum a ověřujte, že všechny obrazovky zůstávají funkční
  • Použijte aplikaci jednou rukou a ověřujte dosažitelnost dotykových cílů
  • Testujte s invertovanými barvami a režimem vysokého kontrastu
  • Zapojte reálné uživatele s postižením -- žádný nástroj nenahradí reálnou zkušenost

Byznys případ pro přístupnost

Přístupnost není jen o dodržování zákonů. Má hmatatelný dopad na byznysové výsledky:

  • Větší trh. 15 % populace s nějakou formou postižení představuje obrovský tržní segment, který vaše konkurence možná ignoruje
  • Lepší SEO a nalezitelnost. Mnoho principů přístupnosti (strukturovaný obsah, alt texty, sémantické značkování) přímo zlepšuje SEO
  • Vyšší konverze. Přístupné rozhraní je intuitivní pro všechny uživatele. Větší tlačítka, jasné popisky a logická navigace zvyšují konverze napříč celou uživatelskou základnou
  • Nižší právní riziko. Počet žalob kvůli nepřístupným aplikacím v EU i USA každý rok roste
  • Lepší kvalita kódu. Aplikace navržená s ohledem na přístupnost má tendenci mít čistší architekturu, lepší oddělení obsahu od prezentace a robustnější testy

Začněte se sémantickými prvky a ARIA labely. Každý interaktivní element potřebuje accessibilityLabel a accessibilityRole. Každý obrázek nesoucí význam potřebuje popisek. Toto jedno pravidlo pokryje většinu problémů, které screen readery mají s mobilními aplikacemi.

Jak začít: Přístupnost od prvního dne

Nejhorší přístup je nechat přístupnost na konec. Retrofitování přístupnosti do hotové aplikace je násobně dražší a méně efektivní než její začlenění do návrhu od začátku.

1. Zahrňte přístupnost do design systému. Barevná paleta s dostatečným kontrastem, definované velikosti dotykových cílů, typografická škála kompatibilní s Dynamic Type.

2. Pište accessibility testy. Stejně jako píšete jednotkové testy pro byznys logiku, pište testy ověřující přístupnostní atributy.

3. Zařaďte screen reader testing do QA. Každá nová obrazovka by měla projít základním testem se screen readerem před merge.

4. Vzdělávejte tým. Přístupnost není zodpovědnost jednoho člověka -- musí ji chápat designéři, vývojáři i testeři.

Závěr

Přístupnost v mobilních aplikacích není charitativní projekt ani regulatorní zátěž. Je to základní charakteristika kvalitního software, která rozšiřuje váš trh, zlepšuje uživatelský zážitek pro všechny a chrání vás před právními riziky. S příchodem Evropského aktu o přístupnosti a rostoucím povědomím uživatelů je čas začít teď.

Klíčové je přistupovat k přístupnosti systematicky -- od návrhu přes implementaci až po testování. Protože dodatečné opravy jsou vždy dražší než správný návrh od začátku. A pokud si nejste jisti, kde začít, konzultace se zkušenými vývojáři vám může ušetřit týdny práce a předejít nákladným přestavbám.

Spočítejte si cenu na míru

Konfigurátor vám za 2 minuty ukáže orientační cenu přesně pro váš projekt.

Související články

Když design ignoruje uživatele: Galerie UX hrůz
UI/UX DesignUXDesign

Když design ignoruje uživatele: Galerie UX hrůz

Registrace o 15 polích, navigace jako bludiště, formuláře mazající data. Reálné UX hrůzy a co se z nich dá naučit.

5. března 20266 min čtení
Redesign z pekla: Když klient chce vše jinak
UI/UX DesignRedesignDesign

Redesign z pekla: Když klient chce vše jinak

Schválený design, který se nelíbí. Dvanáct stakeholderů, dvanáct názorů. Teenager jako designový konzultant. Příběhy z praxe.

30. dubna 20266 min čtení
5 nejčastějších chyb při návrhu mobilní aplikace
Mobilní vývojMobilní aplikaceDesign

5 nejčastějších chyb při návrhu mobilní aplikace

Přehled nejčastějších designových chyb v mobilních aplikacích. Ignorování platforem, složitá navigace, chybějící offline režim a další.

3. března 20267 min čtení