Záložní lineární navigace

Co je fallback navigace?

Fallback (záložní) navigace je tradiční, lineární menu, které se aktivuje, když radiální menu není dostupné nebo vhodné. Není to jen technická povinnost — je to důležitá součást inclusivního designu.

Představte si to takto: radiální menu je jako krásný moderní restaurant s interaktivním touch stolem. Fallback je klasická nabídka papír a tužka. Oba způsoby by měly fungovat stejně dobře. Každý uživatel si zvolí, co mu vyhovuje.

Srovnění radiálního menu a tradiční vertikální navigace vedle sebe

Kdy se fallback aktivuje?

Fallback navigace by se měla automaticky aktivovat v několika situacích. Jednak když uživatel má zakázaný JavaScript — ano, stále jsou tací uživatelé. Jednak na velmi malých obrazovkách, kde radiální menu zabere příliš místa. A také pro uživatele se čtečkami obrazovky.

Technika se nazývá progressive enhancement. Nejdřív máte funkční HTML s lineárním menu. Pak přidáte CSS pro vzhled. A nakonec JavaScript pro interakci s radiálním menu. Pokud se JavaScript nenačte nebo vypovídá, zůstane vám pořád funkční menu.

Běžné scenáře:

Obrazovka menší než 600px (mobilní zařízení)
JavaScript vypnutý nebo neuploadnutý
Starší prohlížeče (IE11 a starší)
Uživatelé s assistivní technologií
Pomalé připojení — radiální skript se nenačte včas

Mobilní telefon s lineárním menu, dole zobrazeno tradiční hamburger menu

Struktura HTML pro fallback

Správná HTML struktura je základ. Začínáte se standardním seznamem — nic chytrého, jen čistý semantic HTML. Pak pomocí CSS a JavaScriptu to transformujete na radiální menu.

Tady je základní struktura, kterou máte vždycky mít:

                        <nav class="radial-menu">
                        
                        <button class="menu-toggle">Menu</button>
                        
                        <ul class="menu-items">
                        
                        <li><a href="#">Domů</a></li>
                        
                        <li><a href="#">O nás</a></li>
                        
                        <li><a href="#">Služby</a></li>
                        
                        <li><a href="#">Kontakt</a></li>
                        
                        </ul>
                        
                        </nav>

To je to. Bez JavaScriptu se zobrazí normální seznam. S JavaScriptem se změní na radiální menu. Je to snadné, je to čisté, a je to přístupné.

Kód HTML struktury navigačního menu v textovém editoru

CSS pro lineární fallback

CSS je místo, kde se stane kouzlo. Defaultně máte lineární menu — přesně to, co chcete. Pak pomocí CSS tříd to transformujete na radiální verzi, když jsou splněné podmínky.

Fallback CSS je jednoduchý. Menu je skryté, dokud uživatel neklikne na tlačítko. Pak se zobrazí jako vertikální seznam. Úplně standardní dropdown menu, které znají všichni.

Klíčové CSS vlastnosti:

display: none; pro skryté menu — zobrazí se na klik
position: absolute; pro dropdown pozicování
flex-direction: column; pro vertikální uspořádání položek
z-index: 100; aby menu bylo nad ostatním obsahem
transition: opacity 0.2s; pro hladké zobrazení/skrytí

CSS vlastnosti pro vytváření fallback menu stylů

Přístupnost a testování

Tady se věci stávají vážnými. Fallback navigace musí být plně přístupná. To znamená správné atributy ARIA, klávesová navigace a sémantický HTML.

Uživatelé se čtečkami obrazovky by měli slyšet, co se děje. Když se menu otevře, měli by to vědět. Když se zavře, také. Klávesy Tab a Enter by měly fungovat bez problémů.

Checklist testování:

Menu funguje bez JavaScriptu
Klávesová navigace pracuje (Tab, Enter, Escape)
ARIA atributy správně nastavené (aria-expanded, aria-label)
Čtečka obrazovky správně oznámí stavy
Kontrast textu aspoň 4.5:1
Testováno na mobilech do 320px šířky

Praktické příklady degradace

Jak to funguje v praxi? Vývojář vytvoří stránku s radiálním menu. Na velkých obrazovkách se zobrazuje krásné kruhové menu. Na malých obrazovkách se CSS změní a místo toho se zobrazí lineární hamburger menu.

Nejlepší část? Uživatel si to vůbec neuvědomí. Pro něj je to stejný web, jen se přizpůsobí jeho zařízení. To je skutečný responsive design — ne jen fluidity, ale inteligentní adaptace.

Když se JavaScript nenačte (třeba chyba na serveru nebo pomalá síť), zůstane lineární menu aktivní. Stránka bude fungovat bez chyby. Uživatel si bude myslet, že to je jen staré jednoduché menu — neví, že by mělo být radiální.

Závěr: Design bez kompromisů

Fallback navigace není zpětný krok. Je to průmyslový standard. Nejlepší weby na internetu mají fallback. Apple má fallback. Netflix má fallback. Nemusíte si vybírat mezi krásným radiálním designem a fungujícím webem — můžete mít oboje.

Klíč je plánování od začátku. Když navrhujete radiální menu, začněte s lineárním. Otestujte to. Pak přidejte radiální vrstvu. Takový postup vám zajistí, že web bude fungovat všem — ať už mají starý prohlížeč, pomalou síť nebo používají přístupnostní technologie.

To je skutečný web design pro dnešek.

Poznámka k implementaci

Obsah této příručky je informativní. Konkrétní implementace se bude lišit podle vašeho projektu, použitého frameworku a cílové skupiny uživatelů. Doporučujeme testování na reálných zařízeních a se skutečnými uživateli před nasazením do produkce. Příslušná specifikace WCAG 2.1 a HTML5 standardy jsou všeobecně uznávanými pokyny pro dostupnost.