Nevidomí otestovali přístupnost českých e-shopů: kde se jim nakupovalo nejlépe?

Česká e-commerce scéna dlouhodobě roste. Loni se tento trend navíc umocnil pandemickou situací, kdy byl nákup online mnohdy jedinou možností, jak některé druhy zboží získat. Pro nevidomé i další hendikepované jsou ale e-shopy i za běžné situace preferovanou variantou nákupu.

Pomocí odečítače obrazovky a klávesnice si totiž mohou v klidu projít produkt za produktem, zjistit si o něm podrobné informace a nakoupit bez nutnosti něčí asistence. Má to ale jeden háček. E-shop musí splňovat základní principy přístupnosti.

Kde se znevýhodněným nakupuje nejlépe?

Vybrali jsme 10 významných českých e-shopů, které otestovali naši nevidomí odborníci na přístupnost – Jan Balák a Roman Kabelka. Aby byli dostatečně objektivní, stanovili si předem podrobnou metodiku testování. U e-shopů hodnotili konkrétní kritéria přístupnosti, za které udělovali určitý počet bodů, zároveň měřili čas nákupního procesu.

„Výsledky byly vesměs pozitivní, řekl bych že dokonce nadprůměrné. Rozhodně jsou oblasti webových služeb, které jsou na tom hůře,” shrnul testování Kabelka. I tak se ale mezi e-shopy objevovaly v různých ohledech značné rozdíly – ať už se týkaly obecného pojetí přístupnosti nebo konkrétních prohřešků.

Celkovým vítězem testu se stal e-shop Rohlik.cz, nutno však podotknout, že v těsném závěsu – o pouhých 0,125 bodu – skončilo iTesco.cz. Oba e-shopy s potravinami doplňuje na pomyslném stupni vítězů obchod s elektronikou Datart.

E-shopy mohly ve 4 oblastech, které si podrobněji rozebereme níže, získat dohromady 50 bodů, což by odpovídalo 100% pohodlnosti při nakupování a procházení webu. První tři obchody překonaly hranici 80 %, což lze označit jako velmi slušný výsledek. Roman Kabelka proto tyto e-shopy krátce okomentoval, aby shrnul, v čem vynikají:

1. Rohlik.cz: Celé rozhraní i šablona webu je na přístupnost perfektně odladěná. Právě díky tomu předčil Rohlik.cz ostatní testované e-shopy. Nadstandardně dobře pracuje například s oblastmi stránky. Bezproblémové je i vyplňování formulářů, které bývá častým kamenem úrazu.
2. Itesco.cz: I přesto, že se nejedná o klasický e-shop, je vše pochopitelné a celému procesu, od vstupu až po finální objednání, nelze nic v zásadě vytknout. U dynamických prvků rozhraní je přístupnost ovládání adekvátně ošetřena a nákupní proces patří i přes nutnost registrace k nejrychlejším.
3. Datart.cz: Rozhraní je čisté a z hlediska přístupnosti přehledné. Oproti e-shopům Rohlik.cz a iTesco.cz, jež musely do přístupnosti investovat značné úsilí, zvolil Datart úsporné řešení, které může inspirovat klasické e-shopy. Body ztrácel průběžně na drobnostech, závažnější problém se ale neobjevil.

Zatímco e-shopy na stupních vítězů už mají z velké části vyhráno a stačí jim upravit jen několik detailů, online obchody na chvostu tabulky musí ujít ještě velký kus cesty. Níže jsme proto rozepsali, na co by se měly v dílčích oblastech zaměřit. Nejedná se však o žádné specifické prohřešky, které by byly vlastní jen testovaným e-shopům. Poznatky mohou klidně posloužit i jako inspirace ke zlepšení přístupnosti jakéhokoliv podobného webu.

Nevidomí specialisté podrobně vysvětlují, proč je přístupnost důležitá, jak přesně nakupují a co je při testu překvapilo.

Obecná přístupnost

