Ranyboskie!

Dostępne <abbr>

TL;DR


W czym jest problem?

Czytając niektóre publikacje, zwłaszcza te techniczne i naukowe, łatwo zgubić się w natłoku rozmaitych skrótów i akronimów. Osobom z niepełnosprawnościami intelektualnymi, czy chociażby niezorientowanym w temacie, mogą one znacznie utrudnić zrozumienie tekstu.

Dodatkowo, różne skróty zależnie od kontekstu mogą oznaczać zupełnie różne rzeczy.
Na przykład, 'JWT' może oznaczać czyjeś inicjały, JSON Web Token, lub James Webb Space Telescope.

Na taką właśnie okoliczność HTML posiada element <abbr>.
Elementu <abbr> używa się do oznaczania skrótów i akronimów.
Opcjonalnie posiada on atrybut title, w którym umieścić można pełne rozwinięcie danego słowa:

<p>
<abbr title="Scalable Vector Graphics">SVG</abbr> to format dwuwymiarowej grafiki wektorowej
</p>

Co daje w rezultacie:

SVG to format dwuwymiarowej grafiki wektorowej

Problem leży w fakcie, że atrybut title pojawia się po przytrzymaniu kursora myszy nad danym elementem, więc aby go zobaczyć trzeba być zdolnym do używania myszy.

W związku z tym element <abbr> z atrybutem title nie oferuje żadnej funkcjonalności dla:

Warto wspomnieć że niektóre czytniki są w stanie odczytać zawartość title w <abbr>, jednak wsparcie jest niejednolite, i często wymaga skomplikowanej konfiguracji.

Co można zrobić?

🤷 Najprostszym rozwiązaniem jest po prostu nie używanie skrótów i jawne rozwijanie wszystkich akronimów.

Pojawia się tu jednak kolejny problem.

Wyobraźmy sobie na przykład artykuł dotyczący języka HTML w którym każdy akronim 'HTML' zastępowany jest przez 'HyperText Markup Language'.

🚫 Kolejną próbą może być użycie atrybutu aria-label, w którym powielona byłaby zawartość atrybutu title.

Ale zaraz, przecież większość czytników ekranowych nie będzie w stanie przeczytać wartości aria-label na elemencie który nie jest domyślnie dostępny z poziomu klawiatury.

Rozwiążmy to zawijaniem całego <abbr> w link z aria-label, ale za to bez href:

<p>
<abbr title="Scalable Vector Graphics"><a aria-label="Scalable Vector Graphics">SVG</a>to format dwuwymiarowej grafiki wektorowej</abbr>
</p>

W praktyce wyglądać to będzie tak:

SVG to format dwuwymiarowej grafiki wektorowej

I w końcu czytnik będzie w stanie odczytać treść rozwinięcia, jednak to 'rozwiązanie' tworzy całą masę nowych problemów:

Rozwiązanie

✅ Najlepsze rozwiązanie problemu jest dość oczywiste.

Wystarczy jawnie rozwinąć skrót zawarty w <abbr> przy pierwszym jego wystąpieniu w tekście:

<p>
Scalable Vector Graphics (<abbr title="Scalable Vector Graphics">SVG</abbr>) to format dwuwymiarowej grafiki wektorowej
</p>

Da to w rezultacie:

Scalable Vector Graphics (SVG) to format dwuwymiarowej grafiki wektorowej

W takiej sytuacji treść rozwinięcia dostępna jest dla wszystkich użytkowników 🎉

← Wróć