Jak spełnić wymaganie WCAG 3.1.4 - Skróty

Opublikowano: , aktualizacja: 2018-03-08

Treść wymagania WCAG postawiona jest dość jasno. Używając na stronie skrótów musimy opisać ich znaczenie w rozszerzonej formie. Do rozwiązanie tego problemu, bardzo często zaleca się użycie jednego z tagów obowiązującej składni języka HTML. Jednak nie jest to do końca optymalnym rozwiązaniem w szczególności dla osób używających chociażby czytnika ekranu.

Powszechne rozwiązanie

Zazwyczaj do opisu skrótów lub akronimów proponuje się stosowanie tagu abbr dla przykładu:

Większość stron w Internecie wykorzystuje <abbr title="Java Script">JS</abbr>

Taki zapis spowoduje, że nasza przeglądarka wyświetli tekst "Większość stron w Internecie wykorzystuje JS" w tym delikatnie podkreślony zwrot js. Po najechaniu na niego kursorem myszki, wyświetli dymek z jego opisem.

Hura! Objasniliśmy skrót, czyli wymaganie zostało spełnione.

Tyle, że jeśli ktoś nie używa myszki, a jedynie czytnik ekranu, będzie miał z tym nie lada problem.

Dlaczego znacznik abbr nie jest doskonałym rozwiązaniem?

Po pierwsze. Jak już wspomniałem większość przeglądarek internetowych wyświetla znacznik abbr jako zwykły tekst z delikatnym podkreśleniem. Taka forma skrótu bez zastosowania dodatkowych styli, jest mało widoczna dla użytkownika i łatwo ją przeoczyć.

Druga i chyba największa wada tego rozwiązania to fakt, że tag ten nie jest tak zwanym elementem fokusowalnym, to oznacza, że nie można bez użycia myszki przejść do tego elementu, aby wyświetlić jego szczegóły.

Tym samym czytniki ekranu „nie zobaczą” opisu tego skrótu w ogóle, tylko go pominą.

Sprawdziłem, jak zachowują się tego typu programy, używając trzech darmowych i łatwo dostępnych czytników:

  • NVDA (Czytnik ekranu o tej samej nazwie),
  • Narrator (czytnik ekranu wbudowany w system Windows),
  • Chrome VOX (wtyczka do przeglądarki Google Chrome)
  • JAWS pominąłem, ale tylko ze względu na cenę, która dla przeciętnego Polaka jest ceną zaporową - około 900 dolarów amerykańskich.
  • Voice Over celowo pominąłem, gdyż jest dostępny tylko na platformie iOS.

Wszystkie programy zostały uruchomione w domyślnej konfiguracji, bez jakiejkolwiek zmiany ustawień.

No cóż wieści nie mam zbyt dobrych. Wszystkie czytniki poległy na próbie przeczytania opisu z wyżej wymienionego tagu. Co prawda niektóre z nich można „zmusić” do czytania znalezionych na stronie obiektów wraz z ich właściwościami, ale każdy użytkownik używający czytnika ekranu ma go skonfigurowanego według własnych upodobań i nie koniecznie musi wysłuchiwać wszystkich cech obiektów wyświetlających się na stronie.

Pojawia się zatem pytanie. Czyżby organizacja W3C pomyliła się pracując nad standardem dostępności i czy daje to argument do podważenia wyżej wymienionego wymagania?

Naturalnie nie. Stosowanie skrótów w języku HTML5 za pomocą tagu abbr nie jest złe. Jest po prostu nie wystarczające dla osób, które nie używają myszki.

Czy są lepsze opcje na opisanie skrótów?

Jeśli ktoś naprawdę upiera się do stosowania skrótów w takiej postaci, może zastosować javascript do wymuszenia fokusu na tym elemencie oraz kaskadowe arkusze styli do zwiększenia jego widoczności. Nic nie stoi na przeszkodzie, ale nadal to trochę przypomina „szminkowanie świnki”. Są jednak lepsze metody.

Tag abbr kontra atrybut aria

Do objaśnienia skrótów, można zastosować lepszą metodę poprzez zastosowanie atrybutów aria.

Na przykład:

Większość stron w Internecie wykorzystuje <span aria-hidden="True">JS (Java Script)</span><span style="display:none">Java Script</span>

lub zamiast umieszczania styli w kodzie, przypisać do drugiego tagu span klasę, która ukryje ten element.

Zaleta: typowy użytkownik nie zauważy żadnej różnicy – przeczyta zwrot JS, a czytnik ekranu pominie go i spokojnie odczyta zawartość drugiego elementu.

Wada: w kodzie naszej strony tworzymy kopię tagu span, który jest czytelny tylko dla czytników ekranu. Może to także delikatnie wpłynąć na rozmiar naszej strony, jeśli stosujemy na niej dużo skrótów, jak również może nieznacznie pogorszyć czytelność kodu.

Panaceum na skróty

Jednym z lepszych rozwiązań jest stworzenie tak zwanego słownika skrótów o czym mówi wymaganie WCAG 3.1.3 Nietypowe słowa oraz podlinkowanie tego słownika do naszego skrótu. Tym samym zapewniamy sobie spełnienie obu wymagań na raz. (WCAG 3.1.3 i WCAG 3.1.4)

Zobacz zatem jak napisać czytelny i przystępny słownik skrótów.

Smyku.pl
Smyku.pl

Ta strona wykorzystuje ciasteczka i podobne technologie. Są one mi potrzebne, aby strona mogła lepiej funkcjonować. Korzystając ze strony, zgadzasz się na ich gromadzenie i wykorzystywanie, zgodnie z ustawieniami w Twojej przeglądarce. Więcej o ciasteczkach możesz dowiedzieć się w dziale "Pomoc".

Zmień widoczność widżetów.

Ustawienia tła strony

Podgląd

.JPG
Uwaga! Zmiana domyślnego tła, może nieco wydłużyć wczytywanie się strony.

Ustawienia typu odtwarzacza

Ustaw w jaki sposób mają być odtwarzane utwory: