WCAG 2.0 - Wytyczna 2.4 Nawigacja - 2.4.8 Lokalizacja (AAA)

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>