Metodické doporučení ke zlepšení technické přístupnosti IS/STAG

Transkript

1 Metodické doporučení ke zlepšení technické přístupnosti IS/STAG Pro potřeby Pracovní skupiny k přístupnosti informačních systémů na vysokých školách AP3SP zpracoval mgr. Radek Pavlíček, Masarykova univerzita revize č. 1 (17. ledna 2016) zdroj dokumentu: referenční dokument pracovní skupiny:

2 OBSAH Testování Testované oblasti Testované stránky Obecný závěr Doporučení ke zlepšení přístupnosti v jednotlivých oblastech TITULEK STRÁNKY Závěr STRUKTUROVÁNÍ OBSAHU STRÁNKY Nadpisy Seznamy OVLADATELNOST Z KLÁVESNICE NAVIGACE V RÁMCI WEBU Konkrétní příklady řešení ODKAZY NEZÁVISLOST NA VIZUÁLNÍM VNÍMÁNÍ A ROZLOŽENÍ INFORMACÍ DOSTATEK ČASU NA PRÁCI S WEBEM GRAFICKÉ PRVKY ČITELNOST A DOSTATEČNÝ KONTRAST FORMULÁŘE

3 TABULKY

4 Testování IS/STAG Testované oblasti Při testování jsem kladl důraz na odhalení případných chyb a poskytnutí doporučení k nápravě v následujících stěžejních oblastech z hlediska přístupnosti: Titulek stránky Strukturování stránky Ovládání webu z klávesnice Navigace v rámci webu Odkazy Nezávislost na vizuálním vnímání Dostatek času na práci s webem Grafické prvky Čitelnost a barevný kontrast Formuláře Tabulky Testované stránky Testování proběhlo na vybraných stránkách demonstračního portálu systému studijní agendy IS/STAG na adrese Obecný závěr Webové rozhraní systému studijní agendy IS/STAG vykazuje vážné nedostatky z pohledu přístupnosti pro uživatele se specifickými nároky. Mezi nejvážnější patří absence strukturování obsahu stránek pomocí nadpisů (eventuálně technik z metodiky WAI ARIA), závislost na vizuálním vnímání či schopnosti rozpoznávat barvy, nedostatečný barevný kontrast, malé a obtížně čitelné výchozí písmo, atp. Tématem k řešení/diskusi zůstávají netechnické oblasti, které toto metodické doporučení nepokrývá - například orientace ve velkém množství dat, které jsou v řadě agend IS/STAG prezentovány.

5 Doporučení ke zlepšení přístupnosti v jednotlivých oblastech TITULEK STRÁNKY Titulek webové stránky (značka <title> v sekci <head>) je jedním z nedůležitějších prvků pro správnou orientaci na webových stránkách. Titulek stránky charakterizuje její obsah ještě před tím, než se uživateli odprezentuje. Titulek stránky by měl být jasný, jednoznačný a výstižný. Do značky title je třeba umístit název stránky včetně názvu webu, jehož je stránka součástí. Stávající řešení <title>název webu Název stránky</title> poskytuje uživateli informaci o tom, na jakém stránce i na jaké webu webu se uživatel nachází a lze je tedy (s ohledem na krátký název webu - Portál DEMO ZCU) považovat za vyhovující. Závěr Titulek stránky v podobě Název webu Název stránky lze považovat za vyhovující, protože uživateli poskytuje obě důležité informace - na jaké stránce a na jakém webu se právě nachází. STRUKTUROVÁNÍ OBSAHU STRÁNKY Strukturování obsahu webové stránky patří k základním požadavkům, zajišťujícím snadnou přístupnost pro uživatele se zdravotním či jiným handicapem. Správné strukturování korektně vyznačenými nadpisy (HTML elementy h1 až h6) jednotlivých částí pomáhá uživatelům v porozumění tomu, jak je obsah stránky rozvržen, a umožňuje jim také rychle se přesunout právě na tu část stránky, kterou potřebují. Více informací o strukturování pomocí nadpisů lze najít na Podobně, jako je důležité vyznačit nadpisy, je třeba vyznačit i ty části textu, které jsou ze své podstaty seznamem. Uživatel je pak v takovém případě lépe a jednoznačně informován o tom, jaký je mezi položkami vzájemný vztah a může se také mezi nimi efektivněji pohybovat. Nadpisy Ve stávajícím řešení nejsou nadpisy prakticky vůbec použity, což významně ztěžuje orientaci v systému uživatelům odečítačů obrazovky. Pokud už značky pro nadpisy použity jsou, je tak

6 učiněno pouze pro vizuální zvýraznění konkrétních částí textu, ne pro vyznačení struktury obsahu stránky. Vhodně skryté nadpisy pak nejsou použity ani pro vyznačení bloků s menu na jednotlivých stránkách. Seznamy Pro vyznačení položek bloků s menu jsou korektně použity značky pro seznamy..

