Jak ve WebEditoru zlepšit přístupnost webu

Přístupná webová stránka zaručuje, že všichni uživatelé, včetně uživatelů se zdravotním znevýhodněním, mohou prohledávat, interagovat a rozumět vašemu obsahu. S WebEditorem můžete zlepšit přístupnost úpravou klíčových prvků a dodržováním osvědčených postupů, jako je přidávání alternativního textu k obrázkům nebo přehledný design a obsah vaší stránky. V tomto článku najdete seznam tipů a užitečných zdrojů.  Pokud máte jakékoli dotazy týkající se přístupnosti webových stránek, můžete si přečíst náš návod: Často kladené otázky o přístupnosti webu. 

Poznámka: Ve Webglobe se snažíme poskytovat nástroje potřebné k tomu, abyste mohli tvořit a spravovat webové stránky, které splňují požadavky na přístupnost. Za úplné dodržování těchto požadavků však odpovídáte vy. Proto vám důrazně doporučujeme, abyste se seznámili s místními nebo regionálními zákony týkajícími se přístupnosti, mohou totiž existovat i takové požadavky, které nejsou v tomto článku uvedeny. 

V tomto článku si přečtete o: 

• vizuálních prvcích 
• sluchových prvcích 
• struktuře a designu 
• navigaci 

Vizuální prvky 

Alt texty k obrázkům, ikonám a grafice 

Alt text slouží jako čitelný popis obrázku a může fungovat jako náhrada, pokud návštěvník webu obrázek nevidí. Alt text může být zachycen a přečten čtečkou obrazovky.  Pokyny, kde přidat alternativní text k obrázkům nebo jiným vizuálním prvkům, najdete v následujících návodech: 

• Obrázky (platí i pro SVG a ikony): Jak přidám na WebEditor stránku obrázek?  
• Logo: Přidejte si na svou stránku ve WebEditoru logo 
• Obrázky produktů (e-shop): Správa produktů ve vašem e-shopu 
• Galerie a posuvník obrázků: Jak ve WebEditoru přidat paralaxové posouvání 
• Obrázky k blogu: Začínáme s blogem ve WebEditoru 

K obrázkům na pozadí není třeba přidávat alt text, protože tyto obrázky často slouží jen k dekorativním účelům. Alt text by se měl přidávat pouze k obrázkům, které obsahují důležité informace, slouží k informačním účelům nebo vyžadují interakci návštěvníka webu.  Pokud chcete označit, že obrázek mohou pomocné nástroje přeskočit, přejděte v nastavení obrázků do sekce SEO a přepněte přepínač Nastavit jako dekorativní prvek do polohy ZAPNUTO.  Abyste zajistili úplnou kompatibilitu, doporučujeme zkontrolovat všechny obrázky na vaší stránce a buď k nim přidat alt text, nebo je nastavit jako dekorativní prvky. 

Jazyk stránky 

Nastavení jazyka pro každou stránku na vašem webu zaručuje, že čtečky obrazovky budou moci stránku správně nahlas přečíst. Podrobné pokyny naleznete v tomto návodu: Jak nastavím ve WebEditoru jazyk stránky? 

Sluchové prvky 

Titulky a přepisy pro audio a video 

Ve WebEditoru není možné přidávat titulky ani generovat přepisy pomocí možnosti vlastního hostingu videa. Pro tento problém ale existují dvě řešení: 

• Nahrajte videa prostřednictvím YouTube. Tím zajistíte, že videa budou zobrazena s titulky. Více informací o funkci naleznete v naší příručce: Jak přidat video z YouTube na svou webstránku. 
• Přidejte přepisy samostatně jako snadno přístupný soubor na své stránce. Za tímto účelem můžete použít dokument, o kterém se více dozvíte v naší příručce: Jak vložit dokument na WebEditor stránku? 

Struktura a design 

Sémantické nadpisy 

V rozložení textu na vaší stránce používejte sémantickou hierarchii nadpisů (H1, H2, H3, odstavec). Tato hierarchie odráží způsob logického a smysluplného uspořádání obsahu prostřednictvím značek na HTML stránkách. Používají ji asistenční technologie, jako například čtečky obrazovky, aby pochopily obsah a správně jej zprostředkovaly návštěvníkům webu.  Ve WebEditoru je každý nadpis jasně označen (nadpis 1, nadpis 2 atd.), když použijete textovou komponentu. Nadpis si můžete vybrat z postranního panelu při přidávání nové textové komponenty na vaši stránku nebo ho můžete upravit v panelu vlastností stávajících textových komponent.  Šablony WebEditoru obsahují jasné nadpisy a popisy a standardně se řídí výše uvedenou logikou. 

