5 prostych sposobów na poprawienie dostępności Twojej strony

19 października 2021 Monika Kłokosińska

Dostępność (z ang. accessibility) to projektowanie i implementacja programów oraz stron internetowych w taki sposób, aby mogli korzystać z niej wszyscy (a więc, aby były one dostępne dla wszystkich) – w tym także użytkownicy niewidomi, niesłyszący, mający problem z precyzyjnym używaniem myszki czy posiadający problemy poznawcze.

Monika Kłokosińska. Frontend Developer z pięcioletnim doświadczeniem, od ponad dwóch lat związana z firmą intive. Najbardziej lubi się ze stackem MREN. Obecnie rozwija platformę VOD dla amerykańskiego klienta. Ogromna fanka internetu i możliwości, które stwarza. Po godzinach mentoruje w programie DareIT oraz biega, gra na keyboardzie i pochłania książki.

Zbiór wymagań, które dostępna strona internetowa powinna spełniać, nazywa się WCAG i jest publikowany przez W3C – obecnie obowiązująca wersja to 2.1. Omówienie wszystkich poruszanych tam zagadnień to materiał na wiele artykułów, więc dzisiaj chciałabym pokazać Wam pięć praktycznych sposobów na poprawienie dostępności Waszej strony.

Spis treści

1. Używaj atrybutu lang

Osoby niewidome do obsługi stron internetowych używają czytników ekranu (ang. screen readers), takich jak Voice Over dla Macbooków czy NVDA dla Windows. Żeby czytnik ekranu mógł jednak poprawnie odczytać daną stronę, musi najpierw wiedzieć, w jakim języku jest ona napisana. Tu przychodzi nam z pomocą atrybut lang.

<html lang=”en”>
...
</html>

Dodanie tego jednego drobnego fragmentu kodu sprawia, że czytnik użyje właściwego języka dla danej strony i nie będzie próbował przeczytać naszej angielskiej strony polskim lektorem.

Jeśli na naszej stronie pojawią się słowa czy frazy w innym języku, niż ten dominujący, możemy odpowiednio je oznaczyć, ponownie korzystając z atrybutu lang.

<html lang=”en”>
	<head>
	<title>Greatest Operas of All Time</title>
	</head>
	<body>
		<p><span lang=”de”>Der Ring des Nibelungen </span> is composed by Richard Wagner.</p>
	</body>
</html>

2. Zaimplementuj na swojej stronie tzw. skip links

Skip links na stronie New York Times

Skip links to domyślnie niewidoczne linki prowadzące do różnych elementów strony – nawigacji, głównej treści, stopki etc. Zazwyczaj są pierwszymi elementami przyjmującymi focus w kodzie strony. Kiedy użytkownik rozpoczyna nawigowanie za pomocą klawisza tab, skip links otrzymują focus i po kolei pojawiają się na stronie.

Skip links przyspieszają poruszanie się po stronie. Jeśli użytkownika interesuje link znajdujący się w stopce, nie musi przechodzić klawiszem tab po całej nawigacji i zawartości strony – może od razu przenieść się do stopki i tam już szukać interesującej go treści.

3. Pozwalaj na zamknięcie z klawiatury pop-upów o ciasteczkach

Być może część z was zna „żart” o dominującym obecnie doświadczeniu użytkownika – korzystanie z dowolnej strony internetowej w roku 2021 polega na: zamknięciu pop-upu o ciasteczkach, potem zamknięciu pop-upu o zbieraniu danych, a następnie na zamknięciu zapytania o możliwości wysyłania przez stronę notyfikacji. Dopiero wtedy można porządnie przyjrzeć się stronie z bliska (jeśli nie zasłoni nam jej monit o adblocku, rzecz jasna).

Sprawa komplikuje się jednak, kiedy do obsługi stron korzystamy tylko z klawiatury, a taki pop-up nie dość, że nie ma na sobie focusu jako element obecnie aktywny, to na dodatek nie da się nawet na niego tego focusa przenieść za pomocą klawisza tab. Interaktywne elementy strony, do których nie da się dotrzeć za pomocą klawisza tab to ogólna zmora dostępności, ale wszelkie „powitalne” modale po prostu uwielbiają generować tego typu problemy.

Wszystkie tego typu niedostępne pop-upy nie tylko czynią stronę trudniejszą w obsłudze. Ponieważ są to pierwsze elementy, z jakimi użytkownik wchodzi w interakcję i jest ona często niezbędna do dalszego korzystania z właściwej treści, nieosiągalny z klawiatury pop-up może w ogóle uniemożliwić niektórym odbiorcom dostanie się do poszukiwanych informacji. Dlatego zawsze pamiętaj o sprawdzeniu tych elementów pod kątem accessibility.

Pomyśl też o tym, który element powinien zostać zfocsuowany w momencie załadowania strony – osoba korzystająca z klawiatury pragnie pozbyć się wszystkich tych monitów równie szybko, co użytkownik myszki.

4. Używaj alt=”” dla obrazków dekoracyjnych

Rozważmy taki kawałek kodu:

