Wojciech Bednarski

Ostylowałem moje kategorie w stylu tag cloud. Użyłem pluginu WordPress Cat Cloud Plugin.

Niestety jego accessibility leży. Linki (tagi) nie są niczym oddzielone, jak wiadomo tak nie możne być.

Najprostsze wyjście to wstawić po każdym <a /> przecinek, lub jakikolwiek inny znak nie będący linkiem. Przykładowo <span>,</span>. Takie rozwiązanie ma tą wadę, że widać przecinek. Można oczywiście ostylować go przy pomocy span {display:none} lub span {visibility:hidden}.

Niestety przy zastosowaniu takich technik ukrywania tekstu nie wszystkie user agents będą w stanie poprawnie odczytać nasze intencje.

Jedynym rozsądnym sposobem na poprawienie accessibility jest lista. Należy edytować zawartość pliku z pluginem. Zamienić <div /> na listę <ul /> i objąć linka listą <li />.

$output['data'] = ‘<ul id=”catcloud”>‘.”\n”;
foreach (explode(”\n”, $all_cats) as $cat) {
preg_match(’{a href=”([^"]+)” title=”([^"]+)”.*?>(.+)</a> ?\((\d+)\)}’, $cat, $matches);
list(,$url, $title, $name, $count) = $matches;
$output['data'] .= sprintf(”\t”.’<li><a href=”%s” title=”%s (%s %s)” class=”size-%d”>%s</a></li>‘.”\n”,
$url, $title, $count, abs($count) != 1 ? ‘entries’ : ‘entry’, $count, $name);
$counts[$count] = 1;
}
$output['data'] .= ‘</ul>‘.”\n”;

Pozostało jeszcze tylko zmodyfikować style CSS, tak by lista była pozioma.

#catcloud li {
 float:left
}

#catcloud li a {
 display:block;
 padding-right:4px
}

Wygląda to np. tak:

Jeśli chcesz mieć na swoim WordPressowym blogu tagi w stylu, jak to się teraz mówi? Web 3.0 chyba i idąc dalej w duchu 3.0 powinienem napisać hat trick accessibility.

Tak czy inaczej polecam ten plugin do WordPressa z moimi drobnymi, aczkolwiek ważnymi poprawkami w kwestii dostępności.