Lista ikonek pod artykułem

W 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. Wywiązała się dość burzliwa dyskusja wraz z przykładami jak to zrobić: Semantyka HTML: lista nieuporządkowana i ten wpis prawie rozwiązuje zagadnienie.

Dlaczego prawie?

Są w nim dwa niedociągnięcia: nadmiarowy span oraz „display:none” którego należy unikać, ze względu na „nieczytanie” przez czytniki głosowe. Skoro nie widać, to nie trzeba czytać, prawda?

Jak to poprawić?

Usunąć tag „span”

Jest … niepotrzebny.

<ul>
<li class="d"><a href="#">del.icio.us</a></li>
<li class="t"><a href="#">technorati</a></li>
<li class="w"><a href="#">wykop</a></li>
</ul>

Schować tekst za pomocą tekst indent

<style type="text/css">
li{
background-image:url(socicons.gif);
list-style:none;
margin:0;
float:left;
margin-right:2px
}
a{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t{background-position:-16px}
li.w{background-position:-32px}
</style>

Inne uwagi

  • ograniczyć nadmiarowy css
  • ograniczyć nadmiarowe identyfikatory

I to by było na tyle.

4 odpowiedzi do “Lista ikonek pod artykułem”

  1. Ostatnia cegiełka i mamy kod poprawny, wyświetlający się wszędzie i w dodatku przystosowany dla osób korzystających z czytników głosowych. Dziekuję :)

  2. Jak pisałem już w komentarzu u Łukasza, ja wstawiłem ikony jako tło (w tym przypadku listy, choć u mnie nieco inaczej to wygląda). Poszczególne elementy listy nie muszą wówczas posiadać własnej klasy, ale tracimy wówczas możliwość zmiany kolejności linków bez edycji grafiki.
    Plusem jest jednak mniejszy kod HTML i CSS (coś za coś).

  3. Szymon: w podanym przeze mnie rozwiązaniu nie musisz niczego edytować. Dodajesz po prostu na końcu.

Możliwość komentowania jest wyłączona.

Jeżeli chcesz skomentować, napisz mail na adres marcin w domenie strony na której jesteś. Dodam twoj komentarz.