Přístupný web

16. 7. 2014

Čtvrtý den Letní školy patřil Inkluzivnímu designu, neboli informačním službám pro uživatele se specifickými potřebami. Primárně byli na mysli handicapovaní uživatelé, později jsme se však dozvěděli, že tento design pomáhá všem uživatelům.

Zúčastnila jsem se přednášky a následně workshopu magistra Pavlíčka, odborníka na webovou přístupnost a člověka stojícího za projektem Blind Friendly Web. Dozvěděli jsme se o pěti pilířích přístupnosti (dostupnost, ovladatelnost, srozumitelnost, orientace, čas), proč má význam se této oblasti věnovat a příklady z praxe. Padla otázka na počet uživatelů s postižením, tedy těch, kterým je přístupný web určen. Přesná čísla nejsou známa, avšak z odpovědi vyplynulo, že takový web pomůže mnohem širšímu okruhu uživatelů1. Například seniorům, dětem či lidem s poruchami učení, jak bylo během workshopu řečeno. Já dodávám, že přístup k informacím je jedna z podmínek demokracie. I proto by přístupnost webových stránek neměla být opomíjena.

Jestliže se rozhodnete svůj web zpřístupnit, můžete:

a) Použít některou z volně dostupných metodik a podle nich si stránky sami upravit.

b) Obrátit se například na pražskou firmu Dobrý web, H1.cz, Adaptic či TyfloCentrum Brno, o.p.s., které testování přístupnosti nabízí.

Magistr Pavlíček říká: Za přístupný web lze dnes považovat takový web, který bude handicapovaný návštěvník schopen i přes svůj zdravotní handicap, za pomoci prostředků, které má k dispozici, a způsobem, který mu vyhovuje, efektivně používat a dosáhnout svého cíle.“2 Jinými slovy by postižení nemělo být překážkou v uspokojení informační potřeby. Jak a zda se tuto premisu podařilo naplnit, jsem se rozhodla zjistit skrz přístupnostní analýzu homepage vybraných stránek. Mým cílem bylo seznámit se s oficiálními pravidly tvorby přístupného webu, pochopit je a zhodnotit podle nich několik webových stránek, které by s velkou pravděpodobností používal slabozraký student KISKu.

Nejprve jsem prostudovala příslušné dokumenty. Jednalo se o tyto:

  • Web Content Accessibility Guidelines 2.0 od W3C - Hned v úvodu mne zaujalo, že pravidla jsou určena k zpřístupnění obsahu nejen slabozrakým uživatelům: „Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.“3

  • Část této metodiky je přeložena do češtiny zde: http://blindfriendly.cz/wcag20 (výpis požadavků); na adrese http://blindfriendly.cz/wcag20checklist lze najít pravidla přiřazená k úrovním WCAG 2.0 (A až AAA). Lidé z projektu Blind Friendly Web tuto metodiku doporučují.

  • Vyhláška č. 64/2008 Sb. od Ministerstva vnitra ČR – Dle ní musí být vytvořeny stránky související s veřejnou správou. Obsahuje problematické pasáže, proto je vhodnější se řídit jinou metodikou.

  • Accessible Rich Internet Applications 1.0 od W3C – „Je nástroj, který pomáhá zlepšit sémantiku webu či webové aplikace a tím poskytnout asistivním technologiím informace, které jim HTML dát nemůže.“4

  • Metodika Blind Friendly Web 2.3 od magistra Pavlíčka – Obsáhlá a srozumitelná práce.

  • Pravidla přístupnosti MI ČR, na které pan Pavlíček spolupracoval – Vychází z metodik WCAG 1.0, Section 508 a Blind friendly web. Od roku 2008 nahrazeno Vyhláškou č. 64/2008 Sb. Do roku 2008 se používal jako zdroj pravidel tvorby stránek institucí veřejné správy.5
  • Manifest Dogma W4 od čtyř webdesignérů – Stručný dokument z roku 2003, jehož využití předpokládám u stránek, které nemají povinnost držet se aktuálních standardů.

Pro můj účel a vzhledem k výši odbornosti v tematice jsem si vybrala článek 12 požadavků na přístupnost, které hodně pomohou a moc nestojí6. Z něj jsem převzala kritéria, která jsem u výše uvedených stránek hodnotila.

 

Web knihovny FF MU (http://knihovna.phil.muni.cz/)

1) Sémantika

Nadpisy pouze h1-h2, odstavce zaznačeny, seznamy v pořádku.

2) Důležité grafické prvky nesou popis atributem „alt“

V pořádku.

3) Dostatečný barevný kontrast a čitelnost textu

Homepage prošla testem Colour Contrast Analyser.

4) Ovladatelnost klávesnicí a zvýraznění procházené oblasti

Při procházení tabulátorem se nic nezvýrazní, funkčnost je však zachována. Při najetí kurzorem se zvýrazní vše.

5) Správně vytvořené formuláře

