Karel Giebisch: Jak na vývoj přístupných webů a aplikací

Karel Giebisch je zrakově hendikepovaný IT specialista, redaktor, masér, bojovník za inovace. V rámci GiebHelp řeší přístupnost webů a mobilních aplikací v operačních systémech iOS, Android, macOS, Windows. Jeho cílem je odstranit bariéry, aby lidé se zrakovým hendikepem mohli žít smysluplný, samostatný život bez překážek a s minimální asistencí.

S Karlem jsme se v rozhovoru zaměřili na přístupnost webů a aplikací a jak by měl vývoj digitálních produktů s důrazem na přístupnost vypadat.

Karle, co je to přístupnost webů a aplikací?

Přístupnost lze definovat různými způsoby. Já se držím následujícího:

Přístupnost zahrnuje úpravu webu nebo mobilní aplikace do té míry, aby vytvořené prostředí bylo přívětivé i pro osoby s hendikepem. Tím je myšleno, aby se lidé s hendikepem dokázali v mobilní aplikaci či na internetové stránce zorientovat, vyčíst veškeré informace a celé prostředí ovládat se zrakovým, ale případně i dalším znevýhodněním. 

Jaká jsou základní pravidla, která by aplikace a weby měly splňovat, aby dobře sloužily i hendikepovaným uživatelům?

Pravidel přístupnosti je velké množství. Každý konzultant, každá organizace, která se této oblasti věnuje, může vnímat přístupnost odlišně v závislosti na druhu znevýhodnění, kterým se zabývá. Protože já sám jsem zrakově hendikepován už od narození, technika je mým denním chlebem a neodmyslitelným pomocníkem, konzultuji přístupnost pro odečítače obrazovek nebo-li čtečky, což je takový slangový výraz mezi developery. 

Osobně se řídím těmito čtyřmi faktory:

1. Struktura, navigace, orientace 

Zda-li má mobilní aplikace nebo web odpovídající strukturu, prostřednictvím které se lze bez zraku v aplikaci nebo na webu snadno zorientovat.

2. Rozeznatelnost, čitelnost prvků

Jestli odečítač obrazovky dovede rozpoznat jednotlivé prvky, např.:

• • karty/panely včetně jejich odpovídajících názvů
  • tlačítka včetně jejich odpovídajících názvů
  • textová políčka s pojmenovanou informací k čemu jsou určena
  • rozčlenění webu na jednotlivé části či sekce mezi kterými lze se čtečkou filtrovat
  • četnost a vhodnost nadpisů
  • obrázky včetně jejich odpovídajícího popisu
  • zaškrtávací přepínače včetně jejich odpovídajícího názvu k čemu slouží
  • rozbalovací nabídky včetně orientace v nich a práce s nimi

3. Ovladatelnost

Zda-li jsou web nebo mobilní aplikace ovladatelné s odečítačem, jestli je možné s webem nebo mobilní aplikací vůbec se zrakovým znevýhodněním pracovat a zvládat ovládání všech funkcionalit

4. Vyčítání a zobrazování informací

Zda-li se dostanu ke všem podstatným informacím a jestli je dokážu čtečkou obrazovky vyčíst, např.:

• • správně určit jednotlivé prvky, poznat k čemu slouží a po jejich potvrzení získat požadovanou informaci
  • co vyplnit do jednotlivých textových polí, jestli jsou povinné nebo nepovinné
  • rozpoznat jednotlivá tlačítka, zaškrtávací přepínače, odkazy a z jejich názvu textového popisu poznat k čemu slouží a dostat se k požadovaným informacím po jejich potvrzení

Kromě těchto čtyř faktorů je též nesmírně důležité myslet na kontrast či inverzi barev, možnost úpravy velikosti textu, písma atd. Tyto vychytávky neocením já, ale uživatelé slabozrací či ze zbytky zraku.

Zdroj: vzhurudolu.cz

Je v ČR platná legislativa, která by vymezovala, jak má přístupný web nebo aplikace vypadat?

Ano, přístupnost definuje zákon č. 99 z r. 2019 SB. V něm jsou vymezeny všechny podstatné náležitosti, na které by se mělo stran přístupnosti dbát. Nebudu zde zabíhat do detailů, ale zmíním, že v zákoně je vymezeno pro jaké skupiny znevýhodnění by měla být přístupnost řešena a na co by měl být kladen důraz.

Přístupnost je pevně zakotvena též v oficiální směrnici o přístupnosti EU, detaily v angličtině zde. Tato směrnice je základem k regulování a řešení přístupnosti v rámci všech států EU. Z této směrnice vychází a je i nadále upravován uvedený zákon.

Nutné je dodat, že veškerá legislativa, která jednotlivým developerům a firmám nařizuje řešit přístupnost napříč EU, začne oficiálně platit až v roce 2025. Do té doby  nám nezbývá nic jiného, než se spoléhat na vstřícnost a ochotu jednotlivých společností se přístupností zabývat.  

Jak přístupnost testujete?

Dbám na čtyři faktory uvedené v předchozí části tohoto rozhovoru. Ve stručnosti postupuju takto:

• Detailně si projdu celý web nebo mobilní aplikaci u vybraného projektu, musím se nejdříve zorientovat
• Poté postupně procházím položku po položce a testuji funkčnost, rozeznatelnost jednotlivých prvků. Vyčítání správných informací, celkovou ovladatelnost
• V průběhu procházení jednotlivých sekcí a testování, sepisuji report. Co funguje, nefunguje, kam se dostanu, nedostanu, co bych jak pořešil. Když je potřeba, konzultujeme napřímo, kdy prakticky ukazuji komplikované oblasti, ať mají developeři lepší představu než z psaného reportu

