Link “Pomiń nawigację” - dostępne strony
Artykuły, dostępność sierpień 12th, 2008Większość developerów, designerów oraz managerów projektów jest przekonana, że zaprojektowanie i implementacja dostępnej strony internetowej jest droga i skomplikowana. Mija się to zupełnie z prawdą, co będę się starał pokazać w moich artykułach poświęconych dostępności.
Link “Pomiń nawigację” jest ogromnym udogodnieniem dla osób niewidomych oraz tych, którzy przy przemieszczaniu się w Internecie nie korzystają z urządzeń typu mysz lub kot. Urządzenia czytające strony internetowe zawsze zaczynają od lewego, górnego rogu i linia po linii przesuwają się w dół zawartości. Większość serwisów internetowych na samej górze strony umieszcza, zgodnie ze standardami i dobrą praktyką, nagłówek i menu główne, dlatego screen reader
przy każdym odświeżeniu okna przeglądarki, bądź kliknięciu linku, przesuwa się do punktu startowego i zaczyna czytać od nowa. Po krótkiej chwili staje się to irytujące, monotonne, nieprzydatne i bardzo spowalnia użytkownika.
Właśnie do tego celu stosuje się linki “Pomiń nawigację“. Jest kilka dostępnych standardów, pokrótce opiszę trzy, każdy z nich ma swoje wady i zalety:
- link na górze strony
- niewidzialne linki
- link widoczne jedynie po zaznaczeniu
Pierwszy i najłatwiejszy sposób to użycie normalnych tekstowych odnośników zakotwiczonych w miejscu, gdzie zaczyna się zawartość strony.
<body>
<a href=”#zawartoscstrony”>Skip navigation</a>
…
<h1><a name=”zawartoscstrony” id=”zawartoscstrony“></a>Nagłówek</h1>
<p>Pierwszy paragraf tekstu na stronie</p>
Ta metoda jest bardzo dostępna, ale większość designerów wolałaby ukryć linki, które większości użytkowników się nie przydadzą. Stąd druga metoda - niewidzialne linki - ukryte przed okiem użytkownika, ale czytelne dla przeglądarek dla niewidomych. W tym celu, używając stylów CSS przesuwamy link powyżej “pola widzenia” okna przeglądarki.
HTML
<div id="pomin"><a href="#zawartoscstrony">Pomiń nawigację</a></div>
CSS
#pomin a, #pomin a:hover, #pomin a:visited
{
position: absolute;
left: 0px;
top: -1000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Zaletą jest czytelność kodu dla przeglądarek dla niewidomych, ale nie skorzystają z niej osoby nie używające myszy lub kota. Ostatnia metoda satysfakcjonuje oba przypadki użytkowników - jest to ukryty link, pojawiający się na ekranie po wybraniu go przyciskami klawiatury.
HTML
<div id="pomin"><a href="#zawartoscstrony">Pomiń nawigację</a></div>
CSS
#pomin a, #pomin a:hover, #pomin a:visited
{
position: absolute;
left: 0px;
top: -1000px;
width: 1px;
height: 1px;
overflow: hidden;
}
#pomin a:active, #pomin a:focus
{
position: static;
width: auto;
height: auto;
}
Przykład znajduje się na stronie Jima Tatchera, proszę przejść na jego stronę i przycisnąć klawisz tabulacji.
Nasza firma zajmuje się analizą, projektowaniem i implementacją dostępności na stronach internetowych. Aby dowiedzieć się więcej zapoznaj się z naszą ofertą, lub kliknij przycisk poniżej i zamów wycenę.
Ostatnie Komentarze