U „Zeptejte se nás“ by mohlo být v prázdném poli napsáno například „Vaše sdělení“ nebo „Váš dotaz“.

6) Správně vytvořené tabulky

V pořádku.

7) Konzistentní navigace

Drobečkové vyhledávání.

8) Odlišení odkazů

Odkazy odlišeny.

9) Nezávislost informací na vizuální publikaci

Pravděpodobně v pořádku.

10) Zvukový podkres stránky

Není. V pořádku.

11) Funkčnost a dostupnost informací i při vypnutém Javascriptu

V pořádku.

12) Přístupnost flashových objektů

Žádný flash na stránce.

13) Poznámka

Chybí nastavení velikosti písma i volba verze pro slabozraké.

 

Web Moravské zemské knihovny (http://www.mzk.cz)

1) Sémantika

Chybí úroveň nadpisu h1 (dále jsou obsaženy h2-h3), odstavce zaznačeny, seznamy v pořádku.

2) Důležité grafické prvky nesou popis atributem „alt“

V pořádku.

3) Dostatečný barevný kontrast a čitelnost textu

Neprošla tyrkysovo bílá část, zelený rámeček s bílým textem, Kalendář akcí, rámeček s otevírací dobou. Písmo ve spodním tmavém rámu by mohlo být větší.

4) Ovladatelnost klávesnicí a zvýraznění procházené oblasti

Při procházení tabulátorem se nic nezvýrazní, funkčnost je však zachována. Při najetí kurzorem se zvýrazní vše.

5) Správně vytvořené formuláře

V pořádku.

6) Správně vytvořené tabulky

V neviditelné tabulce je otevírací doba. Je to proto malá tabulka. Snad v pořádku.

7) Konzistentní navigace

Drobečkové vyhledávání. Mapa webu by byla užitečná.

8) Odlišení odkazů

Odkazy odlišeny, ale o otevření v novém okně nepadne žádné upozornění.

9) Nezávislost informací na vizuální publikaci

Pravděpodobně v pořádku.

10) Zvukový podkres stránky

Není, ale v jednom rámečku běží upoutávky na akce. Pomalým tempem, takže by to nemělo představovat problém.

11) Funkčnost a dostupnost informací i při vypnutém Javascriptu

V pořádku.

12) Přístupnost flashových objektů

Žádný flash na stránce.

13) Poznámka

Chybí nastavení velikosti písma i volba verze pro slabozraké.

 

Informační systém MU (https://is.muni.cz/)

1) Sémantika

Nadpisy h1-h3, odstavce zaznačeny, seznamy v pořádku.

2) Důležité grafické prvky nesou popis atributem „alt“

V pořádku.

3) Dostatečný barevný kontrast a čitelnost textu

V pořádku.

4) Ovladatelnost klávesnicí a zvýraznění procházené oblasti

Procházení tabulátorem vyvolá zvýraznění rámečkem, při najetí kurzorem odkaz změní barvu – v pořádku.

5) Správně vytvořené formuláře

V pořádku.

6) Správně vytvořené tabulky

Tabulka na stránce není použita.

7) Konzistentní navigace

V pořádku.

8) Odlišení odkazů

Odkazy odlišeny, ale o otevření v novém okně nepadne žádné upozornění, až na ikonu u jednoho jediného odkazu.

9) Nezávislost informací na vizuální publikaci

Pravděpodobně v pořádku.

10) Zvukový podkres stránky

Není. V pořádku.

11) Funkčnost a dostupnost informací i při vypnutém Javascriptu

V pořádku.

12) Přístupnost flashových objektů

Žádný flash na stránce.

13) Poznámka

Chybí nastavení velikosti písma i volba verze pro slabozraké.

 

IDOS – jízdní řády (http://jizdnirady.idnes.cz/idsjmk/spojeni)

1) Sémantika

Chybí úroveň nadpisu h1 (dále jsou obsaženy h2-h4), odstavce zaznačeny, seznamy v pořádku.

2) Důležité grafické prvky nesou popis atributem „alt“

V několika altech se objevuje otazník.

3) Dostatečný barevný kontrast a čitelnost textu

Verze pro nevidomé prošla v pořádku.

4) Ovladatelnost klávesnicí a zvýraznění procházené oblasti

Stránka je tabulátorem ovladatelná.

5) Správně vytvořené formuláře

U hlášky „Pokračujte výběrem požadované záložky.“ bych uvítala nápovědu, která záložka zbývá odškrtnout.

6) Správně vytvořené tabulky

V pořádku.

7) Konzistentní navigace

V pořádku, odhlédnu-li od faktu, že na mne systém působil jako nefunkční a místy jsem si nebyla jistá dalším krokem.

8) Odlišení odkazů

Odkazy odlišeny, ale o otevření v novém okně nepadne žádné upozornění.

9) Nezávislost informací na vizuální publikaci

Pravděpodobně v pořádku.

