Štandardy prístupnostiwebových stránok

Základné pravidlá podľaZbierky zákonov 312/2010

1. Farebnosť a základné rozloženie stránky

• Všetky informácie sú prístupné a zrozumiteľné aj bez farieb• Farebné kombinácie popredia a pozadia sú dostatočne kontrastné

– http://juicystudio.com/services/luminositycontrastratio.php

• Rozloženie stránky je riadené kaskádovými štýlmi– Hodnoty rozmerov sú uvádzané v relatívnych jednotkách (em, ex)– Absolútne jednotky (pt, pc, in, cm, mm, px) sa nepoužívajú ak to nie je nevyhnutné– Veľkosť písma v CSS je určená:

• Kľúčovými slovami xx-small, x-small, small, medium, large, x-large, xx-large alebo hodnotami smaller a larger• Percentuálne alebo jednotkami em a ex

• Štruktúru dokumentu definuje logické zoradenie nadpisov <h1-6>– Nadpisy sa nepoužívajú pre obsah, ktorý nezodpovedá ich významu

• Na stránke sú správne použité zoznamy, vrátane navigácie• Citácie sú zvýraznené použitím prvku <blockquote>• Úvodzovky sa nepoužívajú na formátovanie a odsadenie textu

1. Farebnosť a základné rozloženie stránky

• Funkčnosť stránky je nezávislá na zariadení, použiteľnosti klávesnice, dotykového alebo hlasového vstupu a podobne

• Dlhšie stránky sú rozdelené do blokov a sú prítomné navigačné prvky na preskakovanie jednotlivých častí stránky

• Ak má štruktúra stránok viac ako jednu úroveň, používa sa navigačné menu („breadcrumb“) pomocou ktorého je možné posúvať sa na ľubovoľnú vyššiu úroveň

• Úvodná stránka jednoznačne popisuje zmysel a účel webového sídla– Je z nej zrejmé, o aký typ prezentácie ide, jej cieľ a názov– Obsahuje informácie o technickom prevádzkovateľovi, správcovi obsahu a

vlastníkovi

2. Pravidlá tvorby HTML obsahu a skriptov

• Jazyk dokumentu a každá jeho zmena je definovaná atribútom xml:lang• Ku všetkým netextovým prvkom je poskytnutý textový ekvivalent

– <img>, <input> a <applet> obsahujú popis v atribúte alt– Komplexné objekty ako <frame> alebo <object> obsahujú atribút longdesc– Klikateľné mapy obsahujú vnorené atribúty alt alebo title

• HTML obsah je organizovaný tak, aby sa dal logicky čítať aj pri vypnutí štýlov• Hlavička stránky obsahuje metadáta popisujúce jej obsah• Stránky je možné použiť aj ak sú aktívne prvky (skripty, flash, apod.) vypnuté

– Ak to nie je možné, použije sa prvok <noscript> alebo skript na strane servera poskytujúci alternatívne informácie

• Na prezentovanie informácií sa uprednostňuje značkovací skript pred obrázkami– Matematické rovnice sú zapísané pomocou jazyka MathML– Grafická úprava a rozloženie textu je naformátovaný kaskádovým štýlom– Obrázky nie sú použité ako náhrada textu (grafické tlačidlá, ...)

• Kód webových stránok zodpovedá špecifikácii jazyka HTML alebo XHTML podľa konzorcia W3C

3. Správna štruktúra CSS

• Triedy sú štruktúrované, využíva sa dedičnosť vlastností a ich prepojenia

• Ak je to možné, identické atribúty sa v triedach neduplikujú• Predpisy určujúce typ písma obsahujú aj bežný font písma

– Bežné pätkové písmo: serif– Bežné bezpätkové písmo: sans-serif– Bežné neproporcionálne písmo: monospace

4. Odkazy a navigačné položky

• Žiadny odkaz nesmie otvárať pop-up okno bez informácie pre používateľa

• Ak odkaz otvára nové okno/kartu alebo smeruje na iné webové sídlo, je označený piktogramom

