Zapoznaj się z 4 zasadami dostępności
Jesteś tutaj:Strona główna / Wytyczna 2.4 Nawigacja / 2.4.8 Lokalizacja (AAA)
2.4.8 Lokalizacja (AAA) - WCAG 2.0
W serwisie internetowym zawsze musimy wskazać użytkownikowi, w którym miejscu aktualnie się znajduje. Najpopularniejszą metodą jest ścieżka okruszków (breadcrumb – okruszki chleba). To nic innego, jak linki powrotne do stron nadrzędnych, które użytkownik poprzednio przemierzył, aby dotrzeć do aktualnej strony.
<p id=”breadcrumb”>
Jesteś tutaj:
<a href="/">Strona główna</a>
<span> / </span>
<a href="/prawo_o_dostepnosci">Prawo o dostępności</a>
<span> / </span>
<a href="/prawo_polskie"><strong>Prawo polskie</strong></a>
</p>
W powyższym przykładzie separator pomiędzy poszczególnymi okruszkami osadzony jest w elemencie <span>, co pozwala nam w CSS dowolnie go zmodyfikować, np. nałożyć ładną graficzną ikonę.
W przypadku, gdy w serwisie musimy wykonać jakąś czynność w kliku krokach, jak np.: zarejestrować się, złożyć zamówienie w sklepie, wypełnić ankietę lub test, itp., również musimy użytkownika poinformować, w którym kroku się znajduje i jak dużo do przejścia mu pozostało.
Pomimo tego, że w powyższym przykładzie aktualny krok jest oznaczony graficznie (inne tło i kolor) to użytkownicy, korzystający z programów czytających również będą wiedzieli, w którym kroku się znajdują, ponieważ w kodzie HTML przy aktywnym kroku znajduje się tekst „bieżący”, ukryty w CSS. Ten sam widok poszczególnych kroków z wyłączonymi stylami:
<ul>
…
<li>
<a class="stepActive" title="Krok 4 (bieżący)" href="?step=4">
<span class="hide">Krok </span>
<span class="number">4 </span>
<span class="hide">(bieżący)</span>
<span class="hide">: </span>
<span class="textActive">Mapa interesariuszy</span></a>
</li>
…
</ul>
Powrót do: Wytyczna 2.4 Nawigacja
Dołącz do nas