<a href=”/tytuł”>
<img src=”/assets/65603scejfeafhj7909-0.jpg” alt=”Tytuł”>
<h2>Tytul</h2>
</a>

Z punktu widzenia dostępności wszystko wydaje się być w porządku – tag img ma wymagany atrybut alt. Zastanówmy się jednak, co usłyszy ktoś korzystający z czytnika, kto właśnie dotarł do tego fragmentu strony – będzie to prawdopodobnie „obraz, tytuł, tytuł”. Jeśli na stronie mamy więcej tego typu elementów (bo np. tak wygląda struktura wszystkich oferowanych produktów), użytkownicy screenreaderów usłyszą niejedną powtórzoną frazę.

Jeśli nie dysponujemy żadną wartościową informacją o obrazku, którą można by zawrzeć w tagu alt, to po prostu zostawmy go pustym.

<a href=”/tytuł”>
<img src=”/assets/65603scejfeafhj7909-0.jpg” alt=””>
<h2>Tytul</h2>
</a>

Obrazy z alt=”” są przez czytniki ignorowane jako obrazy czysto dekoracyjne.

Przykładami wartościowej informacji jest:

faktyczny opis zawartości obrazu, np. „łąka, las, dwie osoby trzymające się za ręce”. W dobie sztucznej inteligencji uzyskanie takiego tekstu dla każdego z obrazków na stronie nie jest wcale trudne, istnieją nawet specjalne serwisy zajmujące się tym.
tekst na obrazku, który został nań nałożony w programie graficznym i nie posiada własnego węzła tekstowego, np. „2 w cenie jednego!” (nie, to nie jest dobra praktyka, ale jako programiści nie zawsze mamy wpływ na typ grafik, z którymi pracujemy).

Wartościową informacją nie jest natomiast powtórzenie danych, do których użytkownik już i tak ma dostęp.

I jeszcze krótkie przypomnienie – niedodanie alt w ogóle jest zawsze najgorszym możliwym rozwiązaniem. Większość czytników przeczyta wtedy źródło obrazu, czyli w naszym przypadku „obraz, /assets/65603scejfeafhj7909-0.jpg”.

5. Unikaj podwójnych linków prowadzących do tego samego produktu

Jest to wariacja poprzedniego przykładu zawierająca w sobie jeszcze więcej powtórzeń.

<a href=”/tytuł”>
<img src=”/assets/65603scejfeafhj7909-0.jpg” alt=”Tytuł”>
</a>
<a href=”/tytuł”>
<h2>Tytul</h2>
</a>

Zamiast stworzyć jeden link zawierający w sobie obraz i tytuł produktu, mamy tutaj dwa – obraz i tytuł są osobnymi linkami prowadzącymi w to samo miejsce. Oznacza to, że poruszając się po stronie za pomocą klawisza tab, musimy wcisnąć go dwa razy, aby przejść do następnego linku. Jeśli produktów na naszej stronie jest 20-30, to zdołamy skutecznie utrudnić użytkownikom klawiatury szybkie poruszanie się po stronie, nie wspominając już o tym, jak bardzo ich zirytujemy.

Być może potrząsacie teraz głową i myślicie, że przecież nikt nie napisze kodu jak z powyższego przykładu. Niestety – nieraz widziałam jak systemy zarządzania treści wypluwały właśnie taki końcowy HTML. Wszystkim gotowym rozwiązaniom, z których chcecie skorzystać, polecam przyjrzeć się pod kątem dostępności, jeszcze zanim z nich skorzystacie. Prawdopodobnie znalezienie dostępnej alternatywy będzie was kosztowało o wiele mniej wysiłku i frustracji, niż późniejsze próby modyfikacji wdrożonego rozwiązania.

To samo tyczy się waszych własnych projektów – projektowanie kodu z myślą o wszystkich użytkownikach od samego początku jest o wiele przyjemniejsze niż modyfikowanie i rozszerzanie gotowego rozwiązania o elementy dostępności.

Zakończenie

Dostępność to szeroki i skomplikowany temat, ale mam nadzieję, że ten artykuł choć trochę przybliżył wam problemy i wyzwania, z jakimi borykają się na co dzień niektórzy użytkownicy Internetu. Jako Web Developerzy odgrywamy kluczową rolę – nasze, czasami pozornie błahe decyzje, jak np. używanie tagu lang w kodzie, mogą zdecydować o tym, czy treść strony będzie miała szansę dotrzeć do wszystkich zainteresowanych osób. Dlatego gorąco namawiam do pamiętania o dostępności podczas programowania – niewielkim wysiłkiem jesteśmy w stanie wiele zmienić.

Zdjęcie główne artykułu pochodzi z unsplash.com.

Monika Kłokosińska

Frontend Developer w intive

Frontend Developer z pięcioletnim doświadczeniem, od ponad dwóch lat związana z firmą intive. Najbardziej lubi się ze stackem MREN. Obecnie rozwija platformę VOD dla amerykańskiego klienta. Ogromna fanka internetu i możliwości, które stwarza. Po godzinach mentoruje w programie DareIT oraz biega, gra na keyboardzie i pochłania książki.