V rámci obecné přístupnosti se testovala zejména struktura stránky a navigace na webu. Konkrétně se jedná například o správné hierarchické uspořádání úrovně nadpisů (H1–H6), konzistentnost struktury i navigace, ovladatelnost pomocí klávesnice nebo vhodnou práci s oblastmi stránky. To vše totiž zásadně ovlivňuje orientaci na webu a jeho procházení za pomoci odečítače obrazovky.

*Srovnávány byly šablony úvodních stránek (homepage) a kontaktů.

Premiantem obecné přístupnosti se stal Rohlik.cz, jenž ztratil jen 1,25 bodu – bod kvůli chybějící, řádně označené, drobečkové navigaci a čtvrt bodu za používání nadpisu H3 po H1. Svůj náskok před ostatními získal Rohlik.cz zejména díky správnému zakomponování oblastí ve struktuře stránky.

Na konci tabulky skončila Alza a Decathlon. Oba e-shopy ztratily nejvíc v sekci „Šablona stránek”, která se týká konzistentnosti navigace a správné struktury webu. „U Decathlonu se menu ovládá velmi nekomfortně, pohyb mezi kategoriemi je zkrátka špatný,” přiblížil Balák jeden z problémů.

V případě Alzy zase vysvětlil, že stránka je zcela bez struktury a nelze tak určit, co se nachází na začátku a co na konci. V takovém případě musí uživatel čtecího zařízení prvky lineárně procházet nebo využít vyhledávání na stránce, což není příliš pohodlné.

V dílčím hodnocení „Šablona stránek” ale výrazně ztratily i další e-shopy, zejména Lidl-shop.cz a Sportisimo. Pokud by chtěly zvýšit přístupnost svých webů, měly by se na tuhle oblast zaměřit. Naopak všechny e-shopy si vedly velmi dobře, nebo alespoň obstojně, při vyhledávání kontaktů. Buď je bylo možné najít pomocí struktury, což je ideální, nebo alespoň vyhledáváním v textu stránky.

Výběr produktů

Nákupní proces obvykle začíná výběrem produktů. Auditoři postupovali tak, že si zvolili jednu kategorii zboží a v ní procházel 3 produkty, jež přidali do košíku. Při zahájení testování této oblasti byla také spuštěna časomíra, abychom zjistili, na kterém e-shopu trvá nákupní proces nejkratší, respektive nejdelší, dobu. V hodnocení se mimo jiné promítla orientace ve výpisu produktů, přístupné seřazení položek (například od nejlevnějšího) nebo dobře čitelný detail produktu.

Výsledky jsou v této oblasti velice vyrovnané. Rozdíl mezi prvním a posledním je pouze 2,5 bodu. Není se čemu divit. E-shopy si moc dobře uvědomují, že výběr produktů je často okamžik, kdy zákazníka získají, nebo ztratí, a to se zjevně projevuje i na vcelku solidní přístupnosti. I tak ale nebyl žádný z obchodů stoprocentní, proto si opět projdeme některé z prohřešků.

Datart a Parfemy.cz neoznačují stránkovač (page navigation) jako oblast, což ztěžuje jeho snadné nalezení. E-shopy Rohlik.cz a Decathlon zase stránkovač vůbec nemají, protože používají nekonečné scrollování, o něm ale není uživatel odečítače obrazovky dostatečně informován.

Jedním z kritérií byla také přístupnost seřazování výpisu produktů, například od nejlevnějšího. V případě Notina chyběla možnost získání focusu pro výběrový seznam, což velmi výrazně zhoršuje jeho použitelnost. Nutno také poznamenat, že Parfemy.cz a Mall.cz funkci řazení vůbec nenabízí, takže nebylo co testovat. Aby tyto e-shopy nebyly kvůli chybějící funkci znevýhodněny, udělili jsme jim mediánový počet bodů, tedy 1.

Pro nevidomé zákazníky je pak velmi důležité, jak vypadá detail produktu, zde totiž získávají cenné informace o jeho parametrech a specifikaci. „V tomhle ohledu musím Alzu pochválit, detaily produktů mají na velmi dobré úrovni, informace jsou přístupné a dobře označené,” uznal Balák. Nejhůře naopak dopadl Lidl-shop.cz, kde popisy zboží nejsou téměř vůbec strukturované.