Kontrastní poměr textu 

Pokud jde o text na webových stránkách, minimální požadavky na kontrastní poměr jsou následující: 

• Nadpisy: 3:1 
• Odstavce: 4,5:1 

Poměr barev textu můžete ve WebEditoru nastavit následovně: 

Je-li funkce barevného tématu ZAPNUTA: 

Pokud na svém webu používáte barevné téma, měli byste upravit kontrastní poměr prostřednictvím nastavení. V tomto návodu je vysvětleno, jak na to: Používání barevného tématu ve WebEditoru. 

Je-li funkce barevného tématu VYPNUTA: 

Když je funkce barevného tématu deaktivována, měli byste upravit kontrastní poměr prostřednictvím globálních nastavení: 

1. Přejděte do Nastavení šablony v pravém dolním rohu editoru. 
2. V zobrazeném menu klikněte na Upravit styly šablony. 
3. Zobrazí se přehled všech stylů textu použitých na vašem webu (text, odkazy, menu, tlačítka a tabulky). Klikněte na ikonu barvy textu pro každou položku, abyste otevřeli nastavení barev. Barvu si můžete vybrat pomocí nástroje pro výběr barev nebo zadat hexadecimální kód.  

 

Poznámka: WebEditor vám nedokáže poskytnout přesné poměry vaší stránky, ale k její analýze a získání potřebných hodnot můžete použít externí nástroje. Doporučujeme vyzkoušet například tento nástroj od WebAIM. V něm můžete zadat hexadecimální kódy pro popředí a pozadí a poté upravovat barvu, dokud nedosáhnete správného kontrastního poměru. Tyto kódy pak můžete zkopírovat a vložit do WebEditoru. 

Netextový kontrast 

Barevné prvky na vaší stránce, které neobsahují text, jako například barvy pozadí sekcí nebo barvy tlačítek, lze zcela přizpůsobit buď prostřednictvím nastavení barevného tématu, nebo globálních nastavení šablony, jak je uvedeno výše.   Styl každého prvku lze dále přizpůsobit prostřednictvím nastavení jeho komponent. Pokud například kliknete na sekci, hlavičku nebo zápatí, zobrazí se vám možnost změnit barvu nebo styl daného prvku. 

Navigace 

Přístup pomocí klávesnice 

Doporučujeme vám, abyste se na svém webu drželi jasného obsahu a vyhýbali se složitým prvkům, jako je obsah aktivovaný najetím myši nebo hover boxy. Ty můžete nahradit běžnými obrázky a odkazy.  Je třeba poznamenat, že rozbalovací menu jsou přístupné prostřednictvím klávesnice. 

Pozastavení, zastavení nebo skrytí obsahu 

Na webu musí být možné manuálně ovládat nebo skrýt všechny pohyblivé nebo interaktivní prvky. Zde je pár prvků, které byste měli zkontrolovat, pokud je na svém webu máte: 

• Posuvník obrázků: Funkce automatického posouvání obrázků je standardně zapnutá, ale můžete ji vypnout a místo toho přidat manuální ovládací prvky. Přejděte do komponenty posuvníku obrázků, klikněte na Nastavení posuvníku obrázků a potom vyberte Navigace, abyste k těmto nastavením získali přístup. 
• GIFy: Nenahrávejte gify prostřednictvím komponenty obrázků, pokud neobsahují ovládací prvky. 
• Obrázky a videa na pozadí: Tyto prvky momentálně nedisponují funkcí přehrávání/pozastavení, ale pracujeme na řešení, které tento požadavek uspokojí. Do té doby doporučujeme se pohyblivým obrázkům nebo videím na pozadí vyhnout. 
• Videa: Ujistěte se, že máte viditelné ovládací prvky na videích a že je vypnuto automatické přehrávání. Více informací o nastaveních videa naleznete v našem návodu: Jak přidám na WebEditor stránku video? 

Blikající obsah  

Doporučujeme vyhnout se obsahu, který obsahuje více než tři bliknutí za sekundu. WebEditor neobsahuje běžný blikající obsah, ale můžete jej nahrát. Doporučujeme vám však, abyste se tomu vyhnuli nebo alespoň umožnili návštěvníkům tento obsah manuálně ovládat a přeskočit.