Zpět na seznam článků

Přístupnost na webu (všichni mají někdy handicap)

Jak udělat co nejlepší web pro chvíle, kdy se říznete do prstu, jste opilí nebo unavení. A taky pro těch 15 % lidí, co mají opravdový handicap.

Shining-river-of-blood

Všechno to začalo jedním tweetem Safie Abdally.

Vrtá mi hlavou: Pokud máte nějaký handicap, co je nejtěžšího na prohlížení webu?

Jak se bude váš web používat slepcům. Tak tohle se vybaví většině lidí, když se řekne přístupnost (accessibility). Ale je to hodně zjednodušený pohled, který vám budu chtít trochu rozkopnout.

Handicapem trpí 100 % populace

Přístupný web potřebujete proto, že handicapem trpí 100 % uživatelů. A než si začnete myslet, že už mi zase přeskočilo, tak vám to vysvětlím.

Z mého pohledu jsou dva druhy handicapu:

  1. trvalý a
  2. dočasný.

Trvalým handicapem trpí podle World Health Organization cca 15 % populace. Tím dočasným trpíme všichni.

Já jsem třeba nedávno slavil výročí seznámení se svou ženou. Tak jsem jí chtěl udělat radost a v sobotu jsem vařil oběd. Vyndal jsem přísady, nabrousil nůž, nakrájel cibuli. A prst.

Výsledkem byly 3 věci:

  1. Byt vypadal jako finální scéna z Shining.
  2. Krájet maso jednou rukou nejde.
  3. Psát omluvnou sms levou rukou zatímco z vás uniká život je též obtížné.

Nicméně přežil jsem. Ale uvědomil si, že tu jistotu a víru ve vlastní schopnosti lze rychle ztratit. Není to ale jen o tom, že jsem levej jak Bulharský prachy.

Dám pár dalších příkladů:

  • na obrazovku vám svítí sluníčko a špatně se čte,
  • jedete v dopravním prostředku na hrbolaté cestě,
  • jste nevyspalí nebo opilí,
  • zapomněli jste si brýle na blízko a ke čtení mobilu potřebujete selfie tyč,
  • máte ruce jako lopaty a netrefíte se do dotykové klávestnice (ahoj Tomíku),
  • jste v extrémně stresové situaci – třeba když měla má dcera záchvat,
  • jste staří.

Navíc pokud děláte jakýkoliv web pro státní správu (je mi vás upřímně líto) nebo organizaci, která dbá na veřejné blaho, tak máte ze zákona povinnost udělat web přístupný (podle směrnic WCAG – web content accessibility guidelines).

Neberte to na lehkou váhu – zvlášť v případě – že děláte web pro zahraniční firmu. Můj bývalý kolega se setkal v Británii s tím, že je žalovala organizace zastupující handicapované, a vysoudili vinou špatně navrženého webu slušný ranec.

U nás to sice není tak hrozné, ale stávku slepců fakt nechcete!

Česká soda 24 – Stávka slepců

No a teď zpátky k tomu tweetu. Odpovědi lze rozdělit na následující problémy:

Video bez titulků

Tohle je asi nejčastější výtka. Pokud jste hluší, nahluchlí, ale třeba i autisti, tak si video bez titulků moc neužijete.

Jsem hluchý, a video bez titulků je pro mě problém číslo jedna.

Jak moc nemusím Facebook, tak mu patří zásluha na tom, že hodně videí je s titulky. Od té doby, co se vám videa sama přehrávají, ale s vypnutým zvukem, je titulkování na vzestupu.

A pokud mi chcete připomenout, že YouTube má automatické titulkování, tak vám na to řeknu, že sice ano, ale je to nepřesné a jen pro pár jazyků.

https://twitter.com/UntoNuggan/status/871063079861268481?ref_data-src=twdata-src%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E871063283951960064%7Ctwgr%5E27b801351cb5d734e4e7e0e1675259d8ea921223%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.ilincev.com%2Fpristupnost-na-webu

Jsem autista a když je toho na mě moc, tak mám problém vnímat zvuk. Zvlášť, když hovoří někdo mimo obrazovku.

Navíc pokud nejste native speaker, tak vám titulky dost pomůžou v pochopení toho, co je vlastně řečeno. U skotů, brummies a dalších divných nářečí je to skoro nutnost i pro samotné Angličany. Když jsem dělal v Dundee ve Skotsku, tak si tam stěžovali, že nerozumí lidem v Glasgow.

