Menu

Prístupný web

Prístupná webstránka je taká, ktorú si môže prezerať každý používateľ – bez ohľadu na to, či je zrakovo postihnutý, trpí motorickými poruchami alebo používa na prezeranie stránok mobilný telefón alebo čítacie zariadenie. Prístupnosť teda nie je len o plnení zákona ale aj o tom, aby si informácie na webovej stránke ministerstva, úradu, mesta, obce alebo školy vedeli nájsť všetci občania používajúci internet bez ohľadu na postihnutie či použité zariadenie.

Zákon o prístupnosti

Zákon č. 275/2006 Z.z. nariaďuje, aby od 1. júna 2008 všetky informačné systémy verejnej správy vyhovovali štandardom – bezpečnosti, otvorenosti, prístupnosti. Medzi ne samozrejme patria aj webové stránky verejnej správy.

Verejná správa však často nemá kapacitu alebo vôľu urobiť svoje webstránky prístupnými a porušuje zákon. Neprístupné weby mali viaceré subjekty verejnej správy ešte aj v septembri 2008. Ministerstvo financií zatiaľ nikoho nepokutovalo, aj keď pokuty sľubovalo.

Najčastejšie problémy v prístupnosti

Povinné a odporúčané požiadavky s presne zadefinovanými štandardmi prístupnosti, ktoré musia spĺňať weby verejnej správy sa nachádzajú vo Výnose č. MF/013261/2008-132 (pôvodne Výnos č. 1706/M-2006) o štandardoch pre informačné systémy verejnej správy. Z našich skúseností mali (a majú) weby verejnej správy najčastejšie problémy v týchto oblastiach:

1. Kombinácia farieb popredia (textu) a pozadia má byť dostatočne kontrastná.

Ak nie sú farby popredia a pozadia dostatočne kontrastné, splývajú používateľom, ktorí trpia farbosleposťou alebo poruchami zraku. Okrem toho môžu splývať pri čiernobielom zobrazení. Riešenie tohto problému je často veľmi jednoduché.

Problematické časti stránky môžeme zistiť pomocou rôznych testov, existuje dokonca rozšírenie pre Firefox. Náprava väčšinou spočíva v úprave farieb príslušných elementov v CSS.

Na obrázku môžeme vidieť miesta na webe mesta Šaľa so slabým kontrastom farieb (orámované červeným obdĺžnikom):

Chyby v prístupnosti na webe mesta Šaľa

2. Nadpisy na webe majú vyjadrovať štruktúru a byť v kóde správne označené (hierarchicky tagmi H1 – H6).

Obsah na webe (texty, články…) je často rozdelený pomocou nadpisov. Nadpisy tvoria štruktúru dokumentov. Niekedy však bývajú označené ako nadpisy len vizuálne (veľkým písmom, hrubým fontom, inou farbou), je nevyhnutné ich však označiť aj formálne (hierarchicky pomocou HTML tagov H1 až H6). Nemali by byť tvorené napr. pomocou normálneho textu (element SPAN) a naštýlované tak, aby vyzerali ako nadpisy. Každá stránka by mala mať práve jeden hlavný nadpis (H1), ktorý vystihuje jej obsah. Časti nižšej úrovne by mali mať podnadpisy druhej úrovne H2 atď. Štruktúra nadpisov dokumentu by mala byť správne logicky usporiadaná (H3 môže byť použitý až ako podnadpis H2, nie ako podnadpis H1; H2 musí nasledovať až za H1, nesmie byť použitý skôr a podobne).

Pre ľudí, ktorí používajú čítačky obrazovky sú nadpisy dôležitým prvkom pri navigácii. Pri výskume konzorcia WebAIM, v ktorom odpovedalo viac ako 1000 používateľov s čítačkami, až 76 % opýtaných používa nadpisy na navigáciu často alebo vždy keď sa dá.

Pozrieť sa na štruktúru (nadpisov) stránky umožňuje napríklad rozšírenie pre Firefox s názvom Web Developer (Information -> View Document Outline). Pre mesto Banská Bystrica nám tento nástroj prezradil, že na úvodnej stránke sa nachádza iba jeden nadpis, a to až štvrtej úrovne (H4). Nehovoriac o tom, že znie „Príspevky občanov“.

