Wstęp
Dostępność cyfrowa to kluczowy element nowoczesnych stron internetowych i aplikacji — oznacza tworzenie rozwiązań, z których może korzystać każdy, niezależnie od ograniczeń fizycznych, sensorycznych, wiekowych czy technologicznych. Pomimo rosnącej świadomości, serwisy mają problem z dostępnością internetową stron. Ponad 96% z miliona najpopularniejszych stron internetowych na świecie jest niedostępnych. (Źródło: WebAIM).
W tym materiale przedstawiamy 5 najczęstszych problemów z dostępnością i które warto wyeliminować, by tworzyć bardziej inkluzywną przestrzeń cyfrową. Pokażemy również jakie są dobre praktyki i jak szybko je wyeliminować.
1. Brak możliwości pełnej obsługi strony za pomocą klawiatury.
Aby strona była dostępna, musi być funkcjonalna, a więc musimy zrobić wszystko, aby elementy strony i jej nawigacja były możliwe do użycia.
Jednym z podstawowych błędów, jakie spotykamy na stronach, jest brak dostępu do elementów za pomocą klawiatury. Zakładamy bowiem, że wszyscy użytkownicy będą używać myszki, a klawiatura służy tylko do pisania, a nie nawigowania. Tak wcale nie jest. Często nawigacja klawiaturą przydaję nam się w jakimś określonym czasie, np. jak złamiemy ręke.
Problemy z dostępnością stron internetowych zaczynają się już początku. Wchodząc na strony często mamy do czynienia z otwartym oknem modalnym np. z ciasteczkami i nie jesteśmy w stanie dotrzeć do przycisku “zamknij” lub wyjść Escapem tak, aby przejść do strony. Nasze korzystanie ze strony kończy się, zanim zaczęło się na dobre.
Drugim bardzo częstym miejscem, gdzie pojawiają się problemy, jest nawigacja. Użytkownik dostępnej strony powinien się po niej poruszać swobodnie, używając klawisza Tab. Niestety bardzo często zdarza się, że jest to możliwe w bardzo ograniczony zakresie.
Kolejnym miejscem, na które powinniśmy zwrócić uwagę, są wszelkiego rodzaju checkboxy zwłaszcza w formularzach czy w koszykach e-commerce np. dotyczące płatność czy zapoznanie się i wyrażania zgody na wykorzystanie danych osobowych do realizacji zamówienia. Jeśli nie da się ich kliknąć za pomocą Spacji/Entera stają się niedostępne i zakup przestaje być możliwy.
Na stronie jest więc wiele miejsc, gdzie nawigacją klawiaturą, może być problematyczna, a jest kluczowa. Tworząc dostępne strony, należy więc pamiętać o tym, aby wszystkie elementy interaktywne były dostępne za pomocą klawiatury.
2. Brak tekstów alternatywnych dla obrazów.
Problemy z dostępnością stron internetowych nie kończą się na klawiaturze. Na stronie mamy dwa najczęściej występujące obrazy. Są to obrazy dekoracyjne, czyli wszelkiego rodzaju ikony i zdjęcia.
Najczęstszym błędem jest brak oznaczenia obrazów dekoracyjnych pustym alt=”” lub nadanie im bezsensownego opisu, który nic nie wnosi.
Np. na stronie jednego z bardzo znanych biur podróży ozdobnemu żółtemu elementowi nadano opis alt=Słońce w tle. W takim wypadku nie dosyć, że nie jest to słońce, to jeszcze nie wnosi ona żadnej informacji dla użytkownika, bo jest elementem ozdobnym. W tym wypadku alt powinien być pusty, aby nie był odczytany przez czytnik.
Drugim bardzo częstym błędem jest po prostu brak opisu alt, tam gdzie jest on kluczowy i konieczny np. w opisie zdjęcia dla e-commerce. Żeby klient kupił nasz produkt, musi wiedzieć, jak on wygląda. Jeśli dobrze opiszemy produkt w naszym sklepie, zostanie on przeczytany przez czytnik i ułatwi dokonanie wyboru przez potencjalnego klienta.
Opis produktu:
- Niepoprawny alt: pomarańczowa torebka
- Poprawny alt: skórzana torebka koloru pomarańczowego z małą rączką
Opis wariantu koloru produktu
- Niepoprawny alt: RD-100
- Poprawny alt: ciemny czerwony
3. Kontrasty kolorów i widoczność tekstu.
Niestety bardzo często na stronach mamy elementy, które posiadają bardzo niski kontrast. Podobnie zdarza się to w przypadku tekstu. Zapewnij kontrast minimum 4.5:1 dla tekstu zwykłego i 3:1 dla dużych nagłówków.
Tworząc dostępną stronę, należy zadbać o kontrast, piszemy o tym w artykule dostępność cyfrowa z perspektyw projektanta stron.
4. Zła struktura nagłówków.
Jeśli chodzi o nagłówki to mamy w sumie dwa najważniejsze błędy. Pierwszy to skakanie po poziomach nagłówków (np. H1 → H4). Nagłówki na stronie internetowej można przyrównać do tytułów rozdziałów w książce, ważna jest ich kolejność. Brak logicznej, „drzewiastej” struktury treści utrudnia nawigowanie po stronie.
Drugim częstym błędem jest wstawianie np. <h2> tylko po to, by tekst był większy/grubszy, a nie dlatego, że pełni funkcję nagłówka.
Strukturę nagłówków należy przemyśleć, zanim się ją zastosuje. Nie zapominając o tym, że na każdej stronie powinien znaleźć się nagłówek <h1>
Przykład prawidłowej struktury nagłówków:
<h1>Nasze Produkty</h1>
<h2>Buty</h2>
<h3>Sportowe</h3>
<h3>Eleganckie</h3>
<h2>Akcesoria</h2>
<h3>Torby</h3>
<h3>Portfele</h3>
5. Nieprawidłowe oznaczanie treści w HTML.
Strona bardzo często wygląda ładnie, ale jak się jej głębiej przyjrzymy albo po prostu spróbujemy odczytać przy pomocy czytnika ekranu, to bardzo często okazuje się, że nie jest tak pięknie, jak wydawało.
Za powszechne problemy z dostępnością stron internetowych są odpowiedzialne wspomniane już wyżej nagłówki. Często pięknie stylizowane, ale sam wygląd nie wystarcza — trzeba wyrazić strukturę treści odpowiednimi znacznikami.
Zamiast <div class=”big-bold”>Oferta specjalna</div>
należy użyć:
<h2>Oferta specjalna</h2>
Podobnie bywa z tabelami. Na pierwszy rzut oka widzimy kolumny i wiersz, ale jak włączymy czytnik, to szybko okazuje się, że panuje tam niezły chaos. Tabele powinny być oznaczone jako tabele — inaczej są niezrozumiałe dla czytników ekranu. Zatem tworząc tabele, należy pamiętać o takich znacznikach jak <tr>, <th>,<td>.
Czytniki ekranu czytają treść według znaczników. Jeśli struktura jest chaotyczna, użytkownicy gubią się albo pomijają ważne treści. Co więcej, klawiaturowa nawigacja opiera się na elementach semantycznych — np. przechodzenie z nagłówka na nagłówek, link po linku. Dobrze oznaczona treść poprawia także SEO (np. wyszukiwarki rozumieją strukturę strony).
Podsumowanie
Dostępność nie jest dodatkiem ani luksusem — to fundament dobrze zaprojektowanego internetu.
Unikając najczęstszych błędów i wdrażając dobre praktyki, nie tylko poprawiamy komfort wszystkich użytkowników, ale też zwiększamy zasięg, budujemy pozytywny wizerunek marki i spełniamy wymogi prawne.
Pamiętaj: małe zmiany w strukturze, treści i interfejsie mogą mieć ogromne znaczenie dla setek tysięcy osób. Warto zacząć już dziś!
