blog na temat dostępności stron internetowych

Przejdź do głównej treści

Prawidłowe opisywanie linków

Linki należą do jednych z podstawowych elementów HTML – to one umożliwiają nawigację pomiędzy stronami i stanowią “spoiwo” scalające strony danego serwisu internetowego. Wszystkie odnośniki, czy to do innej strony WWW czy też do innego miejsca na bieżącej stronie, powinnny mieć jasno określony cel; użytkownik powininen wiedzieć, dokąd dany link go zaprowadzi. Cel każdego odnośnika powinien być opisany za pomocą tekstu zawartego w elemencie <a>.

Podstawową zasadą dostępności w odniesieniu do linków jest upewnienie się, że cel każdego odnośnika jest jednoznacznie opisany poprzez tekst linku, bez konieczności odwoływania się do kontekstu, w jakim został on użyty. I tak na przykład następujący link spełnia to kryterium:

<p>Jeśli masz jakieś sugestie lub pytania, <a href="kontakt.html">skontaktuj się z nami</a>.</p>

Natomiast tekst odnośnika wyświetlonego poniżej (słowo “tutaj”) nie opisuje jego celu. Aby zrozumieć cel tego odnośnika niezbędna jest znajomość kontekstu, w jakim został on użyty (zdanie, w którym został zamieszczony):

<p>Jeśli masz jakieś sugestie lub pytania, kliknij <a href="kontakt.html">tutaj</a>.</p>

Autorzy stron dość często stosują teksty linków typu “kliknij tutaj”, czy też “więcej”. Chociaż dla widzących użytkowników cel opisanych w ten sposób odnośników może być oczywisty (ze względu na to, jak linki te są wyświetlone, czy też gdzie są położone w odniesieniu do pozostałych elementów strony), dla osób niewidomych lub niedowidzących może stanowić to problem.
Warto też pamiętać, że osoby posługujące się czytnikami ekranu mają do dyspozycji funkcję, która umożliwia wyświetlenie listy wszystkich linków obecnych na stronie. W przypadku, gdy odnośniki mają nieopisowe teksty, ich cel będzie kompletnie niezrozumiały, gdy zostaną one wyrwane z kontekstu:

lista następujących linków: 'przeczytaj tutaj', 'kliknij tu', 'dalej', 'Przejdź do artykułu', 'tutaj' i 'dowiedz się więcej'
Fragment okienka czytnika ekranu przedstawiającego listę linków zamieszczonych na stronie

Linki są niczym drogowskazy: powinny informować, dokąd nas kierują. Wyobraźmy sobie miasteczko, w którym rozmieszczono znaki mające wskazywać drogę ku głównym atrakcjom turystycznym. Strzałki z napisami typu “tędy”, “dalej”, “idź” nie będą specjalnie pomocne, jeżeli nie wiadomo dokąd prowadzą…

Dlatego też zawsze najlepiej jest, gdy cel linków jest jednoznacznie opisany przez sam tekst linku. Jeśli nie chcemy wyświetlić całości tekstu (i jesteśmy absolutnie pewni, że wybrany fragment tekstu odnośnika będzie wystarczająco klarowny dla widzących użytkowników), jego część możemy ukryć przy pomocy CSS, np.:

<h2>Otwarcie trzeciej linii metra w Warszawie</h2>
<p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>
<a href="...">Przeczytaj więcej<span class="ukryj"> o otwarciu trzeciej linii metra w Warszawie</span></a>

Opisowe… ale bez przesady

Teksty linków powinny jasno opisywać ich cel, ale jednocześnie być możliwie zwięzłe. Nie należy oznaczać całych paragrafów tekstu jako odnośników (w jednym z audytów, które ostatnio przeprowadzałam, natknęłam się na całe tabele zawarte w elementach <a>…) Jeżeli robimy to w celu stworzenia większej powierzchni interaktywnej (użytkownikom łatwiej jest kliknąć / nacisnąć na paragraf tekstu niż na pojedyncze słowo), lepiej jest wykorzystać do tego skrypt. Istnieją pluginy JavaScript, za pomocą których można odszukać link zawarty w większym elemencie (takim jak np. <div> czy <article>), i przekształcić cały ten element w interaktywny komponent bez niepotrzebnego wydłużania tekstu odnośnika. Ponownie posługując się analogią drogowskazów w mieście, jaki znak byłby bardziej pomocny: strzałka z napisem “Stacja kolejowa” czy też z tekstem typu: “Jeśli pójdą państwo tą drogą, wkrótce dojdą państwo do tutejszej stacji kolejowej”?