Štruktúra nadpisov na webe mesta Banská Bystrica

Ak stránka používa CMS systém, náprava označenia nadpisov by nemala byť veľmi náročná.

3. Zoznamy (číslované a nečíslované zoznamy, navigácia) majú byť v kóde správne označené (tagmi UL, OL).

Ako zoznamy môžu byť (a mali by byť) interpretované napríklad navigačné menu, zoznam možností s odrážkami, akékoľvek značenie poradia v texte (číslovaný zoznam) a pod.

V prípade, že sú zoznamy správne označené tagmi UL alebo OL, používateľ s čítačkou ich vie správne interpretovať. Nestačí mu totiž napríklad rôzne odsadenie položiek zoznamu na pochopenie hierarchie (vo viacúrovňových zoznamoch). Pri navigačnom menu to znamená, že ho môže ľahko preskočiť a pokračovať na obsah.

4. Riadky a stĺpce v tabuľkách majú mať správne označené záhlavia (napr. pomocou TH). Každá tabuľka má mať zadefinované zhrnutie obsahu (SUMMARY). Tabuľky nemajú byť použité na definovanie rozloženia obsahu na stránke (definovanie vzhľadu).

Ak sú na stránke použité tabuľky slúžiace na organizáciu nejakých dát (dátové tabuľky), mali by mať ich riadky a stĺpce definované nadpisy (záhlavia) pomocou elementu TH.

Každá tabuľka by mala obsahovať aj zhrnutie obsahu v elemente SUMMARY.

Tabuľky by nemali byť používané na rozloženie obsahu na stránke.

Pri dodržaní týchto zásad budú tabuľky prístupnejšie a zrozumiteľnejšie pre zrakovo postihnutých používateľov používajúcich hlasové čítačky. Čítačka im prečíta zhrnutie obsahu, vďaka čomu ľahšie pochopia obsah tabuľky, ako keby ho mali dedukovať z obsahu buniek.

5. Webová stránka má byť čitateľná aj keď sú štýly vypnuté.

Nie všetci používatelia môžu webové dokumenty prehliadať aj s priradenými kaskádovými štýlmi (CSS). Preto by tieto dokumenty mali byť prístupné aj bez nich. Celý web má byť s vypnutými štýlmi bez problémov ovládateľný (navigácia by mala fungovať aj bez štýlov). Pre správne zobrazenie obsahu použite logické členenie na nadpisy, zoznamy a podobne.

Bez priradeného CSS si môžete pozrieť v prehliadači Firefox ktorúkoľvek stránku (View -> Page Style -> No Style).
Pozrime sa napríklad na stránku mesta Ružomberok s vypnutými (na obrázku vľavo) a zapnutými štýlmi (na obrázku vpravo):

Webová stránka mesta Ružomberok s vypnutými a zapnutými CSS

Hlavný nadpis na stránke znie „Vyhľadávanie“, hneď za ním nasleduje vyhľadávací formulár. Človek by si myslel, že je na stránke nejakého vyhľadávača, no je to stránka mesta Ružomberok. Pripomíname, že nadpis „Mesto Ružomberok“ je bez CSS umiestnený až na samom konci stránky.

Upraviť stránku tak, aby bola správne čitateľná a štrukturovaná aj bez CSS, väčšinou zaberie viac času. Vyžaduje totiž presúvanie rôznych častí obsahu, zmenu použitých HTML tagov a pod.

6. Formulárové políčka majú byť prepojené s príslušnými popiskami.

V HTML môžeme popis (LABEL) prepojiť s formulárovým prvkom pomocou atribútu FOR. Popis formulárových prvkov umožní ľahšie vyplnenie formulára pre všetkých používateľov. Čítačky obrazovky správne priradia popis k zodpovedajúcemu políčku formulára.

Náprava je jednoduchá:

<label for=“name“>Meno:</label><input type=“text“ id=“name“>.

7. Označenie hypertextového odkazu má byť výstižné bez ohľadu na kontext (teda nie „kliknite sem“, alebo „zobraziť dokument“ a pod.). Použite výstižný titulok odkazu.

