Stylizowanie skrótów i akronimów

Podsumowanie: Elementy HTML <code>abbr</code> i <code>acronym</code> są użytecznymi pomocami w tworzeniu dostępnych stron, jednak ich stylizacja może okazać się zaskakująca. Zobacz, jak można kontrolować ich prezentację bez poświęcania korzyści, jakie dają te elementy.

Wielu autorów zaczyna używać na swoich stronach elementów HTML abbr (skrót) i acronym (akronim). Jest to godne polecenia i zgodnie z Guideline 4 of the Web Content Accessibility Guidelines, obydwa elementy powinny posiadać atrybut title, aby poprawić "czytelność stron internetowych dla wszystkich, w tym ludzi z zaburzeniami poznawczymi, trudnościami w uczeniu się czy też ludzi głuchych".

Problem

Autorzy zauważyli, że abbr i acronym w Mozilli i związanych z nią przeglądarkach wyświetlane są z kropkowanym "podkreśleniem". Owo podkreślenie nie daje się usunąć za pomocą text-decoration: none. Powód takiej sytuacji można znaleźć w pliku Mozilli <tt>html.css</tt>:

abbr[title], acronym[title] {
     border-bottom: dotted 1px;
   }

"Podkreślenie" jest w rzeczywistości dolnym obramowaniem.

Rozwiązanie

Jeżeli autor chce usunąć podkreślenie dla abbr i acronym, można to wykonać za pomocą poniższej reguły:

abbr[title], acronym[title] {
     border-bottom-width: 0;
   }

Oczywiście można też zrobić sporo innych rzeczy, jak zmiana stylu czy koloru obramowania, zmiana wyglądu tekstu w tych elementach, użycie nieznacznie innego koloru, itd.

Lepszym wyjściem może być zmniejszenie widocznej grubości ramki bez faktycznego jej usuwania. "Podkreślenie" mówi czytającemu, że wyróżniony wyraz związany jest z pewną dodatkową informacją. W Mozilli po umieszczeniu wskaźnika myszy nad elementem i pozostawieniu go przez chwilę zawartość atrybutu title pojawi się jako "dymek" obok wskaźnika myszy. Usunięcie "podkreślenia" z tych elementów pozbawi czytelników oznakowania, że dostępna jest ta dodatkowa informacja.

Zalecenia

• Jeżeli "podkreślenie" ma zostać usunięte, autor musi nadać elementowi (lub elementom) dolne obramowanie. text-decoration nie ma zastosowania w tej sytuacji.

Odnośniki

• Web Content Accessibility Guidelines 1.0