• Susediace odkazy neuzavreté v zoznamoch sú oddelené iným znakom

• Cieľ a odlíšenie odkazu je jasne identifikované– Text odkazu dáva zmysel aj pri čítaní mimo kontextu– Na odlíšenie odkazu sa nepoužíva iba farba ale aj iné zvýraznenie, napr.

podčiarknutie– Text odkazu nie je zbytočne dlhý, ak vyžaduje dodatočný popis, uvedie sa do title

• Odkaz na iný typ obsahu ako webová stránka je viditeľne označený a obsahuje typ a veľkosť cieľového súboru

5. Tabuľky

• Tabuľka sa nepoužíva na vytvorenie vizuálneho rozloženia obsahu ak nedáva zmysel v linearizovanej podobe

• Tabuľky dávajú zmysel pri čítaní zľava doprava

• V dátových tabuľkách sú identifikované hlavičky riadkov a stĺpcov, prípadne pätičky so sumárom, rozdelením tabuľky do častí <thead>, <tbody>, <tfoot>, prepojené stĺpce sú zoskupované prvkami <col> a <colgroup>

• V dátových tabuľkách sa uvádzajú zhrnutia použitím atribútu summary

• Menovkám hlavičiek <th> sú uvedené skratky atribútom abbr

6. Formuláre a vstupné polia

• Každá menovka predchádza svojmu prvku v rovnakom riadku alebo sa nachádza v predchádzajúcom riadku– Pri zoradení menovky a vstupného poľa pod seba je možné použiť len jeden

prvok na jeden riadok, formulár nesmie byť delený do stĺpcov– Menovky sa definujú prostredníctvom prvku <legend>

• Veľké bloky formulára alebo možností ponuky sú rozdelené do skupín– V <select> ponuke sa uzatvárajú možnosti <option> do skupín pomocou

<optgroup>– Sekcie s poliami formulára sa zoskupujú pomocou prvku <fieldset>

• Pri manuálne vypĺňaných vstupných poliach sa overuje správnosť obsahu– Chybne vyplnená položka sa zreteľne označí– Chyba je používateľovi zároveň popísaná aj formou zrozumiteľného textu

7. Animácie, multimédia a vizuálne efekty

• Ak to stránka nevyžaduje, prvky na zvýraznenie textu posunom, blikaním alebo kmitaním sa nepoužívajú (<marquee>, <blink>, ...)

• Animácie a dynamicky sa meniace prvky sa menia najviac s frekvenciou 1Hz, tzn. Každá fáza animácie trvá minimálne jednu sekundu

• Animácie nie sú použité pri texte, ktorý zobrazuje dôležité informácie• Animácie a videoklipy obsahujú mechanizmus na zastavenie pohybu• Ak sa na stránke prehráva audio dlhšie ako 3 sekundy, je k dispozícii

mechanizmus na pozastavenie alebo vypnutie prehrávania• Pri pohybe na webovej stránke nesmie nastať zmena časti webovej

stránky, ktorá pozmení jej kontext alebo rozloženie prvkov• Webová stránka nemanipuluje používateľským prostredím bez priameho

príkazu používateľa

8. Obsahová časť stránok

• Stránka poskytuje informácie o súvisiacich dokumentoch• Obsah ani kód stránky nepredpokladá, že používateľ navštívil

inú stránku• Ak webové sídlo obsahuje viac skupín podstránok (produkty,

aktuality, apod.) a je prítomná funkcia vyhľadávania, poskytuje sa viac druhov vyhľadávania – od jednoduchého po podrobné na základe výberu filtrov

• Ak webové sídlo obsahuje viac ako 50 samostatných stránok, navigačné panely obsahujú prístup na mapu sídla

• Informácie sú prezentované jednoduchou a zrozumiteľnou formou

• Používajú sa bežné zaužívané slová – napr. „začať“, „odoslať“, ..• Text je doplnený grafickými a zvukovými prezentáciami tam, kde

uľahčia pochopenie obsahu