Uživatelské nástroje

Nástroje pro tento web


pristupnost:celkove_overeni_pristupnosti

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze
Předchozí verze
pristupnost:celkove_overeni_pristupnosti [2020/09/19 15:34] – [Reference k prvkům a chybám na stránce] evapristupnost:celkove_overeni_pristupnosti [2020/09/24 13:35] (aktuální) epub
Řádek 4: Řádek 4:
 Na webové stránce validátoru https://wave.webaim.org/ zadejte do pole **Web page address** adresu stránky, jejíž strukturu chcete zkontrolovat (viz obr. 1). Na webové stránce validátoru https://wave.webaim.org/ zadejte do pole **Web page address** adresu stránky, jejíž strukturu chcete zkontrolovat (viz obr. 1).
  
-{{:pristupnost:wave.png|Obr. 1: Vstupní stránka validátoru přístupnosti WAVE}} \\ +{{:pristupnost:wave.png?1100|Obr. 1: Vstupní stránka validátoru přístupnosti WAVE}} \\ 
 //Obr. 1: Vstupní stránka validátoru přístupnosti WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 1: Vstupní stránka validátoru přístupnosti WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
  
-Validátor nabízí celou řadu funkcí a informací týkajících se stránky či potenciálních chyb přístupnosti, které se na stránce vyskytují. Jde zejména o informace o struktuře stránky (oblastech stránky, hierarchii nadpisů) nebo informace o prvcích a jejich správnému použití z hlediska přístupnosti (např. upozornění na chybějící popisky obrázků).+Validátor nabízí celou řadu funkcí a informací týkajících se stránky či potenciálních chyb přístupnosti, které se na stránce vyskytují. Jde zejména o informace o struktuře stránky (oblastech stránky, hierarchii nadpisů) o prvcích a jejich správnému použití z hlediska přístupnosti (např. upozornění na chybějící popisky obrázků).
  
 <WRAP center important > <WRAP center important >
-Validátory jsou velmi užitečné nástroje. Nesmíme však zapomínat, že **žádný validátor sám o sobě pro kontrolu přístupnosti nestačí**, protože odhalí jen některé problémy z oblasti spíše "technické" přístupnosti stránek. Přístupnost se ale netýká jen technických záležitostí nebo správné syntaxe zdrojového kódu stránky, ale třeba také tohojak jsou stránky strukturovány a jakou strukturu má celý webjak je přehledná navigacezda jsou nadpisy na stránce nebo texty odkazů výstižnéjestli se uživatel snadno dostane ke všem informacím, které potřebujejestli tyto informace jsou napsány srozumitelně atd.+Validátory jsou velmi užitečné nástroje. Nesmíme však zapomínat, že **žádný validátor sám o sobě pro kontrolu přístupnosti nestačí**, protože odhalí jen některé problémy z oblasti spíše "technické" přístupnosti stránek. Přístupnost se ale netýká jen technických záležitostí nebo správné syntaxe zdrojového kódu stránky, ale např. i toho
 +  * jak jsou stránky strukturovány a jakou strukturu má celý web
 +  * jak je přehledná navigace
 +  * zda jsou nadpisy na stránce nebo texty odkazů výstižné
 +  * jestli se uživatel snadno dostane ke všem informacím, které potřebuje
 +  * jestli tyto informace jsou napsány srozumitelně.
  
-Naopak ne všechno, co validátor označí jako potenciální chybu, musí opravdu být chybou. Vždy je nutné, aby výsledky hodnocení provedl nejen stroj, ale i člověk odborník.+Naopak ne všechno, co validátor označí jako potenciální chybu, musí opravdu být chybou. Vždy je nutné, aby výsledky hodnocení provedl nejen stroj, ale i člověk.
  
 </WRAP> </WRAP>