7 Absence strukturování obsahu stránek pomocí nadpisů je pro uživatele odečítačů obrazovky velkou překážkou v efektivní práci v IS/STAG. Doporučuji proto strukturování pomocí nadpisů doplnit a uživatelům tak poskytnout tento základní orientační mechanismus. OVLADATELNOST Z KLÁVESNICE Celá řada uživatelů nemá možnost pracovat s webem pomocí myši či dotykovým ovládáním. Proto je třeba, aby byl web plně ovladatelný z klávesnice. Uživatel se musí z klávesnice dostat na každý prvek, který může získat focus, a musí jej být schopen z klávesnice ovládat. Většina prvků v rozhraní je bez problémů přístupná z klávesnice, výjimkami jsou prvky Dohledávač, atp., na které se mi nepodařilo přistoupit z klávesnice a stejným způsobem je ovládat. Problematickou oblastí je ale absence vizuálního zvýraznění prvku, který získá focus při ovládání webu z klávesnice. Stávající řešení tuto situaci ošetřuje pouze částečně. Vizuální zvýraznění je realizováno pouze pomocí systémového zvýraznění kurzoru, což pro celou řadu uživatelů nemusí být dostačující. Tuto skutečnost lze snadno ověřit průchodem stránkou opět pomocí klávesy tabulátor. U většiny prvků dochází ke zvýraznění pouze při ovládání stránky pomocí myši. Ukázka vizuální indikace prvku, který získal focus z klávesnice (IS/STAG) a pomocí myši (Uchazeč) Na webu také chybí přeskakovací (skip to) odkazy na důležité části stránky (menu, hlavní obsah). Obsah tooltipů (nápovědných bublin) je přístupný pouze pro uživatele, který s webem pracují pomocí myši. Uživatelé, používající k ovládání webu klávesnici, se s jejich obsahem nemají možnost seznámit.

8 Doporučuji implementovat zvýraznění prvku, který je právě vybrán při ovládání webu z klávesnice, a usnadnit tak uživatelům orientaci na stránce. Způsob jeho zvýraznění může být shodný s tím, který je nyní použit pro zvýraznění při ovládání webu pomocí myši, případně je možné právě aktivní prvek ještě více zvýraznit. Více informací viz Doporučuji také implementovat přeskakovací (skip to) odkazy na konkrétní části stránky. Návrh řešení viz Doporučuji také důležité informace poskytovat jinak, než ve formě tooltipů, s jejichž obsahem se nemají možnost seznámit ti uživatelé, kteří web ovládají výhradně/převážně z klávesnice. Více informací viz Doporučuji také zpřístupnit z klávesnice ty prvky rozhraní, které momentálně přístupné nejsou. NAVIGACE V RÁMCI WEBU Navigace je stěžejním prvkem každého webu. Navigační odkazy uživatel používá k pohybu mezi jednotlivými webovými stránkami, postupuje pomocí nich stromovou strukturou dolů, nahoru či do strany. Aby byla navigace pro uživatele dobře použitelná, musí být vytvořena jednoduchým a intuitivním způsobem, jednotlivé navigační odkazy nesmí být příliš dlouhé, musí být srozumitelné a výstižně vyjadřovat, kam vedou. Uživateli také musí být z navigace zřetelné, v jakém místě struktury se právě nachází. Navigační části na stránkách nejsou uvozeny vhodně skrytými nadpisy a přístup k nim je tak ztížen pro uživatele, kteří jako primární navigační mechanismus pro pohyb po stránce používají právě nadpisy.

9 Konkrétní příklady řešení Vhodně skrytými nadpisy nižší úrovně by bylo vhodné vyznačit následující části webu: Jedná se zejména o bloky s menu, dle potřeby se pak nabízí například uvést vhodně skrytým nadpisem i blok s časovým limitem, atp. Web obsahuje celou řadu nabídek/menu, které nejsou korektně uvozeny (vhodně skrytými) nadpisy. Kvůli lepší navigaci v rámci webu pro uživatele, kteří tuto techniku využívají, doporučuji proto i navigační části uvést vhodně skrytými nadpisy, eventuálně k jejich vyznačení použít role= navigation ze specifikace WAI-ARIA. Bližší informace viz např.

10 ODKAZY Odkazy jsou základem hypertextu a umožňují uživatelům pohyb mezi stránkami. Z textu každého odkazu musí uživatel poznat, kam odkaz vede a co může na cílové stránce očekávat. Text odkazu musí proto být dostatečně výstižný. V případě, že odkaz vede na jiný typ obsahu, než je webová stránka, tj. například na soubory ve formátu PDF, je tato skutečnost zřejmá z označení odkazu. Odkazy jsou od okolního textu dostatečně odlišeny podtržením a barvou a uživatelé by tak s jejich identifikací neměli mít žádný problém. NEZÁVISLOST NA VIZUÁLNÍM VNÍMÁNÍ A ROZLOŽENÍ INFORMACÍ Ne všichni uživatelé jsou schopni vnímat a rozpoznat barvy. Mohou jim tak uniknout souvislosti, které jsou na webu zvýrazněny pouze barvou, určeny vizuálním rozložením, ale tyto vazby nejsou programově určitelné, tzn. nejsou korektně vyznačeny ve zdrojovém kódu. V celé řadě agend jsou použity barvy jako jediné odlišovací kritérium.

