student w słuchawkach przed laptopem

Najczęstsze problemy dostępności w serwisach internetowych Uniwersytetu Warszawskiego – poradnik

strona 1 z 6czas czytania: 14,5 minuty
Logo WCAG 2.1

Zespół audytorów Biura ds. Osób z Niepełnosprawnościami UW stale wykonuje kontrole zgodności stron i aplikacji internetowych Uniwersytetu z Ustawą z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Wynikiem badań witryn UW są indywidualne raporty wraz z sugestiami sposobów ich naprawy. Generowane są Deklaracje Dostępności do umieszczenia na stronach. Specjaliści BON przebadali już ok. 340 stron i aplikacji internetowych pod kątem ich zgodności z wytycznymi standardu WCAG 2.1. Wyniki badań znajdują się w naszym autorskim Systemie Audytów Dostępności.

Przypominamy, że istotne zmiany istniejących witryn, oraz każdą nową stronę w domenie “uw.edu.pl” należy bezzwłocznie zgłosić do badania zgodności z ustawą.

Po kilku seriach audytów przedstawiamy najczęściej spotykane błędy i problemy występujące w badanych serwisach. Zamieszczamy też  krótkie wyjaśnienia i sposoby uniknięcia tych błędów.

  1. Jako błąd oznaczono naruszenia kryteriów sukcesu WCAG 2.1 poziom AA. Oznacza to, że serwis nie spełnia wymogów Ustawy.
  2. Jako problem oznaczono rozwiązania i elementy witryn, które mogą wiązać się z utrudnieniem odczytu lub obsługi strony. Są to albo naruszenia niewymaganego poziomu AAA, albo sytuacja, gdy serwis formalnie spełnia wymogi WCAG 2.1, ale niekoniecznie poprawia to jego dostępność.

Najczęstsze błędy i problemy dostępności stron UW oraz propozycje ich naprawy:

Stan na maj 2022 r.


Serwis nie posiada mapy stron. (problem) – Procent wystąpień: 72,2%

Dotyczy kryteriów sukcesu WCAG: 2.4.5 Wiele dróg

Kto może poprawić: Administrator strony

Opis / zalecane rozwiązanie: Mapy stron bardzo ułatwiają wyszukanie stosownej treści osobom z każdego rodzaju dysfunkcjami. Pozwalają dotrzeć do wszelkich istotnych informacji alternatywną drogą (np. oprócz nawigacji w menu, czy odnośników na podstronach). Zaleca się zamieścić mapę strony w postaci listy odnośników do wszystkich głównych obszarów (np. kategorii, najważniejszych stron) oraz istotnych obszarów podrzędnych i zagadnień. Systemy CMS często mają wtyczki pozwalające na automatyczne generowanie mapy, istnieją także generatory online. Warto szukać hasła: “HTML Site Map Generator”.


Błędy łączy (odnośniki, linki).

  • Serwis posiada odnośniki kontekstowe, których treść nie informuje jednoznacznie o celu (błąd) – Procent wystąpień: 44,5%
  • Serwis posiada powtórzone linki – Procent wystąpień: 28,6%
  • W serwisie występują elementy klikalne bez jednoznacznych etykiet lub tekstów linków (problem) – Procent wystąpień: 14,3%
  • Serwis posiada odnośniki, których treścią jest adres URL (błąd) – Procent wystąpień: 9,8%
  • Serwis posiada odnośniki, które nie informują o otwarciu podstrony w nowym oknie – Procent wystąpień: 9,8%

Dotyczy kryteriów sukcesu WCAG:

Kto może poprawić: w treści — Redaktor treści, linki generowane automatycznie — Web developer

Opis / zalecane rozwiązanie: Każdy element klikalny powinien być jednoznacznie opisany (tytułem, etykietą, treścią), aby technologie wspomagające informowały użytkowników o jego funkcji i przeznaczeniu. Odnośniki powinny precyzyjnie opisywać cel, do którego prowadzą. Przykład: poprawnym tekstem odnośnika (lub atrybutu alt w przypadku grafik będących linkami) poniżej fragmentu artykułu w aktualnościach będzie np.: “Czytaj więcej o Tytuł Artykułu”, a niepoprawnym: “Więcej”. Oczywiście można część takiego opisu ukryć wizualnie używając np. klasy CSS Bootstrap – <a href=”artykul”><span class=”sr-only”>Czytaj </span>więcej <span aria-hidden=”true”>… </span><span class=”sr-only”>o Tytuł Artykułu</span></a>. Taki kod wyświetli tekst “Czytaj więcej … o Tytuł Artykułu” a jednocześnie czytniki ekranu odczytają całą treść.

O ile to możliwe adres URL zastępujemy opisem. Np. zamiast https://google.com podajmy Wyszukiwarka Google. Podobnie z przyciskami — jeśli zawierają grafikę, dodajemy treść przycisku w atrybucie “alt”. np:

<button type=”button”><img src=”play.png” alt=”włącz muzykę” /></button>

lub tekstem <button type=”button”><img src=”play.png” alt=”” /><span class=”sr-only”>włącz muzykę</span></button>

Odnośniki znajdujące się obok siebie i prowadzące do tego samego celu należy zastąpić jednym. Zamiast osobnych obrazka, tytułu i fragmentu treści, z których każdy jest odnośnikiem do tego samego artykułu, można obrazek i tytuł zamieścić razem wewnątrz jednego linku i usunąć linkowanie z fragmentu treści. Ten błąd najczęściej występuje  w listach odnośników np.: na stronach aktualności, na stronach archiwów WordPressa.

Łącza otwierające nowe okno / kartę przeglądarki powinny zawierać taką informację. Nieoczekiwana zmiana kontekstu wprowadza w błąd i bardzo utrudnia korzystanie z serwisu. Dobrą praktyką może być np. umieszczenie graficznego oznaczenia z atrybutem alt=”otwiera nowe okno”.