Drobečková navigace – Jak na přístupnost

Drobečková navigace je jedním z prvků, které uživatelům usnadňují orientaci v hierarchii webových stránek tím, že zobrazuje cestu nadřazenými stránkami, kterými se lze dostat k aktuální stránce počínaje stránkou domovskou. Výčet stránek tvořících tuto cestu bývá zobrazen nejčastěji horizontálně, avšak vertikální rozložení je také možné. V tomto článku se zaměříme na vlastnosti, které by drobečková navigace měla splňovat s ohledem na přístupnost především pro zrakově postižené uživatele používající k ovládání počítače odečítač obrazovky.

Doporučená forma a implementace

• Drobečková navigace by měla být obalena do navigační oblasti (landmarku) <nav role="navigation">. Tím uživatelům odečítačů obrazovky usnadníte nalezení této navigační oblasti, neboť uživatel odečítače se může pohybovat po oblastech stránky, případně nechat si vypsat seznam všech oblastí a na vybranou oblast přeskočit.

• Navigační oblast z předchozího bodu obsahující drobečkovou navigaci by ještě měla být pojmenována pomocí atributu aria-label, případně aria-labelledby. Doporučujeme tuto navigační oblast pojmenovat „Nacházíte se zde“, jelikož pojmenování „Drobečková navigace“ nemusí být srozumitelné všem uživatelům. Při vstupu do navigační oblasti odečítač obrazovky oznámí uživateli kromě faktu, že vstupuje do navigační oblasti, právě také její pojmenování, takže uživatel zjistí, kam se přesouvá.

• Doporučujeme navigační oblast drobečkové navigace umístit těsně před oblast hlavního obsahu <main role="main">, aby nepřekážela při procházení stránky od hlavního obsahu směrem dolů.

• Odkazy na jednotlivé stránky drobečkové navigace by měly být řešeny jako položky nečíslovaného seznamu <li> v rámci elementu <ul>. Tím bude struktura drobečkové navigace sémanticky oznámena uživatelům odečítačů jako seznam s určitým počtem položek.

• Symboly sloužící jako oddělovače položek tvořících drobečkovou navigaci by neměly být realizovány jako text, např. pomocí znaku lomítka nebo znaménka větší než, ale pouze graficky pomocí CSS, např. za použití obrázku oddělovače pomocí CSS vlastnosti background nebo background-image napozicovaného napravo od položky drobečkové navigace. To proto, aby odečítače tyto symboly oddělovačů uživatelům nadbytečně nečetly při procházení položek drobečkové navigace.

• Jestliže je aktuální stránka v drobečkové navigaci realizována jako odkaz, tak by tento odkaz měl mít nastaven atribut aria-current="page". Pokud aktuální stránka odkazem není, tak tento atribut být přítomen nemusí.

Zdroje informací a funkční ukázka

Většina doporučení z tohoto článku má oporu v popisu vzoru drobečkové navigace od autority W3C. K dispozici je také funkční ukázka včetně zdrojového kódu a jeho vysvětlení.

Související kritéria úspěšnosti standardu WCAG

Výše zmíněná doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

• 1.3.1 – Info and Relationships.

• 2.4.8 – Location.

• 4.1.2 – Name, Role, Value.

Autor: Adam Samec