Přístupnost a SEO

Tato stránka shrnuje pravidla přístupnosti školního webu podle zákona č. 99/2019 Sb. a standardu WCAG 2.1 AA a vysvětluje základní principy optimalizace pro vyhledávače (SEO). Je určena redaktorům a správcům školy, kteří potřebují vědět, co systém zajišťuje v kódu šablon a jaké zásady musí dodržet redakce při vkládání obsahu.

Na následujícím snímku vidíte detail nahraného souboru v Knihovně médií s polem pro alternativní text:

Kde to najdete

Prvky přístupnosti a parametry pro vyhledávače redaktoři nastavují při běžné práci:

• Alternativní texty a popisky: V nabídce Knihovna médií v detailu souboru (pole Alternativní text a Popisek).
• Titulky a popisy stránek: V položce Stránka (pole Název stránky, Perex, Poslední část adresy a Náhledový obrázek).
• Parametry článků: V položce Aktualita (pole Nadpis, Perex, Hlavní fotka a Adresa článku).
• Identita školy a barvy: V položce Škola (pole Název školy, Krátký název, Slogan, Hlavní barva a Akcentní barva).

Přístupnost podle zákona a standardu WCAG

Zákon č. 99/2019 Sb. ukládá školám povinnost provozovat internetové stránky přístupné pro všechny uživatele včetně osob se zdravotním postižením podle standardu WCAG 2.1 na úrovni AA.

Platforma Než zazvoní CMS podporuje plnění zákonných povinností technickou přístupností šablon bez bariér. Za samotný obsah a přílohy odpovídá redakce školy.

Každý školní web musí mít zveřejněné Prohlášení o přístupnosti (obvykle na adrese o-skole/prohlaseni-o-pristupnosti), na které odkazuje patička webu.

Co systém zajišťuje v kódu automaticky

• Sémantická struktura: Šablony využívají HTML značky <header>, <main id="obsah">, <nav>, <article> a <footer>.
• Rychlé přeskočení na obsah: Skrytý odkaz „Přejít na obsah“ na začátku stránky se aktivuje klávesou Tab a umožní přeskočit záhlaví k textu.
• Výpočet kontrastu barev: Systém z primární barvy školy automaticky dopočítává kontrastní odstíny splňující kritéria WCAG AA (poměr 4,5 : 1 pro text a 3 : 1 pro linky).
• Popisky pro čtečky: Ikony a ovládací prvky obsahují skryté textové štítky pro hlasové čtečky.
• Soukromí bez lišt: Externí mapy a videa z YouTube se stahují až po kliknutí na souhlas, web proto nevyžaduje cookie lištu.

Pravidla přístupnosti pro redaktory

Technická přístupnost funguje spolehlivě pouze při dodržování redakčních pravidel:

1. Alternativní texty obrázků

V detailu každého obrázku v nabídce Knihovna médií vyplňujte pole Alternativní text:

• Text čtou hlasové čtečky a zobrazuje se při selhání načtení obrázku.
• Popište stručně a věcně obsah fotografie (například „Studenti v síťové laboratoři“).
• Vynechte slova jako „obrázek“, „fotka“ i název souboru.
• Dekorativní grafika může mít pole prázdné.

2. Správná hierarchie nadpisů

• Každá stránka smí mít právě jeden hlavní nadpis H1 (nese ho sekce Hero nebo hlavička stránky).
• V textovém editoru používejte pro podnadpisy výhradně Nadpis 2 (H2) a pro dílčí části Nadpis 3 (H3).
• Nikdy nepřeskakujte úrovně nadpisů (například z H1 rovnou na H3).

3. Přístupné dokumenty ke stažení (PDF)

• Dokumenty nahrávejte jako textová PDF s textovou vrstvou.
• Vyhněte se naskenovaným fotografiím stránek bez textu.
• V detailu souboru vyplňte pole Popisek, ze kterého systém sestaví čitelný název odkazu ke stažení.

Nastavení pro vyhledávače (SEO)

Optimalizace pro vyhledávače zajišťuje dohledatelnost stránek školy na Googlu nebo Seznamu.

Na následujícím snímku vidíte formulář úpravy stránky s názvem, adresou a perexem:

Titulky stránek (značka title)

Titulek stránky v záložce prohlížeče a ve vyhledávačích systém skládá automaticky:

Název stránky | Krátký název školy

Například Přijímací řízení | OA Prostějov. Krátký název se nastavuje v poli Krátký název, oficiální název v poli Název školy.

Popisy stránek pro vyhledávače (meta description)