Animace, pohyb a paralaxové skrolování

Animace bývá často poněkud samoúčelná. A pokud trpíte autismem, máte Aspergerův syndrom nebo ADHD, tak je pro vás animace dost utrpení. Protože se nemůžete soustředit.

Mám ADHD – pokud je někde „jemná“ animace, tak se nemůžu soustředit. Nejhorší je to na blog.intercom.com a jejich gradient v hlavičce.

Nejčastější prohřešky:

  • animované slidery,
  • videa, která se sama spouští,
  • animované pozadí (tím nemyslím hezký zadek),
  • (agresivní) bannery,
  • paralaxové skrolování.

Takže až budete příště slintat nad nějakou css animací a říkat si, jak udělat třeba animaci nad textovými odkazy nebo podobnou hovadinu, tak… to nedělejte.

Navíc je vědecky dokázáno, že jednoduché stránky víc vydělávají.

Velké bloky textu

Nikdo nechce číst souvislý blok textu. Respektive nikdo ani nezačne. Protože většina lidí jede na tzv. skim and scan mód, což znamená, že rychle zaskroluje dolů a kouká na:

  • nadpisy,
  • podnadpisy,
  • citace,
  • odrážkové seznamy,
  • fotky,
  • popisy fotek.
https://twitter.com/Mustafa_x/status/871138503408615428?ref_data-src=twdata-src%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E871138503408615428%7Ctwgr%5E27b801351cb5d734e4e7e0e1675259d8ea921223%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.ilincev.com%2Fpristupnost-na-webu

Jsem dyslektik – nepovažuji to za handicap, ale velké bloky textu jsou bolestivé. Taky nekonečná souvětí a příliš komplikovaný jazyk.

S neformátovaným textem souvisí i další věc, a to je pochopitelnost a jednoduchost psaní.

Je to dané tím, že rychlost pochopení je úměrná tomu, jak se bude text líbit. Pokud se vám bude text špatně číst, tak si tu negativní emoci spojíte s autorem. Proto píšu v holých větách. Potřebujete zvýšit pochopitelnost a jednoduchost vašich textů.

George orwell

Vždycky uvádím tipy na psaní od George Orwella:

  1. Nepoužívejte nikdy metaforu nebo přirovnání, které vidíte v tisku.
  2. Nepoužívejte dlouhé slovo, když můžete použít krátké.
  3. Pokud můžete slovo vynechat, tak to udělejte.
  4. Vždy používejte činný rod, ne trpný.
  5. Neužívejte cizí slova, odborné výrazy a žargon, když můžete použít běžné slovo.
  6. Tyto pravidla porušujte, pokud to bude dávat smysl.

Co se lehkosti psaní týče, kromě Orwella doporučuji Rudyarda Kiplinga (úžasné jsou jeho cestopisy z Japonska), Williama Saroyana nebo Jacka Londona. Když například Hemingwayovi vyčítali, že píše moc složitě a že nedokáže napsat krátký příběh, tak jim jeden napsal. Měl 6 slov:

Na prodej: dětské botičky, nikdy nenošené.

Malé písmo

Použijte prosím dostatečně velké písmo. Minimum je 16 pixelů pro desktop a 14 pixelů pro mobil. A navíc bych vám vřele doporučil řádkování 1,5násobek velikosti textu a délku řádku maximálně 100 znaků.

Poděkují vám nejen pidlovoký, jako začínám být já, ale i běžní uživatelé. Všem nám zvýšíte komfort čtení.

Jsem skoro slepý na levé oko. Malé tenké písmo s nízkým kontrastem (je problém).

Nemožnost zoomovat

Část uživatelů potřebuje obsah zazoomovat nebo výrazně zvětšit písmo. A některé weby to buď neumožňují nebo se to v případě zvětšení písma celé pokazí.

Dcera je slabozraká a potřebuje 3-5násobné zvětšení. Hodně webů se při tomto zvětšení nedá použít.

Malý kontrast

Asi jeden z nejčastějších problémů, se kterým se běžně setkávám. Nedávno například bílý text v oranžovém tlačítku nebo třeba šedý text na modrém pozadí.

Ale třeba i příliš tenký řez písma. Který sice na designérově Macu a retina obrazovce vypadá krásně, ale na monitoru za 3 litry se špatným nastavením vyhlazování je to peklo.

Nízký kontrast mezi textem a pozadím. Fotografické pozadí, na kterém se špatně čte text.

