Archiv štítku: Testování přístupnosti

Praktické postřehy z testování přístupnosti webů v soutěži Biblioweb

Už řadu let hodnotím přístupnost webů v soutěži o nejlepší webovou prezentaci knihovny Biblioweb, do jejíhož jubilejního dvacátého ročníku přihlásilo své weby 41 veřejných knihoven. Jaká byla přístupnost soutěžních webů a jaké trendy lze na základě letošního hodnocení v této oblasti vypozorovat?

Jak a co jsem testoval

Podobně jako v jiných soutěžích, i testování v Bibliowebu je třeba přizpůsobit aktuálním podmínkám. Což znamená otestovat během relativně krátkého času (cca 10 dnů) relativně velké množství (zpravidla několik desítek) webů. Proto se při testování soustředím na zhodnocení míry naplnění stěžejních požadavků na technickou přístupnost na klíčových místech webu na vybraném vzorku stránek.

Které oblasti to jsou?

  • Strukturování webové stránky – nadpisy, oblasti stránky.
  • Přístupnost a ovladatelnost prvků webové stránky z klávesnice.
  • Dostatečný barevný kontrast a čitelnost textu.
  • Definování smysluplné textové alternativy u grafických prvků, nesoucích významovou informaci.
  • Přístupnost dokumentů.

Testování v zásadě probíhá způsobem popsaným v článku Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu, díky němuž lze poměrně snadno odhalit největší bariéry v přístupnosti.

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu

Jak si s jednotlivými oblastmi knihovny poradily?

Strukturování webové stránky pomocí nadpisů a oblastí stránky

Obzvlášť u stránek informačně bohatých (a takových najdeme na webech knihoven většinu) je strukturování obsahu webové stránky naprosto zásadní. Nedostatečné či nevyhovující strukturování komplikuje přístup k informacím, naopak robustní nadpisová osnova a vyznačení alespoň stěžejních oblastí stránky orientaci významně usnadňuje.

Nadpisová osnova

Pouze u 8 webů z 41 jsem k nadpisové osnově neměl zásadní připomínky a ohodnotil ji plným počtem bodů, dalších 10 webů mělo v oblasti nadpisových osnov jen drobné chyby. Na druhém konci žebříčku se umístilo hned 16 webů, jejichž nadpisové osnovy neodpovídaly obsahu jednotlivých stránek a například uživatel čtečky obrazovky ji tak nemohl použít pro zorientování se v obsahu stránky a snadnému přístupu k požadované informaci.

Oblasti stránky

Oblasti stránky jsou vedle nadpisové osnovy dalším, již nějaký čas standardizovaným řešením, které může uživatelům usnadnit orientaci v obsahu webové stránky. I přes jeho velmi snadnou implementaci do kódu stránky bylo toto řešení v drtivé většině případů použito nedostatečně, či nebylo použito vůbec.

Na 12 webech bohužel nebyly oblasti stránky vůbec definovány a většina webů je měla definovány nevhodně (tzn. buď nepokrývaly celý obsah; chyběla definice hlavního obsahu; přiřazené role/oblasti neodpovídaly obsahu, kterému byly přiřazeny). Vhodnou implementaci oblastí stránek bylo možné najít jen na 5 soutěžních webech.

Přístupnost a ovladatelnost prvků webové stránky z klávesnice

Dostupnost a ovladatelnost prvků na webové stránce při ovládání pomocí klávesnice je i v době dotykových zařízení stále velmi potřebné. Řada uživatelů (zejména těch se zrakovým postižením) totiž preferuje klávesnici jako primární vstupní zařízení při práci s výpočetní technikou.

U pěti webů byla přístupnost z klávesnice bohužel velmi problematická. kvůli nepřístupnosti položek 2. úrovně menu z klávesnice. U drtivé většiny webů také chyběly přeskakovací odkazy na důležité části webu (hlavní obsah, navigace) a vizuální zvýraznění prvku, který získá focus při ovládání webu z klávesnice. Zcela bezproblémovou měly ovladatelnost z klávesnice pouze 4 soutěžní weby.

Dostatečný barevný kontrast a čitelnost textu

Mnohem lepší byla situace v oblasti čitelnosti a kontrastu. Za opravdu problematické z tohoto úhlu pohledu se dalo považovat pouze 6 webů, u ostatních, což byla opět většina, byla čitelnost a kontrast na bezproblémové až vyhovující úrovni.

Dílčí problémy se pak objevily u odlišování odkazů od okolního textu: na několika webech byly odlišeny pouze barvou, v jednom případě pak dokonce nebyly odlišeny vůbec.

Definování smysluplné textové alternativy u grafických prvků, nesoucích významovou informaci

Přiřazovat grafickým prvkům textové popisky je dovednost, kterou už se tvůrci webů poměrně spolehlivě naučili. Se splněním tohoto bodu tedy nebyly žádné zásadní problémy a drtivá většina webů měla stěžejní grafické prvky korektně popsány. Pouze u několika málo webů byly pozvánky na akce zveřejňovány pouze v grafické podobě, což znemožňovalo jejich snadné přečtení či další zpracování (například zkopírování části textu).