Popis stránky pod titulkem ve vyhledávačích systém přebírá z pole Perex (excerpt) u stránek i aktualit. U úvodní stránky se použije pole Slogan (tagline) ze záznamu školy:

• Perex pište na 1 až 2 věty (kolem 150 znaků).
• Shrňte to nejdůležitější a uveďte hledaná klíčová slova.

Sdílení na sociálních sítích (OpenGraph)

Při vložení odkazu na článek na sociální sítě systém vygeneruje náhled:

• U aktualit předává název článku, text z pole Perex, datum zveřejnění a fotografii z pole Hlavní fotka.
• U stránek slouží pole Náhledový obrázek výhradně pro dlaždice rozcestníků na webu.

Přehledné adresy (slug)

V poli Poslední část adresy (slug) uvádějte název stránky malými písmeny bez diakritiky se slovy oddělenými spojovníkem (například prijimaci-rizeni).

Přesměrování starých adres (kód 301)

Při přechodu ze starého webu nebo WordPressu systém chrání existující odkazy i pozice ve vyhledávačích trvalým přesměrováním kódem 301:

1. Články ze starého webu: Původní adresa /nazev-clanku/ se automaticky přesměruje na novou adresu /aktuality/nazev-clanku. Server předem ověří existenci článku v databázi.
2. Kategorie článků: Adresy ve tvaru /category/<nazev>/ se automaticky přesměrují na filtr /aktuality?kategorie=<nazev>.
3. Lomítka na konci: Adresy zakončené lomítkem se v jediném kroku přesměrují na adresu bez koncového lomítka.

Ochrana testovacích webů před indexací (noindex)

Pracovní verze, testovací weby a náhledy nesmí vyhledávače indexovat:

• Při zapnuté proměnné SITE_NOINDEX=1 server odešle HTTP hlavičku X-Robots-Tag: noindex, nofollow. Roboti vyhledávačů takový web nezařadí do výsledků.
• Stránka interního vyhledávání /hledat má zákaz indexace nastavený trvale, aby vyhledávače neindexovaly kombinace výsledků hledání.
• Automatické generování souborů sitemap.xml a robots.txt pro jednotlivé školy je na roadmapě platformy (současná verze je zatím negeneruje).

Pole a nastavení

Přehled polí ovlivňujících přístupnost a vyhledatelnost:

Pole	K čemu slouží	Povinné	Tip
Alternativní text	Slovní popis fotografie pro nevidomé a čtečky.	Ne	Popište scénu na fotografii, vynechte slovo „fotka“.
Popisek	Textový titulek souboru nebo fotografie.	Ne	U dokumentů tvoří text odkazu ke stažení.
Název stránky	Hlavní nadpis stránky a základ titulku pro vyhledávače.	Ano	Volte srozumitelný název vystihující obsah.
Perex	Jedna věta pod nadpisem, popis pro vyhledávače.	Ne	Uveďte 1 až 2 věty (kolem 150 znaků).
Náhledový obrázek	Obrázek pro dlaždice rozcestníků na webu.	Ne	Volte reprezentativní fotografii s poměrem stran 16 : 9.
Poslední část adresy	Identifikátor stránky v URL adrese (slug).	Ano	Malá písmena bez diakritiky oddělená spojovníkem.
Krátký název	Zkrácené jméno školy pro titulek prohlížeče a patičku.	Ne	Například „OA Prostějov“.
Slogan	Motto školy pro popis úvodní stránky v Google.	Ne	Krátká věta vystihující zaměření školy.

Tipy a doporučení

• Vyplňujte alternativní texty ihned při nahrání: Jakmile nahrajete fotografii do Knihovny médií, rozklikněte její detail, zadejte Alternativní text a klikněte na tlačítko Uložit změny.
• Kontrolujte odkazy na úřední desce: Důležité zprávy ukládejte jako textová PDF a ověřte možnost vyhledávání textu.
• Pište výstižné perexy: Perex představuje text, který uživatel ve vyhledávači uvidí pod odkazem.

Časté chyby

• Chybějící alternativní text: Zrakově znevýhodněný uživatel se nedozví obsah fotografie.
• Přeskakování úrovní nadpisů: Vložení nadpisu H3 přímo pod H1 bez mezilehlého nadpisu H2 mate hlasové čtečky.
• Naskenované PDF bez textu: Naskenovaný dokument z kopírky bez textové vrstvy je pro čtečku prázdný obrázek.
• Příliš dlouhý perex: Perex delší než 160 znaků vyhledávače ve výsledcích useknou.

Související

• Stránky
• Editor textu
• Obrázky
• Soubory ke stažení
• Nastavení školy
• Jak web funguje
• Hledání a navigace