Rozdíly

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

--- pristupnost:struktura_webu [2020/09/20 18:03] – [Název stránky] eva
+++ pristupnost:struktura_webu [2023/03/20 21:45] (aktuální) – [Nadpisy] eva
@@ Řádek 1: / Řádek 1: @@
 ====== -#14 Struktura webu ======
-Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak hierarchickou strukturu stránky vyjádřenou hierarchií nadpisů, jednak o strukturu informační, do které patří jednotlivé funkční oblasti webové stránky, obvykle vyjádřené pomocí bloků.
+Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak o hierarchickou strukturu stránky vyjádřenou nadpisy, jednak o strukturu informační, do které patří jednotlivé funkční oblasti webové stránky, obvykle v podobě bloků.
-Jak struktura nadpisů, tak jednotlivé funkční oblasti stránky v sobě zahrnují dva navzájem propojené prvky:
+Jak hierarchie nadpisů, tak jednotlivé funkční oblasti stránky v sobě zahrnují dva navzájem propojené prvky:
   * strukturu vyjádřenou v **grafickém rozhraní stránky**, kterou vnímá běžný uživatel webu;
   * **zdrojový kód**, který je pro běžného návštěvníka webu neviditelný, ale pracují s ním technologie, které obsah webu zprostředkovávají uživatelům (jde nejen o asistivní technologie, jako jsou odečítače obrazovky, braillské řádky apod., ale také o webové vyhledávače).
 <WRAP center tip>
-Správná struktura webové stránky a informací, které stránka obsahuje, má nezanedbatelný vliv na optimalizaci webu pro webové vyhledávače.
+Správná struktura webové stránky a informací, které obsahuje, má nezanedbatelný vliv na optimalizaci webu pro webové vyhledávače.
 </WRAP>
@@ Řádek 13: / Řádek 13: @@
 ===== Funkční oblasti webové stránky =====
-Funkční oblasti stránky zahrnují oblasti / informační bloky stránek, které se na stránkách obvykle vyskytují. Jsou to např.:
+Funkčními oblastmi webové stránky jsou např.:
   * záhlaví;
   * vyhledávací lišta;
@@ Řádek 22: / Řádek 22: @@
 Běžný uživatel se v této struktuře může orientovat vizuálně, protože jednotlivé části webu jsou prezentovány ve formě bloků, mají své specifické umístění, odlišují se také pomocí grafiky, např. odsazením, ohraničením, barvou nebo velikostí a stylem písma.
-Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky, případně i webový vyhledávač) se musí na stránce orientovat jinak. Využívá k tomu značek ve zdrojovém kódu stránky.
+Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky, případně i webový vyhledávač), se musí na stránce orientovat jinak. Využívá k tomu značky ve zdrojovém kódu stránky.
 ==== Vymezení funkčních oblastí ve zdrojovém kódu ====
-Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, musí v ní být vymezeny tzv. funkční oblasti.
+Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, musí v ní být funkční oblasti správně vymezeny pomocí značek, např.:
-Funkční oblasti jsou vymezeny strukturními značkami poskytujícími informace o oblasti stránky, např.:
   * %%<header>%% pro záhlaví;
   * %%<nav>%% pro navigaci;
   * %%<main>%% pro hlavní obsah.