Ideální kontrast je 4,5 ku 1. Pokud vám tohle pravidlo nic neříká, tak nejjednodušší je si to zkontrolovat jedním z mnoha webů – třeba Constrast Ratio.

Příliš syté a agresivní barvy

Vím, je to teď trendy. Ale příliš „svítivé“ barvy hodně lidem ztrpčují život. Stačí mít migrénu.

Trpím často silnými migrénami. Hodně webů je vytvořeno na bílém pozadí a já je nemůžu používat ani se slunečními brýlemi a svítivostí monitoru na minimu.

Pro některá zařízení můžete detekovat okolní světlo a podle toho upravit design stránky pomocí css. Takže pokud si čtete před spaním na mobilu (což vám docela slušně rozhodí spánek), tak lze snížit svítivost a mírně kontrast.

Informace předávaná pouze barvou

Vím o dvou svých klientech, kteří měli problém s vnímáním barev. Pro jednoho jsem dělal mapu všech bankomatů v ČR a stav indikoval zelenou a červenou. Což se pro člověka, který tyto barvy nerozliší ukázalo jako krapet problém.

Pro druhého jsem dělal logo Londýnsko-Honkongské burzy a bavili jsme se nad červenou ve vlajkách. Bohužel byl barvoslepý, tak mi k tomu moc neřekl.

Nějakou poruchou vnímání barev trpí 10 % mužů a 1 % žen.

Proto je důležité neukazovat informaci pouze barvou.

Jsem barvoslepý. Text na pozadí je většinou v pohodě, ale věci jako přepínače, heatmapy atd. můžou být obtížné.

Ale překvapivě to nemusí být je lidi s poruchou vnímání barev. Někdy stačí i porucha spánku.

Trpím poruchou spánku. Musím číst až po 5. hodině odpoledne se světelností na maximum. A weby, které mají modré textové odkazy bez podtržení…

Nutnost přesného pohybu myši

Ne všichni mají myš. A ne všichni mají kontrolu nad jemnými motorickými funkcemi.

Mě se třeba před Silvestrem přihodila taková nešikovnost. Řekl jsem si, že si dám předsevzetí už v předstihu a zašel si do posilovny. A jelikož neumím moc nejet na maximum, tak jsem se tak zřídil, že jsem pak při přípitku musel držet skleničku oběma rukama jak idiot.

Weby, u kterých je nutné použít myš, abych mohl vidět vyjížděcí menu.

Myslete na lidi, co mají Parkinsona, karpály, trackpad nebo svalovou horečku.

 

Souvisí s tím ještě jedna věc. Minimální oblast, do které se dá rozumně kliknout nebo ťupnout prstem je 7 x 7 mm. A mezi těmito oblastmi je minimální odstup 1 mm. Tak až budete příště navrhovat menu na mobilu, tak na to myslete.

My brother-in-law has cerebral palsy, buttons and links are too small for him to use. He can only use touch because he can’t hold a mouse.

Gary Rozanc (@garyrozanc) June 3, 2017

Můj švagr má mozkovou obrnu, tlačítka a odkazy jsou pro něj příliš malé. Musí používat dotyková zařízení, protože nemůže držet myš.

A třetí věc jsou gesta vícero prsty. Pokud máte problém s koordinací jednoho prstu, tak si představte, jaké to musí být, když potřebujete koordinovat víc prstů najednou. Velmi těžké.

https://twitter.com/EhlersDanlost/status/871185534814531585

Mám třes rukou. Cokoliv, na co můžu náhodou kliknout/ťupnout nebo naopak nemůžu, i když se snažím. Třeba počet kusů zboží. (volný překlad)

Captcha

Použití tzv. captcha je často problém i pro úplně zdravé jedince.

Máma má poruchu vidění … co jí přivádí k šílenství jsou captchas bez přístupnosti. Můžou téměř znemožnit se dostat k určitým službám na webu.

Závěr

Navrhujte pro všechny. Prosím. Většina úprav bude ku prospěchu i „normálním“ uživatelům.

Navíc vyhledávače jsou taky vlastně handicapovaní uživatelé.

Na závěr dva hezké odkazy:

a film Účetní, kde hraje Ben Afflec autistu:

The Accountant Official Trailer #1 (2016) – Ben Affleck Movie HD

Související články

Nebezpečí redesignu webu

Amazon-buttons

Vizuální hierarchie na webu

Piggy

Kolik vám vydělá A/B testování?

Pidgeon

Drobečková navigace

Smysluplná debata