Zpět na seznam článků

Jak si sám zkontrolovat použitelnost a přístupnost svého webu

7 tipů od ovládání mobilu levačkou po to, zda vám přístupnost nezničí design.

Bryle

Přijde do baru slepý, hluchý a … dělám si legraci. Pokud si říkáte, že žádnou přístupnost webu nepotřebujete, protože slepých uživatelů je málo a stejně to nejsou vaši zákazníci, tak jste na omylu.

100 % lidí je dočasně handicapovaných

Nějakým druhem postižení trpí 10-20 % uživatelů. Já jsem nedávno psal o tom, že v určitou chvíli svého života máme nějaký handicap všichni.

Stačí, když vám na telefon zasvítí sluníčko, přeženete to v posilovně s benchpressem nebo se ožerete. A nebo jste trochu zestárli. Ve 20 máte většinou oči cajk, za každých dalších 20 let vám do sítnice dopadne jen polovina světla.

Navíc většina úprav, které uděláte pro handicapované, bude ku prospěchu i normálním lidem.

Jak otestovat přístupnost a použitelnost sami

Předpokládám, že nemáte neomezené prostředky a že přístupnost není na vašem seznamu priorit nahoře. Takže šance, že si uděláte uživatelské testování se slabozrakými, hluchými a ožraly se blíží nule.

Je potřeba, abyste si tyhle neduhy zkusili trochu způsobit sami. A teď po vás nechci, abyste si vypíchli oči, zlomili ruku, vypili lahev absintu a rozdvojili si osobnost.

7 tipů, jak si to udělat sám ;)

1. Při jízdě MHD

Street-people-woman-london-girl-train-underground-photography-421642

MHD je naproti tomu ideální prostředí, protože:

  • nachází se tam pravidelně hodně uživatelů,
  • je tam dost obvyklých vyrušení (zjistit, na které jste zastávce),
  • drncá to,
  • občas nejste na signálu (hlavně v metru),
  • musíte ovládat mobil jen jednou rukou, druhou se držíte madla.

Co tím zkontrolujete:

  1. Ovládání jednou rukou a dosah palce.
  2. Orientace telefonu na výšku a na šířku.
  3. Dostatečná velikost odkazů – měly by mít minimálně 7 × 7 mm s 2mm rozestupy.
  4. Zda se lidem nedělá šoufl, když ovládají mobil za jízdy – šetřete s animací, paralax skrolováním a videi na pozadí.

2. Držte myš/mobil levou rukou

Left-hand

Většina praváků má levou ruku méně šikovnou, což se vám teď bude hodit.

Co tím zkontrolujete:

  1. Ovládání se sníženou mobilitou (namožené šlachy, artritida, …).
  2. Svalovou únavu spojenou s nezvyklým pohybem, a postupující nepřesnost při ťupání a psaní.
  3. Dostatečná velikost odkazů, hlavně po krajích obrazovky mobilu.
  4. Celkovou přesnost při běžných činnostech na počítači.

3. Snižte si svítivost displeje / vemte si sluneční brýle

Bryle

Ano, na vašem kalibrovaném retina displeji vše vypadá perfektně. Ale žijete v bublině. Většina lidí se na váš výtvor bude dívat na monitoru nebo mobilu za pár tisíc. Případně jim bude do toho svítit sluníčko.

Co tím zkontrolujete:

  1. Dostatečný kontrast a čitelnost.
  2. Zda nemáte příliš tenký řez písma.
  3. Zda to funguje i pro lidi s nějakou vadou zraku (barvoslepost, šedý zákal, …).
  4. Jak to vypadá na běžných displejích.

4. Když se vám chce na záchod

Lidi jsou netrpěliví. Čím dál víc. Máte cca 8 sekund zaujmout.

Doporučuji poprosit kolegy, zda by si prošli váš prototyp, když na to nemají čas. Třeba před jednáním, nebo ve frontě na kafe. Budou daleko míň vstřícní a trpěliví, což se víc blíží normálnímu stavu běžné populace.

Co tím zkontrolujete:

  1. Rychlé pochopení informací.
  2. Přehlednost.
  3. Kontrast a optimální umístění primární CTA / tlačítka.

5. Bez myši a trackpadu

Keyboard

Třeba jako já, když jsem to přehnal v posilovně a pak si na Silvestra ťukal šampaňským, které jsem držel oběma rukama.

Co tím zkontrolujete:

  1. Zda je aktivní prvek zvýrazněný (:focus).
  2. Zda lze vyplňovat formulářová pole v logickém sledu.
  3. Jak moc lze ovládat prvky jako slider na homepage.

6. Na mobilu za 1000 Kč

Alcatel se dá koupit za litr. Doporučuji přesedlat na operační systém, na který nejste zvyklí a zkusit si svůj výtvor zkontrolovat na levném zařízení.

Chápu, že řešíte, zda si koupit mobil za 35 nebo jen 30 litrů, ale nejprodávanější mobily jsou do 5 000 Kč. A to jsme v rozvinutém světě bez chudoby. Pokud navrhujete pro země v kategorii 2 nebo 3, tak tam je low-end smartphone vymoženost.

Nejprodávanějšísmartphone je iPhone 6, druhý nejprodávanější je levná Nokia 5230.

Co tím zkontrolujete:

  1. Design na menším displeji a rozlišení.
  2. Grafika na horším displeji s menším kontrastem.
  3. Pomalejší rychlost nahrávání, animace a samotného zařízení, častější zasekávání.

7. S vypnutými obrázky (a css a javascriptem)

Alza-bez-obrazku

I s těmito vypnutými věcmi byste měli být schopni splnit základní akce na webu, jako je procházení webu, přihlášení k newsletteru nebo objednání zboží.

Co tím zkontrolujete:

  1. Základní funkcionalitu webu.
  2. Průchodnost jednotlivých stránek.
  3. Vlastní trpělivost.

Bonusový tip – zkuste si projít web v cizím jazyce

Celý web si můžete zkusit projít v – pro vás – cizím jazyce. Tím pádem si zkontrolujete, zda web funguje z pohledu vizuální hierarchie.

Stačí si web nechat automaticky přeložit pomocí Google Translate. Stačí do políčka napsat vaši url adresu.

Nástroje na kontrolu přístupnosti

Existuje poměrně hodně nástrojů, kde si jste schopni zkontrolovat přístupnost.

Nezabije přístupnost můj krásný design?

Čím je design přístupnější pro lidi s omezením, tím je méně hezký. Na druhou stranu příliš vyňuňaný design bude nepoužitelný pro lidi s omezením. A upřímně i pro většinu normálních lidí.

Vlevo je design odpovídající AAA specifikaci, vpravo naopak příliš vymazlený design. A uprostřed rozumný kompromis. Vizte článek, ze kterého si půjčuji grafiku.

Aesthetic-accessibility-paradox

 

Související články

Artworks-1ruuhssrsxqwnlbk-8ecejw-t500x500

Rozhovor o podnikání v UX pro WebTop100

Kosik

Optimální proces nákupu na e-shopu

Lings-cars

10 nejčastějších chyb na webu a jak je opravit

Harrys-homepage

UX checklist kontroly před spuštěním e-shopu

Smysluplná debata