Z označenia každého odkazu by malo byť jasné, kam odkaz smeruje, a to nezávisle na tom, aká je doterajšia používateľova skúsenosť s daným webom alebo aký je obsah okolitého kontextu. Označením odkazu máme na mysli kombináciu textu odkazu (t.j. text umiestený medzi párovým tagom <a></a>) a atribútu TITLE tagu A. Ak je to možné, mala by byť táto informácia zreteľná zo samotného textu odkazu. V prípade, kedy je výpovedná schopnosť samotného textu odkazu z nejakého dôvodu obmedzená, použite atribút TITLE so spresneným popisom.

Napríklad:

<a href=“muzeum.html“ title=“Viac informácií o Slovenskom národnom múzeu“>SNM – kontakt a otváracie hodiny</a>
<a href=“muzeum.html“ title=“Viac informácií o Slovenskom národnom múzeu“>viac informácií</a>

8. Kód webovej stránky by mal zodpovedať niektorej špecifikácii, najlepšie najmodernejšej (teda napr. XHTML 1.0 Strict).

Kód stránky by mal byť spĺňať štandardy W3C. Validný kód (taký, ktorý spĺňa štandardy W3C) je čitateľnejší pre vyhľadávače, prehliadače ho vedia jednoduchšie spracovať a zobraziť a má menšiu veľkosť, čo znamená, že prehliadače ho vedia rýchlejšie stiahnuť. Niektoré pomocné technológie (napr. hlasové čítačky) môžu mať so sprístupnením nevalidných stránok problémy.

Validita kódu sa dá jednoducho skontrolovať nástrojom http://validator.w3.org (prípadne českým http://validator.w3.cz). Tieto nástroje okrem upozornenia na chyby navrhnú aj spôsob nápravy.

9. Majú byť používané META-informácie na pridanie sémantických informácií jednotlivým stránkam (titulok (TITLE), popis (DESCRIPTION)…).

Pri stránkach so správne zadefinovaným titulkom, prípadne popisom je používateľovi hneď jasný aj ich obsah. Horšie je to vtedy, keď všetky stránky webu majú rovnaký (prípadne žiadny) titulok.

Stránky na webe mesta Bardejov majú všetky rovnaký titulok – „.: Mesto Bardejov :.“ (nezmyselne doplnený bodkami a dvojbodkami), ktorý o obsahu nehovorí nič (keďže sa nachádzame na podstránke Primátor mesta):

Titulky na webe mesta Bardejov

Na stránkach, ktoré bežia na CMS sa väčšinou titulky podobne ako nadpisy dajú jednoducho generovať.

Užitočné odkazy k prístupnosti

Pizza SEO a prístupnosť webov verejnej správy

Spoločnosť Pizza SEO ponúka konzultácie v oblasti prístupnosti a venuje sa jej aj vo svojej vstupnej službe – Effective Web Audit. Stránka PizzaSEO.com bola Ministerstvom financií v roku 2007 vyhodnotená ako jediná stránka súkromného subjektu spĺňajúca všetky štandardy prístupnostiAudit prístupnosti sme vypracovali napríklad aj pre mesto Malacky.