Přístupnost dokumentů

Stále více informací je na webu publikováno prostřednictvím dokumentů. Proto je důležité, aby i tyto dokumenty splňovaly alespoň minimální požadavky na přístupnost, tj. alespoň obsahovaly textovou vrstvu.

U 13 webů jsem během testování narazil na dokumenty, které byly bez textové vrstvy, a k jejich přečtení tak bylo třeba vynaložit zvláštní úsilí (například si nechat obsah dokumentu rozpoznat pomocí OCR). Na zbývajících 28 webech byly dokumenty publikovány s textovou vrstvou.

Shrnutí

Jak je z řádků výše patrné, z obecného úhlu pohledu se stav přístupnosti knihovních webů pomalu lepší, nicméně stále je tady prostor ke zlepšení. Za pozornost stojí zejména zlepšení strukturování stránky pomocí nadpisů a oblastí a ovladatelnost rozhraní z klávesnice.

Cena za nejpřístupnější web

Součástí hodnocení je i nominování jednoho ze soutěžních webů na cenu za nejlepší bezbariérový web, který může posloužit jako zdroj inspirace pro ty, kdo chtějí svůj web lépe zpřístupnit. S požadavky na přístupnost se v letošním ročníku nejlépe vypořádali tvůrci webu Knihovny Jabok, kterým tímto ještě jednou srdečně blahopřeji 🙂


Pokud je pro Vás přístupnost nové téma a chtěli byste se s ní seznámit detailněji, doporučuji kurz Digitální design bez bariér pro začátečníky v Akademii CZ.NIC.

Digitální design bez bariér pro začátečníky v Akademii CZ.NIC

Pozvánka na školení zrakově postižených auditorů přístupnosti webu

Zájemcům z řad lidí s těžkým postižením zraku, kteří by se testování přístupnosti chtěli věnovat profesně a poskytovat zpětnou vazbu nad rámec subjektivního/uživatelského pohledu na web, je určeno Školení auditorů přístupnosti webu, která organizuje společnost Master Internet pod záštitou Světlušky – projektu Nadačního fondu Českého rozhlasu. A protože s Masterem i Světluškou spolupracuji, tak u toho samozřejmě nesmím chybět 🙂

Školení proběhne v úterý 2. října 2018 v prostorách společnosti Master Internet v Praze. Bližší informace najdete na stránce Školení auditorů přístupnosti webu nebo na stránce události Školení auditorů přístupnosti webu na Facebooku.

Těšíme se na vás 🙂

Školení přístupnosti v Moneta Money Bank

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu

Schopnost otestovat si, zda web, který vytvářím, neobsahuje žádné zásadní prohřešky proti pravidlům přístupnosti, by měla patřit mezi základní dovednosti každého webdesignéra. S tím, jak si takový jednoduchý audit přístupnosti webu udělat, seznamuje diváky v následujícím videu Rob Dodson. A protože mnou doporučovaný postup vypadá až na drobnosti prakticky stejně, pojďme si ukázat, jak takový jednoduchý audit provést a na co se zaměřit.

How I do an accessibility audit — A11ycasts #11

Jednoduchý audit přístupnosti pokrývá následující stěžejní oblasti

Přístupnost a ovladatelnost prvků webové stránky z klávesnice

První věc, kterou je vhodné zkontrolovat, je přístupnost a ovladatelnost prvků z klávesnice. Klávesnice je nejdostupnější nástroj pro testování přístupnosti webu, protože i přes čím dál větší zastoupení mobilních zařízení se stále jedná o primární vstupní zařízení a každý uživatel ji má po ruce.

Jak na to? Přístupnost z klávesnice velmi jednoduše otestujeme tak, že na klávesnici začneme mačkat tabulátor. Pokud jsme se tímto způsobem schopni dostat na každý prvek a máme možnost jej z klávesnice obsloužit, pak je vše v nejlepším pořádku.

Nezapomeneme také ověřit, zda

  • prvek, který při ovládání z klávesnice získá focus, je dostatečně zvýrazněn a uživatel je tak vizuálně informován o tom, na jakém prvku se právě nachází.
  • na stránce není žádný obsah mimo viditelnou oblast obrazovky, který může nedopatřením získat focus,
  • na stránce jsou k dispozici přeskakovací (skip to) odkazy.

Vyzkoušení jednoduché navigace po webu pomocí screen readeru

Znalost alespoň základní obsluhy některého ze screen readerů by dnes už měla také patřit mezi dovedosti tvůrců webů. Od webového vývojáře se samozřejmě neočekává, že bude znát všechny jejich funkce a bude schopen plnohodnotně nasimulovat práci nevidomého uživatele. Cílem je provést základní otestování, zda na uživatele screen readeru nečeká na webové stránce nějaká past, znemožňující mu práci s ní – tedy zda grafické prvky mají alternativní textové popisky, prvky, které slouží k interakci s uživatelem (tlačítka, rozbalovací seznamy…), je možné obsloužit, či zda dynamicky zobrazený obsah získá focus.