10) Zvukový podkres stránky

Není. V pořádku.

11) Funkčnost a dostupnost informací i při vypnutém Javascriptu

V pořádku.

12) Přístupnost flashových objektů

Žádný flash na stránce.

13) Poznámka

Dole na stránce se nachází volba zobrazení pro nevidomé. Volba by mohla být zvýrazněna, nebo alespoň stát mimo seznam. Toto zobrazení obsahuje ikonu Blind Friendly Webu. Výborně!

 

Pro testování přístupnosti je dále možné využít některý z validátorů. Například Wave7 nebo Cynthia Says8, kerý se mi však nepodařilo zprovoznit. Pro získání kvalitního výstupu by měl člověk ovládat jazyk HTML nebo ještě lépe k tomu mít během validace k dispozici autora stránky, který může vysvětlit hlášené chyby, které chybou nemusí být.

Jaké lze vyvodit závěry? Jsou tři.

  • Žádná ze stránek nedopadla výrazně špatně, ostatně to jsem ani neočekávala. Na druhou stranu mne zarazilo, že ikonu Blind Friendly Webu vlastní pouze IDOS. Avšak vzhledem k existenci Střediska Teiresiás se domnívám, že toto nějakým způsobem přístupnost stránek zajišťuje a proto není důvod se obávat, že by potřeby handicapovaných studentů zůstaly bez povšimnutí.

  • Udělat svůj web přístupným může být otázkou vlastního počinu nebo zadání profesionální firmě. Sama jsem si vyzkoušela, že základy se bez cizí pomoci dají zvládnout. Jestliže si ale chceme být přístupností jistí, cesta by měla vést k odborníkům.

  • Zájmy uživatelů s postižením bychom neměli přehlížet a podceňovat. Ochuzení o jeden či více smyslů neznamená, že se daný člověk nechce vzdělávat či prostě surfovat po internetu. Někdo by mohl namítnout, že postižení lidé nepředstavují početnou cílovou skupinu a nemá proto smysl jim webové stránky přizpůsobovat, což považuji za diskriminující. Takto uvažující člověk by si měl uvědomit, že přístupný web může být užitečný i pro něj, když bude ovládat „..PC jen z klávesnice třeba proto, že si minulý týden zlomil na horách ruku.“9

Zajímá Vás..

 

Použité zdroje:

1Kolik vlastně je handicapovaných uživatelů webu?. In: Http://poslepu.blogspot.cz [online]. 2010 [cit. 2014-07-08]. Dostupné z: http://poslepu.blogspot.cz/2010/04/kolik-vlastne-je-handicapovanych.html

27 aspektů, které mají vliv na přístupnost. In: PAVLÍČEK, Radek. Www.zdrojak.cz [online]. 2009 [cit. 2014-07-08]. Dostupné z: http://www.zdrojak.cz/clanky/7-aspektu-ktere-maji-vliv-na-pristupnost/

3Web Content Accessibility Guidelines (WCAG) 2.0. [online]. 2008 [cit. 2014-07-10]. Dostupné z: http://www.w3.org/TR/WCAG20/#contents

4WAI ARIA 1.0 byla vydána jako doporučení W3C. In: PAVLÍČEK, Radek. Zdrojak.cz [online]. 2014 [cit. 2014-07-10]. Dostupné z: http://www.zdrojak.cz/clanky/wai-aria-1-0-vydana-doporuceni-w3c/

5Metodiky. In: [online]. [cit. 2014-07-10]. Dostupné z: http://blindfriendly.cz/metodiky

612 požadavků na přístupnost, které hodně pomohou a moc nestojí. In: PAVLÍČEK, Radek. Poslepu [online]. 2009 [cit. 2014-07-10]. Dostupné z: http://poslepu.blogspot.cz/2009/11/12-pozadavku-na-pristupnost-ktere-hodne.html

7WAVE. [online]. [cit. 2014-07-10]. Dostupné z: http://wave.webaim.org/

8Cynthia Says. [online]. [cit. 2014-07-10]. Dostupné z: http://www.cynthiasays.com/

9Kolik vlastně je handicapovaných uživatelů webu?. In: Http://poslepu.blogspot.cz [online]. 2010 [cit. 2014-07-10]. Dostupné z: http://poslepu.blogspot.cz/2010/04/kolik-vlastne-je-handicapovanych.html

Líbil se vám článek?
Stáhnout článek v PDF

1 komentář

Obrázek uživatele Anonym
Anonym
22. 7. 2019

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees manufacturers</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees manufacturers</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

https://www.madheswaransilkshop.com<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees manufacturers</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a><br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees manufacturers</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

<br><a href="https://www.madheswaransilkshop.com">kanchipuram silk sarees</a>

 

Přidat komentář

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Přečtěte si také

Přihlášení Registrace
RSS Facebook Twitter YouTube
Zobrazit standardní verzi webu

Taky děláme

Feedback