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

Załóżmy, ze masz listę odnośnikó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?

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 odnośniki 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ę odnośnikó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:

Postscriptum: listy bez wypunktowania

Kolejnym częstym sposobem tworzenia list odnośników jest lista bez żadnych wypunktowań, obrazków czy czegokolwiek, po prostu kolejne odnośniki 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)



Zmodyfikowano: 18.03.2006, 22:42