SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Štandardy prístupnosti
  webových stránok


     Základné pravidlá podľa
    Zbierky 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

Weitere ähnliche Inhalte

Mehr von Peter Bolebruch

9 Areas for Marketing Automation
9 Areas for Marketing Automation9 Areas for Marketing Automation
9 Areas for Marketing AutomationPeter Bolebruch
 
9 oblastí marketingovej automatizácie
9 oblastí marketingovej automatizácie9 oblastí marketingovej automatizácie
9 oblastí marketingovej automatizáciePeter Bolebruch
 
Process inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyProcess inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyPeter Bolebruch
 
Save time in B2B business
Save time in B2B businessSave time in B2B business
Save time in B2B businessPeter Bolebruch
 
In media Reference letter
In media Reference letterIn media Reference letter
In media Reference letterPeter Bolebruch
 
In Media & Freevision & Paravan
In Media & Freevision & ParavanIn Media & Freevision & Paravan
In Media & Freevision & ParavanPeter Bolebruch
 
Vernostný SMS marketing
Vernostný SMS marketingVernostný SMS marketing
Vernostný SMS marketingPeter Bolebruch
 
Zastav se, zorientuj, rozhodni. Jdi dál svou cestou
Zastav se, zorientuj, rozhodni. Jdi dál svou cestouZastav se, zorientuj, rozhodni. Jdi dál svou cestou
Zastav se, zorientuj, rozhodni. Jdi dál svou cestouPeter Bolebruch
 
Z nuly na 100 cez sociálne siete
Z nuly na 100 cez sociálne sieteZ nuly na 100 cez sociálne siete
Z nuly na 100 cez sociálne sietePeter Bolebruch
 
Ako premeniť návštevy na webe na biznis
Ako premeniť návštevy na webe na biznisAko premeniť návštevy na webe na biznis
Ako premeniť návštevy na webe na biznisPeter Bolebruch
 
Úvaha o našej ceste z jaskýň do digitálneho sveta
Úvaha o našej ceste z jaskýň do digitálneho svetaÚvaha o našej ceste z jaskýň do digitálneho sveta
Úvaha o našej ceste z jaskýň do digitálneho svetaPeter Bolebruch
 
Komunikujme o tom, čo robíme
Komunikujme o tom, čo robímeKomunikujme o tom, čo robíme
Komunikujme o tom, čo robímePeter Bolebruch
 
Big Brother is watching you
Big Brother is watching youBig Brother is watching you
Big Brother is watching youPeter Bolebruch
 
Ako dostanem myšlienku do online sveta a zarobím na nej?
Ako dostanem myšlienku do online sveta a zarobím na nej?Ako dostanem myšlienku do online sveta a zarobím na nej?
Ako dostanem myšlienku do online sveta a zarobím na nej?Peter Bolebruch
 
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa Peter Bolebruch
 
Ako má vyzerať dobrý web
Ako má vyzerať dobrý webAko má vyzerať dobrý web
Ako má vyzerať dobrý webPeter Bolebruch
 

Mehr von Peter Bolebruch (20)

Farmlandia & Agrokruh
Farmlandia & AgrokruhFarmlandia & Agrokruh
Farmlandia & Agrokruh
 
9 Areas for Marketing Automation
9 Areas for Marketing Automation9 Areas for Marketing Automation
9 Areas for Marketing Automation
 
9 oblastí marketingovej automatizácie
9 oblastí marketingovej automatizácie9 oblastí marketingovej automatizácie
9 oblastí marketingovej automatizácie
 
Process inside In Media - We are Digital Company
Process inside In Media - We are Digital CompanyProcess inside In Media - We are Digital Company
Process inside In Media - We are Digital Company
 
Save time in B2B business
Save time in B2B businessSave time in B2B business
Save time in B2B business
 
In media Reference letter
In media Reference letterIn media Reference letter
In media Reference letter
 
In Media & Freevision & Paravan
In Media & Freevision & ParavanIn Media & Freevision & Paravan
In Media & Freevision & Paravan
 
Vernostný SMS marketing
Vernostný SMS marketingVernostný SMS marketing
Vernostný SMS marketing
 
Komunikačné TAI CHI
Komunikačné TAI CHIKomunikačné TAI CHI
Komunikačné TAI CHI
 
Zastav se, zorientuj, rozhodni. Jdi dál svou cestou
Zastav se, zorientuj, rozhodni. Jdi dál svou cestouZastav se, zorientuj, rozhodni. Jdi dál svou cestou
Zastav se, zorientuj, rozhodni. Jdi dál svou cestou
 
Z nuly na 100 cez sociálne siete
Z nuly na 100 cez sociálne sieteZ nuly na 100 cez sociálne siete
Z nuly na 100 cez sociálne siete
 
Ako premeniť návštevy na webe na biznis
Ako premeniť návštevy na webe na biznisAko premeniť návštevy na webe na biznis
Ako premeniť návštevy na webe na biznis
 
Úvaha o našej ceste z jaskýň do digitálneho sveta
Úvaha o našej ceste z jaskýň do digitálneho svetaÚvaha o našej ceste z jaskýň do digitálneho sveta
Úvaha o našej ceste z jaskýň do digitálneho sveta
 
Komunikujme o tom, čo robíme
Komunikujme o tom, čo robímeKomunikujme o tom, čo robíme
Komunikujme o tom, čo robíme
 
Big Brother is watching you
Big Brother is watching youBig Brother is watching you
Big Brother is watching you
 
Ako dostanem myšlienku do online sveta a zarobím na nej?
Ako dostanem myšlienku do online sveta a zarobím na nej?Ako dostanem myšlienku do online sveta a zarobím na nej?
Ako dostanem myšlienku do online sveta a zarobím na nej?
 
Hawaii Island - Kauai
Hawaii Island - KauaiHawaii Island - Kauai
Hawaii Island - Kauai
 
Otvorené srdce
Otvorené srdceOtvorené srdce
Otvorené srdce
 
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa
Trendy v digitálnom marketingu pre Slovensko v roku 2012 podľa
 
Ako má vyzerať dobrý web
Ako má vyzerať dobrý webAko má vyzerať dobrý web
Ako má vyzerať dobrý web
 

Standardy pristupnosti

  • 1. Štandardy prístupnosti webových stránok Základné pravidlá podľa Zbierky zákonov 312/2010
  • 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