Přečtěte si tipy, jak vylepšit přístupnost webů: Získejte nové klienty zlepšením přístupnosti vašeho webu

Doporučíte nám online nástroje, díky kterým můžeme přístupnost, alespoň částečně, sami otestovat?

Nástroje na testování přístupnosti samozřejmě existují, ale nelze se na ně plně spoléhat. Různé automatické validátory dovedou otestovat přístupnost pouze částečně a navíc vždy je nejlepší manuální kontrola a manuální testování.

• Jak testovat přístupnost je hezky popsáno v tomhle videu
• Strukturu webu můžete otestovat pomocí nástroje Web developer
• Mezi další rozšíření patří např. axe DevTools - Web Accessibility Testing nebo Accessibility Developer Tools
• Nástroj s jednodušším rozhraním colour contrast analyzer

Na jaké chyby nejčastěji narážíte?

Z několikaletých zkušeností, kdy přístupnost konzultuji, u každého projektu narážím na neustále se opakující chyby a to:

• Textově neotagované prvky: obrázky, odkazy, tlačítka. Developeři si často vystačí s grafickými ikonkami, se kterými si odečítač obrazovky nedokáže poradit a tak vyčítá pouze: tlačítko, panel / karta, přepínač, zaškrtávací políčko. Pokud pracujete s odečítačem obrazovky tak nepoznáte, co je co, což je skutečně matoucí.
• Nepřiřazené správné elementy. Pokud nemá např. tlačítko přiřazený element button, textové pole text field, tak odečítač obrazovky prvek nerozezná a i když je třeba správně otagován, textově popsán, pro odečítač se tváří jako text. Nepoznáte tedy, že jde o tlačítko, přepínač či vpisovatelné textové pole
• Nedodržená struktura a navigace. V případě rozsáhlého projektu je dobré jednotlivé sekce oddělit parametrem section, vytvořit třeba různé orientační body, či pořešit vhodnou strukturu nadpisů pro snadnější orientaci
• Žádné textové pojmenování textových polí. Pokud nemá textové pole správné pojmenování např. uživatelské jméno, e-mail, s odečítačem obrazovky nepoznáte k čemu jednotlivá textová pole slouží a jaké informace do nich vpisovat
• Matoucí ilustrativní prvky. Takové prvky, většinou to bývají ilustrativní obrázky a grafika,  mohou zrakově znevýhodněného uživatele mást. Je lepší je pro odečítač obrazovky skrýt, aby je ignoroval

Zdroj: nngroup.com

Jak si na tom stojí české weby a aplikace? Je přístupnost stále konkurenční výhoda, nebo už spíše samozřejmost?

Rok od roku se přístupnost zlepšuje. Notnou měrou k tomu napomáhá i zákon č. 99 2019 SB, který přístupnost definuje a vyžaduje. Nicméně stále je patrné, že přístupnost je něco nestandardního a mnoho společností odmítá tuto oblast řešit. Nepřipadá jim důležitá, což je špatně. 

Bohužel stále se setkávám ze strany společností spíše s odmítavým než pozitivním stanoviskem. Nebo s ujištěním „Ano, máme to v plánu, ale zatím vůbec nevíme, kdy se tomu budeme věnovat.“ Mnoho společností raději ani neodpoví na můj e-mail s dotazem na přístupnost, dělají, že je to vůbec nezajímá, což je smutné.

Co je ovšem nepochopitelné a zůstává mi nad tím rozum stát, že přístupnost je lhostejná i korporátním, celkem známým společnostem např. soukromým dopravcům, bankovním institucím, státnímu aparátu v oblasti digitalizace. 

Vyzdvihnout ale můžu projekty, u kterých jsem přístupnost řešil:

• Mobilní aplikace Záchranka, Liftago Taxi, Twisto, Qerko, přepravce Zaslat, Tečka, Čtečka, mobilní bankovnictví Komerční banky a mnoho dalších.

O kolik dražší je přístupný web nebo aplikace? Mluvíme spíše o velké investici, nebo se zpravidla jedná o menší úpravy?

Povětšinou jde o menší úpravy, které jsou opomíjeny v podstatě jen proto, že nástroj nevytváří developer s hendikepem. Společnosti jednoduše nenapadne, že je nutné se přístupností zabývat, mají pocit, že jejich stránky nebo mobilní aplikace přece fungují na výbornou. 

Z hlediska finanční stránky si nemyslím, že by se jednalo o nějakou nadměrně velkou investici. Samozřejmě vždy záleží na rozsahu projektu a komplexnosti, jak si daná společnost přeje přístupnost detailně otestovat. Já si třeba řeším finance ne za hodinu, ale za den mám určitou finanční taxu, protože nikdy nevím, kolik mi analyzovaný projekt ve skutečnosti zabere času.

Karle, mockrát děkuji za rozhovor a zasvěcení do tajů přístupnosti. Ať se daří!

Kam dál?

• Rozhovor s Andreou Grigerovou Psychologie fontů: Jak písmo ovlivňuje vaše zákazníky
• Rozhovor se zakladateli projektu UX writing v Čechách UX writing: Jak psát texty, kterým uživatelé rozumí
• Získejte nové klienty zlepšením přístupnosti vašeho webu
• Jak vybrat agenturu pro vývoj aplikace?
• 4 typy skenování obsahu: Jak lidé (ne)čtou webové stránky