Více informací o tom, jaké kombinace screen readerů a prohlížečů (a jakým způsobem) používat, najdete v článcích

Adam na workshopu JAWS a braille

Strukturování webové stránky – nadpisy, oblasti stránky

Správné strukturování webové stránky korektně vyznačenými nadpisy a oblastmi stránek pomáhá uživatelům screen readerů v porozumění tomu, jak je webové stránka rozvržena. Umožňuje jim také efektivní práci s webem a nabízí možnost rychle se přesunout právě na tu část stránky, kterou potřebují. Dobře vytvořenou strukturu stránky si můžeme představit jako obsah knihy – podobně, jako z obsahu získáme představu o názvech kapitol a díky vazbě název kapitoly–číslo stránky se můžeme rychle v knize přesunout tam, kam potřebujeme, stejnou službu udělá uživateli screen readeru nadpisová osnova a oblasti stránky.

Další informace lze najít v článcích Jak definovat strukturu v HTML a proč jsem začal mít rád HTML5 tagy a Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod.

Otestovat strukturu je možné jak pomocí screen readeru, tak pomocí některého z mnoha rozšíření pro webové prohlížeče (nabízí se například Web Developer).

Bližší informace k testování pomocí screen readerů viz

Představu o tom, jak taková nadpisová osnova vypadá třeba zde na Poslepu.cz, si můžete udělat z následujícího screenshotu (uživatelé screen readerů si ji mohou vyvolat pomocí odpovídající funce svého screen readeru 🙂

Poslepu.cz: ukázka nadpisové osnovy

Barvy a dostatečný kontrast

U jednotlivých prvků na stránce musí být zajištěn dostatečný barevný kontrast mezi popředím a pozadím tak, aby prezentované informace byly dobře čitelné. Nástrojů pro otestování dostatečného kontrastu existuje celá řada. Ve videu je doporučováno aXe extension od Deque Systems. Jedná se o jednoduché rozšíření, pomocí nějž je možné provést automatický audit stránky a nechat se upozornit na možné problémy. Jednou z testovaných oblastí je i dostatečný kontrast použitých barev.

Dalším rozšířením, které k testování používám, je Accessibility Developer Tools. Funguje podobně jako aXe extension, kromě upozornění na nedostatečný kontrast ale nabízí i doporučení, jaké barvy použít, aby byly vzájemně dostatečně kontrastní.

Pokud Vám testování kontrastu na úrovni kódu přijde příliš komplikované, doporučuji vyzkoušet Colour Contrast Analyser, který nabízí uživatelsky přívětivější rozhraní.

Otázky, na které je dobré během testování najít odpovědi

  • Pokud procházím stránku z klávesnice (pomocí klávesy Tab), procházím ji ve smysluplném pořadí a dostanu se na na všechny ovládací prvky na stránce?
  • Je prvek, který získá focus, dostatečně zvýrazněn?
  • Nejsou na stránce nějaké prvky mimo viditelnou oblast, na které bych se neměl při průchodu stránky z klávesnice dostat, ale přesto se na ně dostanu?
  • Mohu projít stránku pomocí odečítače obrazovky, aniž bych někde uvízl (tj. dostal se z klávesnice na prvek, z něhož bych nemohl odejít)?
  • Mají všechny grafické prvky, které nesou významovou informaci, definován smysluplný alternativní textový popisek?
  • Jsou custom controls (prvky stránky, vytvořené na míru) přístupné a ovladatelné i pomocí odečítače obrazovky?
  • Je uživatel upozorněn v případě, že se na stránce objeví nový obsah?
  • Má stránka definovánu smysluplnou nadpisovou osnovu?
  • Je stránka vhodně strukturována pomocí oblastí stránky?
  • Je barva textu dostatečně kontrastní oproti barvě pozadí?
  • Má text ve výchozím nastavení dostatečnou velikost a je dobře čitelný?
  • Jsou odkazy v textu dostatečně (ideálně ne pouze barvou) odlišeny od okolního textu?

Testování přístupnosti jako součást vývoje webu

Na závěr videa pak zazní doporučení, se kterým nelze než souhlasit – zahrnout průběžné testování přístupnosti jako nedílnou součást vývoje webu a tím předcházet vzniku bariér.

Závěr

Tento přehled zcela jistě není vyčerpávající a nepokrývá všechny oblasti přístupnosti. Jeho hlavní výhoda a přínos spočívá v tom, že pomocí něj lze odhalit největší překážky v přístupnosti. Po jejich odstranění se tak může z webu, který bude pro uživatele se specifickými potřebami velmi obtížně přístupný, stát web, který bude vyhovovat alespoň základním požadavkům na přístupnost.