Řádek 21: Řádek 26:
 Informace o hodnocené stránce jsou zobrazeny přímo na podkladě dané webové stránky formou ikon, které zastupují jednotlivé prvky nebo ikony kontrolované stránky. Pokud kliknete myší na konkrétní ikonu, je červenou tečkovanou čárou vyznačena oblast, ke které se daná ikona validátoru vztahuje. Informace o hodnocené stránce jsou zobrazeny přímo na podkladě dané webové stránky formou ikon, které zastupují jednotlivé prvky nebo ikony kontrolované stránky. Pokud kliknete myší na konkrétní ikonu, je červenou tečkovanou čárou vyznačena oblast, ke které se daná ikona validátoru vztahuje.
  
-Zároveň se rozbalí informace o daném prvku nebo chybě s možností zobrazení reference (informace o typu prvku nebo chyby s upozorněním na co si dát pozor, proč je daný prvek důležitý, co bývá častou chybou) nebo zobrazení zdrojového kódu, který se daného prvku či chyby týká.+Zároveň se rozbalí informace o daném prvku nebo chybě s možností zobrazení reference (informace o typu prvku nebo chyby s upozorněnímna co je nutné si dát pozor, proč je daný prvek důležitý, co bývá častou chybou) nebo zobrazení zdrojového kódu, který se daného prvku či chyby týká.
  