-Definice oblastí stránky jsou součástí jazyka HTML a používají se optimálně v kombinaci s nástrojem WAI-ARIA((O tom, co je WAI-ARIA a k čemu slouží, pojednává např. článek [[https://poslepu.cz/wai-aria-1-0-byla-vydana-jako-doporuceni-w3c//|WAI ARIA 1.0 byla vydána jako doporučení W3C]].)), který zlepšuje využívání a ovládání webu pomocí asistivních technologií. Strukturu obsahu stránky pak určuje struktura nadpisů, seznamy a další prvky. Např. nevidomý uživatel, který používá odečítač obrazovky, se na stránce pohybuje pomocí příkazů využívajících strukturní značky jednotlivých bloků či oblastí stránky, nadpisů, seznamů, tabulek apod.
+Tyto značky jsou součástí jazyka HTML a používají se optimálně v kombinaci s atributy WAI-ARIA((O technické specifikaci WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) pojednává např. článek [[https://poslepu.cz/wai-aria-1-0-byla-vydana-jako-doporuceni-w3c//|WAI ARIA 1.0 byla vydána jako doporučení W3C]].)), které zlepšují využívání a ovládání webu pomocí asistivních technologií. Strukturu obsahu stránky pak určuje hierarchie nadpisů, seznamy a další prvky. Např. nevidomý uživatel, který používá odečítač obrazovky, se na stránce pohybuje pomocí příkazů využívajících strukturní značky jednotlivých bloků či oblastí stránky, nadpisů, seznamů, tabulek apod.
 <WRAP center important>
@@ Řádek 41: / Řádek 40: @@
 </WRAP>
-Definice oblastí stránek, nastavení chování stránek při práci s nadpisy seznamy aj. je zejména záležitostí vývojářů redakčního systému či webu. Výsledná [[pristupnost:manual_nadpisy|struktura nadpisů]] nebo [[pristupnost:manual_seznamy|používání seznamů]] jsou však ve značné míře především otázkou [[pristupnost:redakcni_system_a_sablony|vkládání informací do redakčního systému]].
+Definice oblastí stránek a nastavení chování stránek při práci s nadpisy či seznamy je především záležitostí vývojářů redakčního systému či webu. Výsledná [[pristupnost:manual_nadpisy|struktura nadpisů]] nebo [[pristupnost:manual_seznamy|používání seznamů]] jsou však ve značné míře otázkou [[pristupnost:redakcni_system|vkládání informací do redakčního systému]].
 ===== Název stránky a nadpisy =====
-Pro přístupnost webu je důležité, aby stránka měla správnou strukturu. Ta je tvořena zejména názvem stránky a nadpisy v hierarchickém uspořádání. Nadpisy by měly být logicky uspořádány a měly by být výstižné.
+Pro přístupnost webu je velmi důležité, aby nechyběl vhodný název stránky a aby byly nadpisy logicky uspořádané a výstižné.
 ==== Název stránky ====
 Na každé webové stránce **je nutné uvést název stránky**.
-Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název záložky nebo okna; obvykle se také použije jako nadpis první úrovně, viz obr. 1. V redakčních systémech bývá **název stránky vyžadován jako povinné pole** při vytváření nebo úpravě stránky, viz obr. 2. Název stránky je na ukázkových obrázcích pro přehlednost zvýrazněn červeným rámečkem.
+Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název panelu nebo okna; obvykle se také použije jako nadpis první úrovně, viz obr. 1. V redakčních systémech bývá **název stránky vyžadován jako povinné pole** při vytváření nebo úpravě stránky, viz obr. 2. Název stránky je na ukázkových obrázcích pro přehlednost zvýrazněn červeným rámečkem.
 {{:pristupnost:nazev_stranky_zobrazeni.png|Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče}} \\
 //Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: [[https://knihovna.jabok.cz/cs/kontakt|Knihovna Jabok]], získáno 2020-05-11)//
-{{:pristupnost:nazev_stranky_editace.png |Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky}} \\
+{{:pristupnost:nazev_stranky_editace.png?1150|Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky}} \\
 //Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: [[https://knihovna.jabok.cz/cs/kontakt|Knihovna Jabok]], získáno 2020-05-13)//
 <WRAP center info>
-==== Proč je důležité uvádět název stránky ====
+=== Proč je důležité uvádět název stránky ===
 Název stránky:
   * se zobrazí v prohlížeči v záhlaví okna, případně panelu;
-  * přečte nevidomému uživateli odečítač obrazovky;
+  * je údaj, který nevidomému uživateli přečte odečítač obrazovky;
   * je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání.
 </WRAP>
@@ Řádek 67: / Řádek 66: @@
 Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, a to bez ohledu na to, zda jde o uživatele s postižením nebo o běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel:
-  - Používejte **nadpisy, které vystihují, co daná stránka nebo její část obsahuje**. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli nadpisu rozumí vaši uživatelé.
+  - Používejte **nadpisy, které vystihují, co daná stránka nebo její část obsahuje**. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli bude pro vaše uživatele srozumitelný.
   - Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. **Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu**. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3).
   - Snažte se, aby na všech stránkách webu byly **nadpisy používány jednotně**.
-  - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřízený celek nadpisem nižší úrovně):
+  - Nadpisy uvádějte **v logickém pořadí a ve srozumitelné hierarchické struktuře**. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřazený celek nadpisem nižší úrovně):
      * nadpis 1 pro název stránky (na každé stránce by se měl vyskytovat pouze jednou);
-     * nadpis 2 pro názvy jednotlivých sekcí;
+     * nadpis 2 pro názvy funkčních oblastí stránky nebo druhé úrovně hlavního obsahu stránky;
-     * nadpis 3 pro názvy článků;
+     * nadpis 3 až 6 pro názvy nižších úrovní.
-     * nadpisy 4, 5 a 6 pro nadpisy nižší úrovně v rámci článků.
-Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí nastavit kurzor na požadovaný nadpis. V nástroji pro výběr stylu se zobrazí použitý styl (úroveň) nadpisu (viz obr. 3).
+Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí na požadovaný nadpis nastavit kurzor. V nástroji pro výběr stylu se zobrazí použitý styl (úroveň) nadpisu (viz obr. 3).
-{{:pristupnost:napis-editace.png |Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu}} \\
+{{:pristupnost:napis-editace.png|Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu}} \\
-//Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami je označeno rozbalovací menu, zvolená úroveň nadpisu a nadpis, se kterým se pracuje (zdroj: [[https://knihovna.jabok.cz/cs/kontakt|Knihovna Jabok]], získáno 2020-05-11)//
+//Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami jsou označeny rozbalovací menu, zvolená úroveň nadpisu a nadpis, se kterým se pracuje (zdroj: [[https://knihovna.jabok.cz/cs/kontakt|Knihovna Jabok]], získáno 2020-05-11)//
 <WRAP center tip>
-Existuje také řada [[pristupnost:kontrola_hierarchie_nadpisu|speciálních nástrojů na kontrolu struktury nadpisů na stránce]], např. doplněk prohlížeče HeadingsMap nebo validátor přístupnosti WAVE.
+Existuje také řada [[pristupnost:kontrola_hierarchie_nadpisu|speciálních nástrojů na kontrolu hierarchie nadpisů na stránce]], např. doplněk prohlížeče HeadingsMap (dostupný [[https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi|pro Google Chrome]] nebo [[https://addons.mozilla.org/en-US/firefox/addon/headingsmap/|pro Mozilla Firefox)]] nebo webový validátor přístupnosti [[https://wave.webaim.org/|WAVE]] (dostupný rovněž jako rozšíření pro prohlížeče).
 </WRAP>
 Na obr. 4 je pomocí značek H1 až H3 ((H1 až H6 jsou značky používané v kódu HTML pro sémantické označení prvku heading, tedy nadpisu.)) označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese [[https://knihovna.jabok.cz/cs/kontakt]].
-{{:pristupnost:nadpis-zobrazeni.png |Obr. 4: Hierarchická struktura nadpisů na stránce}} \\
+{{:pristupnost:nadpis-zobrazeni.png|Obr. 4: Hierarchická struktura nadpisů na stránce}} \\
 //Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: [[https://knihovna.jabok.cz/cs/kontakt|Knihovna Jabok]], získáno 2020-05-13)//
 <WRAP center info>
-=== Proč je důležité vkládat nadpisy ve správné struktuře pomocí stylů ===
+=== Proč je důležité správně vkládat nadpisy ===
-  * Používání správné struktury pomocí nadpisů nejen ušetří práci (není nutné se starat o formátování), ale především pomůže uživatelům správně se zorientovat v informacích na stránce.
+  * Správné používání nadpisů nejen ušetří práci (není nutné se starat o formátování), ale především pomůže uživatelům správně se zorientovat v informacích na stránce.
-  * Obzvláště důležité je to pro nevidomé návštěvníky webu, pro které jsou nadpisy způsobem, jak se efektivně dostat právě k těm informacím, které potřebují, aniž by jim hlasový odečítač obrazovky musel předčítat obsah celé stránky (odečítač umožňuje procházení nadpisů na stránce s možností volby úrovně nadpisu).
+  * Nadpisy jsou obzvláště důležité pro nevidomé návštěvníky webu. Ti se díky nim efektivně dostanou právě k těm informacím, které potřebují, aniž by jim hlasový odečítač obrazovky musel předčítat obsah celé stránky (odečítač umožňuje procházení nadpisů na stránce s možností volby úrovně nadpisu).
-  * Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je např. jedním z nástrojů optimalizace pro vyhledávače (search engine optimization, SEO) a může výrazně zvýšit umístění stránky ve výsledcích vyhledávání.
+  * Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je jedním z nástrojů optimalizace pro vyhledávače (search engine optimization, SEO) a může výrazně zvýšit umístění stránky ve výsledcích vyhledávání.
 </WRAP>
 <-funkcni_grafika_webu|13. Funkční grafika webu^obsah|Obsah^seznamy|15. Seznamy->

Přístupné webové stránky

Uživatelské nástroje

Nástroje pro tento web

Rozdíly

Nástroje pro stránku