Objednání produktů

Testovaná oblast „Objednání produktů” se zaměřovala jednak na práci s košíkem, kde je důležitá přehlednost údajů o jednotlivých položkách a cenách, a jednak na vyplňování objednávkových formulářů. Ve chvíli, kdy už zbýval poslední krok – potvrdit objednávku – byl test dokončen. Zároveň se zastavila časomíra měřící délku nákupního procesu.

Na rozdíl od předchozí části jde vidět, že se v téhle oblasti e-shopy výrazně liší. Přitom se jedná o zcela zásadní fázi nákupního procesu. Problém může nastat už při samotném otevírání nákupního košíku. Zatímco u iTesco.cz, Rohlik.cz nebo Lidl-shop.cz je tento úkon zcela intuitivní, u Alzy je naopak nemožné se z detailu produktu do košíku dostat. V případě Sportisima je sice odkaz na košík v začátku stránky přítomný, ovšem aktivace z klávesnice u něj nefunguje.

Samotné procházení košíku je u většiny e-shopu funkční a relativně pohodlné. Decathlon, Parfemy.cz a Lidl-shop.cz by však mohly zapracovat na tom, aby byl obsah košíku lépe strukturovaný.

Když je zboží vybrané, košík zkontrolovaný, typicky zbývá už jen poslední krok – vyplnit údaje pro dokončení objednávky. Právě formulář, jež se v této fázi nákupu obvykle vyskytuje, bývá z hlediska přístupnosti velmi problematický a zaslouží si zvláštní pozornost.

Jednotlivá pole musí být v prvé řadě označená tak, aby bylo i přes odečítač obrazovky jasné, k čemu slouží a co se v nich vyplňuje. Kromě toho by vývojáři měli rovněž zajistit, aby bylo zřetelné, v jakém stavu se dané pole nachází, tedy jestli je například zaškrtnutý přepínač, kterým si zákazník objednává doručení poštou apod.

„U e-shopů Alza.cz a Mall.cz nelze poznat, v jakém stavu přepínač je. Prvek navíc nezískává focus, což znesnadňuje ovládání,” prozradil Balák a dodal, že v případě Alzy chybí u přepínačů i popisky.

Dalším častým problémem je nevhodné řešení chybových hlášek při špatně vyplněném formuláři. V tomhle ohledu uspěla jen polovina testovaných e-shopů. U Sportisima a Decathlonu se tyto hlášky dokonce nepodařilo vůbec nalézt. Mall.cz je měl zase vypsané až pod formulářem, což snižuje pohodlnost, protože se musí ručně dohledávat.

Časová náročnost

Doba trvání nákupního procesu je pro nevidomé velmi důležitá a je častým důvodem, proč někde rádi nakupují, nebo se e-shopu naopak vyhýbají. „Třeba na Damejidlo.cz je ovládání a celková přístupnost natolik nedořešená, že je rychlejší si jídlo uvařit než si ho objednat,” svěřil se Kabelka.

Protože se časová náročnost odvíjí nejen od úrovně přístupnosti webu, ale i od zkušeností a obratnosti uživatele, u každého e-shopu jsme zprůměrovali čas nákupního procesu obou našich specialistů na přístupnost. Překvapilo nás však, jak málo se jejich výsledky lišily.

Rozdíl mezi nejlepším a nejhorším e-shopem z hlediska času stráveného nakupováním je na první pohled markantní. Proces zabral na Alza.cz zhruba trojnásobek času, který našim specialistům stačil pro nákup na Notinu nebo Datartu. „Na Alze bylo nejhorší vyplňování platby, dopravy a údajů o dodání. Například Mall.cz používá pro tyto účely podobné prvky, jejich ovládání je však o mnoho komfortnější,” vysvětlil Balák.