11 Na některých místech je také uživatel odkazován na obsah vlevo/vpravo, což nemusí být pro uživatele odečítacích programů či při práci s IS/STAG z mobilního zařízení srozumitelné. Pokud to charakter sdělovaných informací dovoluje, doporučuji se při prezentování informací v maximální možné míře zbavit závislosti na barvách a/nebo vizuálním vnímání rozložení informací. DOSTATEK ČASU NA PRÁCI S WEBEM Ne všichni uživatelé jsou schopni pracovat s webem rychle. Příkladem mohou být uživatelé asistivních technologií, které jim informace překládají lineárně. Je proto důležité poskytnout uživatelům dostatek času k přečtení a k práci s obsahem webu.

12 Pro tuto skupinu uživatelů je také důležité, aby při procházení či interakci s webem samovolně nedocházelo k obnovování obsahu stránky, aniž by uživatel tuto akci vyvolal, či o ní nebyl informován dopředu informován. Pro práci se systémem je definován časový limit, který ale je možné prodloužit. Stávající řešení lze s ohledem na automatické prodloužení přihlášení až na dobu 90 minut považovat za vyhovující. GRAFICKÉ PRVKY Grafické prvky jsou dnes důležitou součástí každého webu, a proto je potřeba, abychom se při jejich používání vyvarovali chyb, které by mohly zamezit získání takto publikované informace handicapovanými uživateli. Celá řada uživatelů není schopna vizuálně vnímat grafické prvky, které jsou umístěny na webových stránkách. Veškeré grafické prvky na stránkách, které nesou informaci, musí mít proto definovánu relevantní textovou alternativu. Použité grafické prvky ve většině případů mají definovánu relevantní textovou alternativu. Výjimkami jsou například pikrogramy u odkazů či prvky které při vypnutém zobrazování obrázků zmizí z rozhraní.

13 Doporučuji definovat relevantní textovou alternativu u všech prvků, které nesou významovou informaci či slouží jako ovládací prvky rozhraní. ČITELNOST 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é. Důležité je také definovat dostatečnou výchozí velikost písma a umožnit jeho zvětšování pomocí prostředků prohlížeče. Výchozí velikost písma (typicky 11 px) nelze považovat za dostačující. Bližší informace viz Ve webovém rozhraní se také velmi často vyskytuje písmo s barevným kontrastem, který není oproti pozadí dostatečně kontrastní. Doporučuji zvětšit velikost písma na alespoň ve výše odkazovaném průzkumu 14 px a také se v maximální možné míře vyvarovat používání kombinací barev, které nejsou vzájemně dostatečně kontrastní.

14 FORMULÁŘE U každého formulářového prvku (tj. značky <textarea>, <input type="text">, <input type="radio">, <input type="checkbox"> a <select>) si musí být tvůrce/správce webové stránky jistý, že uživatel bez obtíží pozná, co má do daného prvku vyplnit nebo zvolit. Proto musí mít každý prvek uvedený svůj popisek, ve kterém je jednoznačně uvedeno, jak s prvkem zacházet. V některých výstupních zařízeních je však vazba mezi formulářovým prvkem a jeho nadpisem obtížně rozpoznatelná, proto musí být všechny popisky ke svým formulářovým prvkům jednoznačně přiřazeny pomocí značky <label> a vazebních atributů for (u značky <label>) a id (u značky formulářového prvku). Formuláře musí také být bez obtíží přístupné a ovladatelné z klávesnice. Další informace webaim.org/techniques/forms/ Formuláře v rámci webu jsou z technického úhlu pohledu řešeny přístupně, ve všech testovaných agendách měly formulářové prvky korektně přiřazeny své popisky pomocí značky label a vazebních atributů for a id. V technické rovině lze formuláře považovat za přístupně vytvořené. TABULKY Tabulky jsou primárně určeny k zobrazení tabulárních dat (křížově závislých údajů) a takto s nimi nakládají i asistivní technologie, které se snaží např. nevidomým uživatelům prezentovat tabulky co nejpochopitelnější formou. Takové tabulky proto musí obsahovat prvky <th>, kterými jsou vyznačena záhlaví řádků nebo sloupců a které jsou pomocnými zobrazovacími technologiemi prezentovány před každým řádkem/sloupcem, či dokonce před každou buňkou tabulky. V celé řadě agend jsou prezentována informace formou tabulek. Ty ve většině případů dávají smysl při čtení po řádcích zleva doprava, takže by se seznámení se s jejich obsahem neměli mít uživatelé problém. Jednoduché tabulky, na které jsem narazil ve vybraných agendách, nevykazují z hlediska přístupnosti žádné vážné nedostatky, které by bránily uživatelům seznámit se s jejich obsahem.