Teksty odnośników a kryteria WCAG 2.0

Kryterium sukcesu A “2.4.4 Cel linku (w kontekście)” jest dość pobłażliwe w odniesieniu do linków i dopuszcza sytuacje, w których sam tekst linku nie opisuje wystarczająco jego celu. Chociaż (jak wspomniałam powyżej) nie jest to idealne rozwiązanie, cel odnośników może być jedynie częściowo opisany za pomocą tekstu linku, pod warunkiem, że jest w odpowiedni sposób uzupełniony:

2.4.4 Cel linku (w kontekście): Cel każdego linku może wynikać z samej treści linku, lub też z treści linku powiązanej z programistycznie określonym kontekstem, poza tymi przypadkami, kiedy cel łącza i tak byłby niejasny dla użytkowników.

“Programistycznie określony kontekst”

Co rozumie się przez to pojęcie? Niektóre treści oznaczone za pomocą określonych elementów HTML są ze sobą w naturalny sposób powiązane i technologie asystujące (takie jak czytniki ekranu) rozpoznają te związki i są w stanie przekazać je swym użytkownikom.

W zapewnianiu kontekstu nieopisowym linkom możemy zatem wykorzystać następujące rodzaje programistycznie określonego kontekstu:

  • jeśli link jest częścią zdania, to jego cel może zostać opisany poprzez kombinację tekstu linku i reszty zdania, w którym został on zamieszczony, np:
    <p><a href="...">Dowiedz się więcej</a> na temat historii Gdańska.</p>
    

    (choć oczywiście znacznie lepiej byłoby po prostu oznaczyć słowa “historii Gdańska” jako link)

  • jeśli link jest częścią paragrafu (<p>), jego cel może zostać opisany poprzez tekst linku i pozostały tekst zawarty w tym paragrafie:
    <p>Rozpoczęliśmy już przygotowania do przyszłorocznej konferencji! Więcej na ten temat dowiesz się <a href="...">tutaj</a>.</p>
    
  • jeśli link jest częścią elementu listy, jego cel może zostać opisany poprzez tekst linku oraz pozostały tekst zawarty w elemencie listy:
    <ul>
      <li>Wakacje 2015 - <a href="...">zobacz zdjęcia</a></li>
      <li>Boże Narodzenie 2015 - <a href="... ">video</a></li>
    </ul>
    
  • jeśli link został zamieszczony w elemencie zagnieżdżonej listy, to jego cel może zostać opisany poprzez połączenie tekstu odnośnika z tekstem zawartym w elemencie listy, który jest “rodzicem” elementu listy, w którym znajduje się link. Brzmi bardzo zawikłanie, ale mam nadzieje, że poniższy przykład lepiej to wyjaśni:
    <ul>
      <li>Raport 2014-2015
        <ul> 
          <li><a href="raport_14-15.html">wersja HTML</a></li>
          <li><a href="raport_14-15.pdf">wersja PDF</a></li>
          <li><a href="raport_14-15.rtf">wersja RTF</a></li>
        </ul>
      </li>
      <li>Raport 2013-2014
        <ul> 
          <li><a href="raport_13-14.html">wersja HTML</a></li>
          <li><a href="raport_13-14.pdf">wersja PDF</a></li>
          <li><a href="raport_13-14.rtf">wersja RTF</a></li>
        </ul>
      </li>
    </ul> 
    
  • jeżeli link jest zamieszczony w komórce tabeli, jego cel można opisać za pomocą jego tekstu, pozostałej treści zamieszczonej w tej samej komórce oraz tekstu w powiązanej z tą komórką komórki nagłówkowej:
    <table>
      <caption>Ceny wynajmu samochodów</caption>
      <thead>
        <tr>
          <th scope="col">Typ samochodów</th>
          <th scope="col">Alamo</th>
          <th scope="col">Budget</th>
          <th scope="col">National</th>
          <th scope="col">Avis</th>
          <th scope="col">Hertz</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Klasa ekonomiczna</th>
          <td><a href="econ_ala.htm">67 zł/dzień</a></td>
          <td><a href="econ_bud.htm">69 zł/dzień</a></td>
          <td><a href="econ_nat.htm">72 zł/dzień</a></td>
          <td><a href="econ_av.htm">74 zł/dzień</a></td>
          <td><a href="econ_hz.htm">75 zł/dzień</a></td>
        </tr>
        <tr>
          <th scope="row">Samochody średniej wielkości</th>
          <td><a href="mid_ala.htm">79 zł/dzień</a></td>
          <td><a href="mid_bud.htm">80 zł/dzień</a></td>
          <td><a href="mid_nat.htm">83 zł/dzień</a></td>
          <td><a href="mid_av.htm">85 zł/dzień</a></td>
          <td><a href="mid_hz.htm">85 zł/dzień</a></td>
        </tr>
      </tbody>
    </table>  
    