Dalším výrazným problémem, který se prolínal celým nákupním procesem, bylo zobrazování modálních dialogových oken, která se objevovala bez oznámení a bez přesunutí focusu. Nalezení takového okna je přes odečítač obrazovky velmi komplikované. Nezřídka to může být i nepřekonatelná překážka, která vede k ukončení nákupu.

„Je to škoda, protože Alza nabízí třeba zajímavé audioknihy a má často nejvýhodnější ceny. Kvůli dlouhodobě neřešené přístupnosti, se jí ale nevidomí vyhýbají. Kdybych s Alzou neměl předchozí zkušenosti, byl by čas nákupu ještě mnohem delší,” dodal Balák k nepříznivému hodnocení největšího českého e-shopu.

Ostatní internetové obchody si z hlediska časové náročnosti vedly výrazně lépe. V případě iTesco.cz byl nutný krok navíc v podobě registrace, tu si ale Balák pochvaloval: „S formulářem se pracovalo velmi dobře. Dokonce i dynamické našeptávače byly relativně přístupné, měl jsem akorát malý problém s číslem popisným.”

Shrnutí

Ze studie přístupnosti e-shopů vyplývá, že na pomyslné škále možností jak se k přístupnosti postavit existují dva hlavní póly. Ten první je vytvořit co nejméně komplikovaný e-shop, jenž bude jasně strukturovaný, s minimem dynamických prvků a založený hlavně na základních HTML prvcích, které jsou z hlediska přístupnosti většinou ošetřené. Takové řešení zvolil právě třeba Datart.

Druhým pólem je moderní, dynamický e-shop, s vlastními naprogramovanými prvky a specifickou strukturou. Ten může být velmi atraktivní pro uživatele bez hendikepu. Do přístupnosti pro znevýhodněné uživatele je však v tomhle případě nutné investovat mnoho úsilí, času i peněz. O tom, jak například zpřístupnit vlastní element select napsal Roman Kabelka velmi podrobný článek.

Komplikovanější variantu elektronického obchodu využívající dynamické prvky volí třeba Rohlik.cz, iTesco.cz nebo Alza. Jak ale test ukázal, první dva jmenovaní se k zpřístupnění svých e-shopů postavili zodpovědně, zatímco Alza.cz má rozhodně co dohánět.

Přístupný web není jen pro nevidomé

Přístupnost webu se postupně stává standardem. Dokazuje to třeba zákon 99/2019 o přístupnosti webových stránek a mobilních aplikací, který zavádí v Česku povinnost zpřístupnit weby a aplikace veřejných institucí hendikepovaným. Podrobný návod, co vše je nutné ošetřit, pak stanovují světově uznávané zásady pro přístupnost WCAG.

V Masteru se tématem přístupnosti zabýváme dlouhodobě a vydali jsme celou řadu článků, kde se o tématu dozvíte více. Základní informace o vlastnostech přístupného webu najdete třeba v článku 11 tipů, jak zlepšit přístupnost webu. Kromě toho také pravidelně provádíme analýzy přístupnosti pro nejrůznější subjekty.

Víme proto, že zpřístupnit e-shop, webové stránky nebo aplikace znevýhodněným skupinám významně rozšiřuje počet potenciálních zákazníků, návštěvníků či uživatelů. Například zrakově hendikepovaných žije v Česku přes 80 tisíc, z toho zhruba 20 tisíc zcela nevidomých. Lidí s nějakou formou sluchového hendikepu je u nás zhruba půl milionu. Pro ně je zase důležité, aby existovala textová alternativa k audioprvkům, typickým příkladem jsou titulky ve videu.

Přístupnější web ale ocení také senioři a koneckonců i běžný uživatel. Například důraz na logickou strukturu nebo kontrastní barvy se totiž přímo prolíná s UX (User eXperience) designem webu. V neposlední řadě může mít přístupnější web pozitivní vliv i na umístění webu ve výsledcích vyhledávání.

Ať už je motivace ke zpřístupnění obsahu webu či aplikace jakákoliv, prvním krokem je analýza a zjištění nedostatků v kódu a obsahu. S tím vám naši specialisté velmi rádi pomůžou, stejně jako už pomohli desítkám firem a institucím.