Z top SEO firmy na kompletné riešenie vo výkonnostnom marketingu
rebranding logo
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.