-Jak je patrné z konkrétního příkladu (viz obr. 2), na pravé straně je vidět rozbalená informace o navigačním menu rychlých odkazů ((Výsledky hodnocení si můžete prohlédnout přímo v [[https://wave.webaim.org/report#/https://knihovna.jabok.cz/cs/e-zdroje-databaze/zdroje-dostupne-v-ramci-otevreneho-pristupu|rozhraní validátoru WAVE]].)) \\  \\ {{:pristupnost:wave_rozhrani.png|Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok}} \\ +Jak je patrné z konkrétního příkladu (viz obr. 2), na pravé straně je vidět rozbalená informace o navigačním menu rychlých odkazů.((Výsledky hodnocení si můžete prohlédnout přímo v [[https://wave.webaim.org/report#/https://knihovna.jabok.cz/cs/e-zdroje-databaze/zdroje-dostupne-v-ramci-otevreneho-pristupu|rozhraní validátoru WAVE]].)) \\  \\ {{:pristupnost:wave_rozhrani.png?1100|Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok}} \\ 
 //Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-10)// //Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-10)//
  
Řádek 29: Řádek 34:
  
 Na levé straně obrazovky se zobrazí šedomodrá lišta s přehledem jednotlivých prvků a případných chyb.((Jako ilustrační obrázky byly použity výsledky validátoru pro stránku https://www.knihovny.cz/Record/vkol.SVK01-001292736. Výsledky hodnocení si můžete prohlédnout přímo v [[https://wave.webaim.org/report#/https://www.knihovny.cz/Record/vkol.SVK01-001292736|rozhraní validátoru WAVE]].)) Tato lišta obsahuje několik záložek: Na levé straně obrazovky se zobrazí šedomodrá lišta s přehledem jednotlivých prvků a případných chyb.((Jako ilustrační obrázky byly použity výsledky validátoru pro stránku https://www.knihovny.cz/Record/vkol.SVK01-001292736. Výsledky hodnocení si můžete prohlédnout přímo v [[https://wave.webaim.org/report#/https://www.knihovny.cz/Record/vkol.SVK01-001292736|rozhraní validátoru WAVE]].)) Tato lišta obsahuje několik záložek:
 +  * **Summary** (Souhrn);
 +  * **Details** (Detaily);
 +  * **Reference** (Reference);
 +  * **Structure** (Struktura);
 +  * **Contrast** (Kontrast).
  
 ==== Souhrn ==== ==== Souhrn ====
-Příklad souhrnu prvků a chyb, které jsou na stránce přítomnéa také jejich počtu je k dispozici na obr. 3. Přehled je výchozím zobrazením validátoru při načtení výsledků hodnocení přístupnosti stránky.+Příklad souhrnu prvků a chyb, které se na stránce vyskytujívčetně jejich počtu je k dispozici na obr. 3. Přehled je výchozím zobrazením validátoru při načtení výsledků hodnocení přístupnosti stránky.
  
 {{:pristupnost:wave-prehled.png|Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE}} \\  {{:pristupnost:wave-prehled.png|Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE}} \\ 
 //Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
-==== Detailní přehled prvků a chyb ====+==== Detaily ====
  
 Chyby či prvky přítomné na stránce jsou v detailním přehledu uvedeny jednotlivě pomocí ikon. Po kliknutí na ikonu v přehledu se zobrazí část stránky, která daný prvek obsahuje. Prvek je zároveň dočasně zvýrazněn bliknutím na stránce, případně červeným přerušovaným orámováním. \\ \\  Chyby či prvky přítomné na stránce jsou v detailním přehledu uvedeny jednotlivě pomocí ikon. Po kliknutí na ikonu v přehledu se zobrazí část stránky, která daný prvek obsahuje. Prvek je zároveň dočasně zvýrazněn bliknutím na stránce, případně červeným přerušovaným orámováním. \\ \\ 
Řádek 41: Řádek 51:
 //Obr. 4: Prvek Table header (záhlaví tabulky) v detailním výpis prvků a chyb na stránce (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 4: Prvek Table header (záhlaví tabulky) v detailním výpis prvků a chyb na stránce (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
  
-U každého typu prvků/chyb se zobrazuje kulatá ikonka //i//. Po kliknutí na ni se v liště zobrazí reference (obecné informace) k dané chybě nebo prvku. +U každého typu prvku/chyby se zobrazuje kulatá ikona **i**. Po kliknutí na ni se v liště zobrazí reference (obecné informace) k dané chybě nebo prvku. 
-==== Reference k prvkům a chybám na stránce ==== +==== Reference ==== 
-Na záložce **Reference** se zobrazí informace o typu prvku nebo chyby s upozorněním, na co si dát pozor, proč je daný prvek důležitý nebo co bývá častou chybou, viz obr. 5. Tato záložka je kontextová, takže při načtení stránky do validátoru nabízí výpis referencí. Jinak se na ní zobrazují kontextové informace k jednotlivým prvků, a to po kliknutí na ikonu **i** (v detailním výpisu chyb na boční liště) nebo na odkaz **Reference** (u detailního popisu jednotlivého prvku přímo ve webové stránce).+Na záložce **Reference** se zobrazí informace o typu prvku nebo chyby s upozorněním, na co si dát pozor, proč je daný prvek důležitý nebo co bývá častou chybou, viz obr. 5. Tato záložka je kontextová, takže při načtení stránky do validátoru nabízí výpis referencí. Jinak se na ní zobrazují kontextové informace k jednotlivým prvkům, a to po kliknutí na ikonu **i** (v detailním výpisu chyb na boční liště) nebo na odkaz **Reference** (u detailního popisu jednotlivého prvku přímo ve webové stránce).
  
-Na obr. 5 vidíme napravo nadpis Vybrat instituci. Na levém bočním panelu validátoru je vybrána karta **Reference**, proto se zobrazují obecné informace k hierarchii nadpisů, konkrétně nadpisu úrovně (%%<h3>%%). \\  \\ {{:pristupnost:wave-reference.png|Obr. 5: Ukázka reference k nadpisům webové stránky}} \\ +Na obr. 5 vidíme napravo nadpis třetí úrovně Vybrat instituci. Na levém bočním panelu validátoru je vybrána karta **Reference**, proto se zobrazují obecné informace k hierarchii nadpisů, konkrétně nadpisu třetí úrovně (%%<h3>%%). \\  \\ {{:pristupnost:wave-reference.png|Obr. 5: Ukázka reference k nadpisům webové stránky}} \\ 
 //Obr. 5: Ukázka reference k nadpisům webové stránky (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 5: Ukázka reference k nadpisům webové stránky (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
  
-==== Struktura stránky====+==== Struktura ====
 Na obr. 6 je na záložce **Structure** je zobrazena hierarchie nadpisů na stránce, která slouží ke kontrole správnosti struktury stránky. Zobrazeno je i upozornění na chybějící úroveň nadpisů. Na obr. 6 je na záložce **Structure** je zobrazena hierarchie nadpisů na stránce, která slouží ke kontrole správnosti struktury stránky. Zobrazeno je i upozornění na chybějící úroveň nadpisů.
  
 Pokud kliknete na konkrétní prvek v zobrazené hierarchii nadpisů na boční liště, daný prvek se zobrazí ve výsledcích validace stránky a zároveň se zvýrazní červeným tečkovaným rámečkem. Pokud kliknete na konkrétní prvek v zobrazené hierarchii nadpisů na boční liště, daný prvek se zobrazí ve výsledcích validace stránky a zároveň se zvýrazní červeným tečkovaným rámečkem.
  
-Dále vidíme, že nadpis třetí úrovně **Vybrat instituci**, který byl vybrán kliknutím na boční liště, je ve výsledcích hodnocení stránky zvýrazněn červeným rámečkem. \\  \\ {{:pristupnost:wave-struktura.png|Obr. 6: Zobrazení hierarchie nadpisů ve validátoru WAVE}} \\ +Dále vidíme, že nadpis třetí úrovně Vybrat instituci, který byl vybrán kliknutím na boční liště, je ve výsledcích hodnocení stránky zvýrazněn červeným rámečkem. \\  \\ {{:pristupnost:wave-struktura.png|Obr. 6: Zobrazení hierarchie nadpisů ve validátoru WAVE}} \\ 
 //Obr. 6: Zobrazení hierarchie nadpisů ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 6: Zobrazení hierarchie nadpisů ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
  
  
-==== Hodnocení kontrastu textu a pozadí ====+==== Kontrast ====
 Na záložce **Contrast** na pravé boční liště validátoru WAVE je možné zobrazit informace o chybách kontrastu textu vůči pozadí na stránce. Na záložce **Contrast** na pravé boční liště validátoru WAVE je možné zobrazit informace o chybách kontrastu textu vůči pozadí na stránce.
  
-V horní části boční lišty se zobrazuje validátor kontrastu a pod ním jsou ikony, které zastupují jednotlivá problematická místa. Validátor WAVE je propojen s nástrojem WebAIM Contrast Checker, takže po kliknutí na dílčí ikonu na liště se ve validátoru zobrazí informace o kontrastu daného prvku (viz obr. 7) vůči pozadí. V případě potřeby je možné posuvníkem validátoru vybrat vhodnou kombinace barev popředí a pozadí. Podrobný návod k nástroji WebAIM Contrast Checker najdete [[pristupnost:overeni_kontrastu| na samostatné stránce]]. \\ \\ +V horní části boční lišty se zobrazuje validátor kontrastu a pod ním jsou ikony, které zastupují jednotlivá problematická místa. Validátor WAVE je propojen s nástrojem WebAIM Contrast Checker, takže po kliknutí na dílčí ikonu na liště se ve validátoru zobrazí informace o kontrastu daného prvku vůči pozadí (viz obr. 7). V případě potřeby je možné posuvníkem validátoru vybrat vhodnou kombinace barev popředí a pozadí. Podrobný návod k nástroji WebAIM Contrast Checker najdete [[pristupnost:overeni_kontrastu| na samostatné stránce]]. \\ \\ 
  
 {{:pristupnost:wave-contrast.png|Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE}} \\  {{:pristupnost:wave-contrast.png|Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE}} \\ 
 //Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)// //Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-05-11)//
  
-<-zjisteni_barev|Zjištění barev^obsah|Obsah^pozadavky_pri_vyberovem_rizeni|Požadavky při výběrovém řízení->+<-zjisteni_barev|Zjištění barev^obsah|Obsah^pozadavky_pri_vyberovem_rizeni|příloha Požadavky při výběrovém řízení->
  
pristupnost/celkove_overeni_pristupnosti.1600522452.txt.gz · Poslední úprava: 2020/09/19 15:34 autor: eva