Stworzenie programistycznie określonego kontekstu za pomocą atrybutów ARIA

Jeśli nieopisowy link nie jest programistycznie powiązany z żadnym elementem, który zapewniłby niezbędny do zrozumienia celu odnośnika kontekst, możemy stworzyć ten brakujący programistyczny związek poprzez zastosowanie odpowiednich atrybutów ARIA.
Jednym z najczęstszych przypadków, gdy stosowane są nieopisowe linki typu “Przeczytaj więcej”, są krótkie zapowiedzi artykułów, które zwykle składają się z nagłówka, tekstu, czasem obrazka, oraz linku do pełnej treści artykułu, np.

<h2>Otwarcie trzeciej linii metra w Warszawie</h2>
<p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>
<a href="...">Przeczytaj więcej</a>

Najprostszym rozwiązaniem jest usunięcie odnośnika i w zamian umieszczenie zawartości nagłówka w elemencie <a>:

<h2><a href="...">Otwarcie trzeciej linii metra w Warszawie</a></h2>
<p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>

Jeśli jednak z jakiegoś powodu nie jest to możliwe czy też pożądane, możemy posłużyć się następującymi rozwiązaniami:

  • użycie atrybutu aria-describedby:
    <h2 id="wiadomosc-1">Otwarcie trzeciej linii metra w Warszawie</h2>
    <p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>
    <a href="..." aria-describedby="wiadomosc-1">Przeczytaj więcej</a>
    

    W tym przypadku czytniki ekranu odczytają nie tylko treść linku (“Przeczytaj więcej”), ale także zawartość powiązanego z nim nagłówka.

  • zastosowanie atrybutu aria-label:
    <h2>Otwarcie trzeciej linii metra w Warszawie</h2>
    <p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>
    <a href="..." aria-label="Trzecia linia metra w Warszawie wreszcie otwarta">Przeczytaj więcej</a>
    

    W tej sytuacji, gdy użytkownik czytnika ekranu przeniesie fokus do powyższego odnośnika, jedyną odczytaną treścią będzie zawartość atrybutu aria-label.

  • użycie atrybutu aria-labelledby:
    <h2 id="wiadomosc-1">Otwarcie trzeciej linii metra w Warszawie</h2>
    <p>Lorem ipsum dolor sit amet, ex mel dictas audire legendos, mei an modo putent debitis. Vis vidit hendrerit at, ex vel prima rationibus.</p>
    <a href="..." id="wiadomosc-1_link" aria-labelledby="wiadomosc-1_link wiadomosc-1">Przeczytaj więcej</a>
    

    Ponownie jak w przypadku aria-describedby, także i w tej sytuacji czytniki ekranu odczytają treść linku oraz zawartość powiązanego z nim nagłówka.

Poziom AAA

Na poziomie AAA wytyczne WCAG 2.0 są dużo bardziej restrykcyjne i zalecają, by tekst każdego linku był na tyle opisowy, aby jego cel był oczywisty bez znajomości kontekstu, w jakim został on użyty:

2.4.9 Cel linku (z samego linku): Dostępny jest mechanizm umożliwiający zidentyfikowanie celu każdego linku z samej jego treści, poza tymi przypadkami, kiedy cel łącza i tak byłby niejasny dla użytkowników.

Aby spełnić to kryterium nadal można ukryć część tekstu linku przy pomocy CSS, czy też zastosować atrybut aria-label.

Podsumowanie:

  • zawsze staraj się stosować teksty linków, które jednoznacznie opisują ich cel i są możliwie zwięzłe
  • jeśli nie jest to możliwe, upewnij się, że tekst każdego z linków posiada programistycznie określony kontekst, który pozwoli osobom posługującym się czytnikami ekranu na zrozumienie celu nieopisowych odnośników
  • unikaj słowa “kliknij” w tekstach linków – pamiętaj, że nie każdy użytkownik posługuje się myszą

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>