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

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.

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:

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:

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ů:

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!

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

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ů.

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 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:

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í.

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:

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í.

Pokud píšete příliš složitě, čtenářům přijdete hloupější.

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ů.

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

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é.

Když už jsme u Hamingwaye, stejnojmenná aplikace vám pro angličtinu řekne, pokud píšete moc složitě.

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).

Čá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.

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.

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.

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.

Colourblind. Text on background is usually fine, but things like colour-coded toggles, heatmaps, etc can be hard.

— Dan 🇪🇺🇨🇦 (@phrawzty) June 4, 2017

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í…

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.

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)

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.

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:

UX autista radí, jak navrhovat pro autisty

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