Jesteś tutaj:Strona główna / Wytyczna 2.4 Nawigacja / 2.4.1 Bezpośredni dostęp (A)

2.4.1 Bezpośredni dostęp (A) - WCAG 2.0

Każdy z nas chce szybko dotrzeć do interesujących go informacji. Niewielu ma czas na odczytywanie i analizowanie wszystkich treści na stronie internetowej. Użytkownicy bez dysfunkcji mają ten komfort, że wzrokowo są w stanie szybko wyselekcjonować i odszukać interesujące elementy lub przy użyciu myszy szybko przewinąć stronę góra/dół. A co np. z użytkownikami niewidomymi? Programy czytające odczytują treści liniowo, więc odszukanie interesującej informacji trwa nieprzyzwoicie długo. Dobrze, ale przecież każdy program czytający posiada skróty klawiaturowe, dzięki którym można poruszać się po dowolnych elementach serwisu: nagłówkach, linkach, listach, polach formularzy, akapitach, etc., więc w czym tkwi problem? Problemem jest czas, szybkość i gwarancja dotarcia do pożądanej informacji.

Możemy szybko i małym nakładem pracy ułatwić nawigację i pominięcie powtarzających się na podstronach stałych elementów, jak np. informacje w nagłówku czy menu serwisu. Pierwszą informacją „wyświetloną” (informacja ta niekoniecznie musi być widoczna w serwisie) przez przeglądarkę będzie menu służące do przechodzenia, bez przeładownia strony, do istotnych treści serwisu za pomocą kotwic.

Przykład kodu

HTML
<body>
  <a name="top" id="top"></a>
 <ul class="nav">
  <li><a href="#mm" tabindex="1">Przejdź do menu głównego</a></li>
  <li><a href="#txt" tabindex="2">Przejdź do treści</a></li>
  <li><a href="#srch" tabindex="3">Przejdź do wyszukiwarki</a></li>
  <li><a href="index.php?p=map" tabindex="4">Mapa strony</a></li>
 </ul>
…
<a name=”mm” id=”mm”></a>
<h2>Menu główne</h2>
…
<a name=”srch” id=”srch”></a>
<h2>Wyszukiwarka</h2>
…
<a name=”txt” id=”txt”></a>
<h2>Nagłówek treści</h2>
…
<a href="#top">Przejdź na początek</a>
</body>

CSS
.nav a {
    display: inline;
    font-size: 1.27em;
    left: -9000em;
    padding: 5px 10px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 150px;
    z-index: 1;
}

.nav a:hover,
.nav a:focus,
.nav a:active {
    background: #4B4B4B;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    left: 0;
    top: 0;
    position: absolute;
}

Powyższy zapis spowoduje, że menu o identyfikatorze „nav” nie będzie widoczne na stronie, ponieważ jest wysunięte poza margines (position:absolute, left:-9000px). Dla programów czytających linki pozostaną widoczne, gdyż dla nich nie ma znaczenia pozycja elementu określona w CSS. Liczy się kolejność osadzenia w kodzie HTML. Dlatego umieściliśmy menu na samym początku ciała dokumentu. Będą to więc pierwsze informacje, po tytule strony, jakie odczyta screen reader.
W szybki sposób użytkownik może dotrzeć od razu do menu czy treści serwisu. Dla użytkowników, korzystających z klawiatury, menu pojawi się podczas poruszania się np. przy pomocy klawisza Tab, dzięki zdefiniowanej pseudoklasie :focus.
Zaleca się jednak aby skip linki takie jak „Przejdź do treści” czy „Przejdź do góry” były widoczne cały czas.

Uwaga:  Aby ukrywać tekst tylko z wizualnego przekazu, nie należy stosować właściwości:

  • visibility: hidden;
  • display: none;

ponieważ ukrywają one tekst dla wszystkich użytkowników. Tekst jest usuwany z wizualnego przekazu oraz jest ignorowany przez czytniki ekranu.
Jeśli chcemy ukrywać elementy na stronie, które zaburzają układ, ale nie mają znaczenia dla osób widzących a musza być dostępne dla technologii asystujących, jak np. czytniki ekranu, możemy stworzyć uniwersalną klasę w CSS, dzięki której schowamy każdy element HTML.

.hide {
    height: 1px;
    width: 1px;
    position: absolute;
    left: -10000em;
    top: 0;
}

Widok skiplinków gdzie użycie klawisza Tab aktywuje menu

Powrót do: Wytyczna 2.4 Nawigacja