Checklist přístupnosti pro Divi 5: nadpisy, sémantika, breadcrumbs a tooltipy

Affiliate upozornění: Pokud si přes odkazy v tomto článku pořídíte Divi, můžeme získat provizi. Cenu vás to nijak nezvýší a na našem hodnocení to nic nemění.

Přístupný web není luxus ani jen vstřícnost – je to web, který používají všichni návštěvníci, dobře se indexuje a v EU na něj u řady subjektů míří legislativa (European Accessibility Act). Divi 5 (Elegant Themes) dává nástroje, jak přístupnost postavit správně: sémantické moduly, vlastní HTML wrappery, breadcrumbs a tooltipy. Ale přístupnost není zaškrtávátko v builderu – je to disciplína při skládání stránky. Divi 5 je aktivně vyvíjená platforma (verze 5.8, červen 2026).

Tady je praktický checklist přístupnosti pro weby stavěné v Divi 5.

Struktura nadpisů: jeden H1, logická hierarchie

Základ, na kterém stojí čtečky obrazovky i SEO:

• Jeden H1 na stránku – obvykle titulek. Ne víc.
• Nepřeskakujte úrovně – po H2 jde H3, ne rovnou H4. Nadpis se nevybírá podle velikosti písma, ale podle místa ve struktuře.
• V Divi 5 hlídejte, že textové a nadpisové moduly mají správnou úroveň, ne jen vizuální velikost.

Správná hierarchie nadpisů je zároveň podmínkou, aby fungoval Table of Contents modul Divi 5 – ten generuje obsah právě z nadpisů.

Sémantické wrappery místo samých divů

Builder má tendenci sázet všechno do <div>. Pro přístupnost a pro vyhledávač ale potřebujete sémantické prvky – <header>, <nav>, <main>, <article>, <footer>. Divi 5 umožňuje u modulů a sekcí ovlivnit HTML wrapper / použít vlastní HTML modul tam, kde sémantika rozhoduje (hlavně landmarky stránky). Čtečka obrazovky pak nabídne navigaci po oblastech, ne nekonečný proud divů.

Breadcrumbs jako navigační pomoc

Breadcrumbs modul v Divi 5 není jen SEO prvek – pro uživatele čtečky je to orientační vodítko „kde jsem a jak se dostanu o úroveň výš". Zařaďte ho do šablon v Theme Builderu, ať je konzistentní napříč webem.

Tooltipy přístupně

Divi 5 přidal Tooltip modul. Tooltip je užitečný, ale snadno se udělá nepřístupně. Hlídejte:

• aby obsah tooltipu byl dosažitelný i z klávesnice (ne jen na hover myší),
• aby kritická informace nebyla jen v tooltipu – tooltip doplňuje, nenahrazuje,
• dostatečný kontrast textu tooltipu.

Klávesnice, kontrast, alt text

• Klávesnicová ovladatelnost. Celý web projděte jen Tabem – menu, formuláře, tlačítka, modální okna. Co nejde z klávesnice, je nepřístupné. Viditelný focus stav nevypínejte.
• Kontrast. Text vs. pozadí podle WCAG: minimálně 4,5:1 pro běžný text, 3:1 pro velký. Změřte ho, neodhadujte od oka.
• Alt texty. Každý informační obrázek popisný alt; dekorativní obrázek prázdný alt="", ať ho čtečka přeskočí. U galerií Divi 5 doplňte alt u každé položky.

SVG přístupně

Divi 5 přidal SVG modul, který bere SVG markup přímo a umožní řídit stroke a fill. Z hlediska přístupnosti:

• dekorativní SVG skryjte před čtečkou (aria-hidden="true"),
• informační / interaktivní SVG (ikona s významem, klikací prvek) opatřete přístupným názvem (<title> / aria-label),
• nespoléhejte na barvu jako jediný nosič informace – barvoslepý uživatel ji nerozliší.

Časté dotazy

Udělá Divi 5 web přístupný automaticky?

Ne. Dá vám sémantické moduly, breadcrumbs, vlastní HTML wrappery a SVG modul, ale strukturu nadpisů, kontrast, alt texty a klávesnicovou ovladatelnost musíte ohlídat při skládání stránky.

Kolik H1 má být na stránce?

Jeden. Zbytek nadpisů H2/H3 v logické, nepřeskakované hierarchii.

Jak udělat tooltip přístupně?

Obsah musí být dosažitelný z klávesnice, mít dostatečný kontrast a kritická informace nesmí žít jen v tooltipu.

Co s dekorativními ikonami v SVG modulu?

Skryjte je před čtečkou přes aria-hidden="true". Informační SVG naopak opatřete názvem a nespoléhejte jen na barvu.

Závěr

Přístupnost v Divi 5 je o tom, jak builder použijete: jeden H1 a čistá hierarchie nadpisů, sémantické wrappery místo samých divů, breadcrumbs pro orientaci, přístupné tooltipy a SVG, ovladatelnost z klávesnice, dostatečný kontrast a poctivé alt texty. Moduly to umožní, ale rozhoduje disciplína – a odměnou je web použitelný pro všechny a lépe indexovatelný.

Vyzkoušet Divi 5

Zdroje a další čtení