Poznámka: článok bol aktualizovaný s uvedením nového Výnosu č. MF/013261/2008-132, ktorý nahradil pôvodný výnos z roku 2006.

  • Jozef Benko

    „Validný kód (taký, ktorý spĺňa štandardy W3C) je čitateľnejší pre vyhľadávače, prehliadače ho vedia jednoduchšie spracovať a zobraziť a má menšiu veľkosť, čo znamená, že prehliadače ho vedia rýchlejšie stiahnuť.“

    Toto nie je tak celkom pravda. Veľkosť kódu nezávisí od toho, či je validný alebo nie. Takisto nie je možné predpokladať, že validný kód sa vykreslí rýchlejšie ako nevalidný.

    No a rozhodne by som viac vyzdvihol sémantiku kódu. V článku bolo spomenutých pár elementov (zoznamy, nadpisy a tabuľky). Ale sémantika samotná zahŕňa omnoho viac a je úzko spätá s prístupnosťou.

  • shaggy

    Fajn článok, len škoda, že nejde o najčastejšie chyby. Dovolím si upresniť niekoľko nesprávnych informácií.
    Tabuľkový layout (bod 4) nie je vôbec závažná chyba. Problém by nastal iba v prípade, že by jednotlivé stĺpce/riadky mali definované hlavičky (tag TH), čiže by to čítačky chápali ako dátovú tabuľku. Ak je stránka zle navrhnutá (usporiadanie blokov), je jedno či je zle usporiadaná v tabuľkách, alebo je zle formátovaná pomocou štýlov (absolútne pozicovanie a strata kontextu).

    Validita (bod 8) – je pravda, že by stránka mala spĺňať špecifikácie, ale drobné chyby neznižujú prístupnosť stránok + špecifikácie HTML4 a XHTML1 sú rovnako staré.

    Description (bod 9) – je dobré, ak to stránka má, nie je to povinné. Bežný návštevník to nevidí.

    Bohužiaľ sa tu nespomenuli skutočné chyby, ktoré sa vyskytujú na verejných stránkach – chýbajúce alternatívne texty (pri obrázkoch, videách…) patria k najväčšiemu problému na týchto stránkach. Rovnako nadmerné využívanie JavaScriptov, bez akejkoľvek alternatívy. A veľká chyba je používanie grafickej Captcha ochrany. Určite je to väčšia chyba ako nepodstatný meta tag Description.

  • Ján

    Ako si napísal v úvode, shaggy, v článku ide o najčastejšie chyby, nie najzávažnejšie. O závažnosti nepadlo ani slovo. Z našich skúseností sú najčastejšie práve tieto. Článok je adresovaný najmä správcom webov verejnej správy – má poskytnúť info o častých chybách a naznačiť riešenie.

    Určite väčšou chybou ako napr. chýbajúci TITLE stránky je, keď je na webe menu z obrázkov bez alternatívnych textov, ktoré funguje len so zapnutým JavaScriptom. To však dnes už nie je doménou väčšiny webov, chvalabohu.

  • shaggy

    Ja vychádzam z testovania pre Ministerstvo Financií SR – tie chyby, ktoré som spomenul sú najvážnejšie, ale zároveň boli aj najčastejšie na testovaných verejných weboch. Absencia atribútov ALT pri obrázkoch je takmer pravidlom. A napr. JavaScriptové menu bez čisto-html alternatívy je tiež veľmi bežným javom.
    Ale myslím, že sa zhodneme na tom, že tých chýb je toľko, že sa do jedného článku nezmestia :)

  • Jozef Benko

    „Článok je adresovaný najmä správcom webov verejnej správy – má poskytnúť info o častých chybách a naznačiť riešenie.“

    Pochybujem, že splní práve takúto funkciu.

  • Ján

    Uvidíme…

  • Jozef Benko

    Skôr myslím, že článok pomôže pri výchove neposlušných web designerov a developerov. .)

  • Jozef

    Trochu neaktuálne údaje na to, že bol článok vydaný koncom februára 2009. Ako spoločnosť, ktorá chce vystupovať a riešiť tieto veci, by to mala vedieť.

  • Ján

    Dakujeme za pripomienku Jozef. Poziadavky z noveho vynosu sa lisia od tych z povodneho vynosu len minimalne (povodne boli len vypisane body z WCAG 1.0, teraz su aj upravene, prelozene). Pri praci sa vsak opierame najma o WCAG (a porovnavame ich z vynosom), kde su poziadavky presne zadefinovane.

  • Daniel

    Suhlasím s tým, že sa odvolávate na neplatný výnos. Zároveň odvolávku na tento neplatný výnos rozposielate aj primátorom miest s cenovou ponukou na „audit“.

    Doporučujem prečítať si § 43 nového výnosu č. MF/013261/2008-132

    § 43
    Zrušovacie ustanovenie
    Zrušuje sa výnos Ministerstva dopravy, pôšt
    a telekomunikácií Slovenskej republiky zo
    14. júla 2006 č. 1706/M-2006 o štandardoch
    pre informačné systémy verejnej správy (oznámenie
    č. 464/2006 Z. z.).

  • Daniel

    @Daniel: Dobrý deň, ako už uviedol aj môj kolega vyššie, článok aj list sme koncipovali ešte pred tým, ako bol nový výnos zverejnený. Zákon a podstata pravidiel prístupnosti (kopírujuca WCAG 1.0) zostávajú nezmenené, čiže klient dostáva audit podľa platného zoznamu. Ďakujeme za uvedenie citácie zo zákona, uvádzané číslo výnosu zmeníme.

  • Anonym

    Fajn clanok