Stylizowanie skrótów i akronimów

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

Spis treści 1 Problem 2 Rozwiązanie 3 Zalecenia 4 Odnośniki 5 Informacje o dokumencie

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".

[edytuj] 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 html.css:

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

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

[edytuj] 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.

[edytuj] 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.

[edytuj] Odnośniki

• Web Content Accessibility Guidelines 1.0