2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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