Dzień 22: Używanie prawdziwych list (albo dobrze udawanych)

Załóżmy, ze masz listę linków do innych stron albo innych blogów. Zamiast nudnej czarnej kropki używanej w standardowych listach chcesz mieć fantazyjny obrazek przy każdej pozycji. Najczęściej robi się to wstawiając tag <img> przed każdą pozycją. To działa jak należy i możesz łatwo zapewnić dostępność takiej listy przez zastosowanie odpowiedniego atrybutu alt dla każdego obrazka.

Możesz nawet pójść dalej i użyć prawdziwych tagów do budowy list (<ul> i <li>), a następnie za pomocą CSS zmienić nudną czarną kropkę na obrazek. Oprócz tego, że jest to "właściwy sposób robienia takich rzeczy" w pewnym sensie akademickim, na którym może, ale nie musi Ci zależeć, taka technika daje pewne dodatkowe korzyści w zakresie dostępności strony.

Kto na tym skorzysta?

  1. Marek skorzysta. Jak widzieliśmy wczoraj, Lynx pokazuje nazwę pliku dla każdego obrazka bez zdefiniowanego atrybutu alt.

  2. Michał skorzysta. Links nigdy nie pokazuje obrazków, ale domyślnie nie pokazuje niczego dla obrazków bez tekstu alt. To było akceptowalne wczoraj, kiedy chcieliśmy zignorować przezroczyste obrazki pozycjonujące, ale dzisiaj chcemy wyraźnie zaznaczyć, że to są elementy listy, więc potrzebujemy mieć nie puste atrybuty alt.

    Również kiedy Michał wyłączy pobieranie grafiki w Operze, pokaże ona tekst alternatywny z atrybutu alt zamiast napisu "Image" informującego o miejscu, w którym powinien być obrazek. Natomiast jeśli zastosujesz sposób zaawansowany opisany poniżej, Opera zachowa się jeszcze lepiej, ponieważ przy wyłączonych obrazkach pokaże standardowe wypunktowanie za pomocą kropki.

  3. Jadzia skorzysta. Jak widzieliśmy wczoraj, JAWS odczytuje nazwę pliku każdego obrazka bez zdefiniowanego atrybutu alt. W ten sposób treści linków znikną w masie nic nie znaczących nazw plików. Oto jak Jadzia usłyszy przykład przedstawiony niżej:

    fancy dot dot gif link slashdot, fancy dot dot gif link the register, fancy dot dot gif link dive into mark

    Dopisanie gwiazdki jako tekstu alternatywnego ogromnie poprawia sytuację. JAWS zorientuje się, że dany obrazek jest używany do wypunktowania, i w ogóle go przemilczy. Niestety Home Page Reader nadal odczytuje gwiazdki dosłownie, więc użytkownicy tego programu usłyszą:

    asterisk link slashdot, asterisk link the register, asterisk link dive into mark

    Dlatego najlepiej jest używać prawdziwych znaczników list (sposób zaawansowany poniżej). Jeśli cała definicja wyglądu jest zapisana w arkuszu CSS, to nic nie zaśmieca kodu strony, więc zarówno JAWS jak i Home Page Reader po prostu przeczyta te linki tak, jak powinny być przeczytane - jako listę. Brzmiałoby to tak:

    link slashdot, link the register, link dive into mark

Jak to zrobić?

Jeżeli masz listę linków wyglądającą np. tak:

<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

dodaj atrybut alt do wszystkich obrazków wypunktowania. Najlepiej użyj gwiazdki jako tekstu alternatywnego, tak aby zasymulować wygląd listy przy użyciu prawdziwych tagów <li>. (Aby ten tekst nie pokazywał się w przeglądarkach graficznych, można dodać jeszcze pusty atrybut title.)

<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.slashdot.org/">Slashdot</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://www.theregister.co.uk/">The Register</a> <br>
<img alt="*" title="" src="/images/fancydot.gif" width="8" height="8"> <a href="http://diveintomark.org/">dive into mark</a> <br>

Jak to zrobić: sposób zaawansowany

Zaawansowana (i zalecana) technika wykorzystuje CSS dla zdefiniowania obrazka, który będzie użyty do wypunktowania listy:

<style type="text/css">
ul.blogroll {
  list-style: url(/images/fancydot.gif) disc;
}
</style>

Następnie w kodzie strony (w szablonie) można opisać listę za pomocą właściwych znaczników dla list:

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

W rezultacie:

  • Nowoczesne przeglądarki pokażą listę wypunktowaną za pomocą zdefiniowanego obrazka.
  • Przeglądarki z wyłączonym pobieraniem grafiki pokażą listę ze standardowym wypunktowaniem - czarną kropką.
  • Netscape 4 zawsze pokaże czarne kropki.
  • Przeglądarki tekstowe zawsze ignorują style CSS, zatem pokażą listę w jakiś właściwy dla siebie sposób (zazwyczaj z wypunktowaniem za pomocą gwiazdki).

Postscriptum: listy bez wypunktowania

Kolejnym częstym sposobem tworzenia list linków jest lista bez żadnych wypunktowań, obrazków czy czegokolwiek, po prostu kolejne linki np.:

<div align="right">
<a href="http://www.slashdot.org/">Slashdot</a><br>
<a href="http://www.theregister.co.uk/">The Register</a><br>
<a href="http://diveintomark.org/">dive into mark</a><br>
</div>

Taki sam efekt może być osiągnięty za pomocą prawdziwych znaczników list i CSS:

<style type="text/css">
ul.blogroll {
  list-style: none;
  text-align: right;
}
</style>

lub, jeśli wolisz wyrównanie do lewej:

<style type="text/css">
ul.blogroll {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
</style>

W obu przypadkach kod HTML jest taki sam jak w poprzednim przykładzie:

<ul class="blogroll">
<li><a href="http://www.slashdot.org/">Slashdot</a></li>
<li><a href="http://www.theregister.co.uk/">The Register</a></li>
<li><a href="http://diveintomark.org/">dive into mark</a></li>
</ul>

Linia "list-style: none" powyżej wyłącza pokazywanie wypunktowania listy w przeglądarkach graficznych. Reguła ta działa we wszystkich przeglądarkach, nawet w Netscape 4.

Zobacz także (strony w języku angielskim)

 
<< Dzień 21: Ignorowanie obrazków pozycjonujących | Spis treści | Dzień 23: Odpowiedniki tekstowe dla obrazków >>