A11y sprawdzamy: Szybki audyt dostępności strony mObywatel – część 1.

Wstęp

W szybkim audycie sprawdziliśmy dostępność strony mObywatel – od wejścia na stronę rządową, przez proces logowania, widok dashboardu, aż po wypełnienie wybranego formularza. Analizowanym formularzem było zakładanie skrzynki e-Doręczeń, która od 1 stycznia 2026 roku stanowi podstawową formę komunikacji z administracją publiczną przez internet.

W audycie przeanalizowaliśmy trzy podstrony:

• Ścieżka ze strony głównej do logowania do serwisu – sprawdziliśmy, czy łatwo dotrzeć do logowania oraz czy wybór metody uwierzytelnienia jest czytelny. Testowana była nczęsto używana ścieżka – logowanie przez Profil zaufany.
  Dlaczego istotna: bez poprawnego logowania użytkownik nie ma dostępu do żadnych usług serwisu.
  ‍‍
• Dashboard po zalogowaniu – pierwszy widok po zalogowaniu. Użytkownik widzi dostępne funkcje, dokumenty i usługi.
  Dlaczego istotna: od czytelności tego widoku zależy, czy użytkownik szybko odnajdzie potrzebne opcje i zrozumie możliwości serwisu.

• ‍Formularz zakładania skrzynki e-Doręczeń – Od 1 stycznia 2026 korzystanie z wielu e-usług będzie możliwe tylko po założeniu skrzynki do e-Doręczeń.
  Dlaczego istotna: skoro jest to podstawowa forma kontaktu z urzędem, formularz musi być w pełni dostępny dla wszystkich użytkowników.

‍

Cel i zakres audytu

Audyt przeprowadzono w ramach cyklu krótkich analiz stron internetowych i aplikacji pod kątem dostępności cyfrowej. Celem jest ocena, w jakim stopniu serwisy publiczne spełniają podstawowe wymogi WCAG 2.1 AA oraz wymagania polskiej Ustawy o dostępności cyfrowej z 2019 roku.

Zakres audytu ma charakter orientacyjny i dotyczy stanu strony w dniu badania.

Metoda audytu

Audyt został przeprowadzony autorską metodą szybkiej oceny Accesscheck, z wykorzystaniem obserwacji eksperckich i testów automatycznych. Ocenie poddajemy od 7 do maksymalnie 10 kluczowych kryteriów, obejmujących najczęściej spotykane błędy dostępności. Analiza obejmuje maksymalnie trzy, cztery widoki – te, od których użytkownik najczęściej rozpoczyna korzystanie z usługi.

Wynik ogólny dostępności strony określany jest trzystopniowej skali:

• Dostępna – strona spełnia zdecydowaną większość kryteriów WCAG 2.1 AA. Ewentualne niezgodności mają charakter marginalny i nie wpływają znacząco na dostępność treści.
• Częściowo dostępna – strona spełnia dużą część wymagań, jednak zawiera istotne błędy w wybranych obszarach (np. nawigacja, formularze, multimedia). Mogą one ograniczać dostępność dla części użytkowników.
• Niedostępna – strona nie spełnia kluczowych kryteriów WCAG 2.1 AA. Błędy w strukturze, nawigacji lub interakcji powodują, że część użytkowników nie może w pełni lub w ogóle korzystać z treści.

1. Teksty alternatywne dla elementów graficznych

1.1.1 Treść nietekstowa (A)

Dlaczego to ważne

Teksty alternatywne (czyli opisy obrazków i innych elementów graficznych) pozwalają każdemu zrozumieć, co znajduje się na stronie – także osobom niewidomym lub słabowidzącym. Dzięki nim czytniki ekranu mogą opisać obraz użytkownikowi.

Są też pomocne, gdy zdjęcie się nie wczyta, na przykład z powodu błędu lub słabego internetu. Dodatkowo pomagają wyszukiwarkom w indeksowaniu obrazów, czyli rozpoznawaniu ich treści i powiązaniu z tematem strony. Dzięki temu witryna może być lepiej widoczna w wynikach wyszukiwania.

Dobry opis alternatywny powinien być krótki, prosty i jasno tłumaczyć, co pokazuje obraz lub do czego służy. Nie należy powtarzać informacji z tekstu obok. Jeśli obrazek nie wnosi treści, powinien być ukryty dla czytników ekranu.

Co sprawdzaliśmy

• Czy obrazy, zdjęcia, wykresy, mapy, infografiki i obrazki dekoracyjne mają poprawnie dodane opisy alternatywne (atrybut alt).
• Czy przyciski i linki graficzne posiadają opisy, które jasno informują o ich funkcji lub celu.
• Czy pola formularzy są odpowiednio opisane, tak aby użytkownicy wiedzieli, jakie dane należy wpisać.
• Czy elementy typu CAPTCHA mają zapewnioną alternatywną metodę weryfikacji (np. dźwiękową).

Wyniki

Strona główna – przed zalogowaniem

• Logotypy social mediów będące linkami mają poprawne, opisowe atrybuty alt, dzięki czemu użytkownicy technologii asystujących otrzymują jasną informację o celu odnośnika, (np. alt="Kanał mObywatel – Ministerstwo Cyfryzacji na YouTube").
• Pozostałe obrazki na stronie posiada odpowiedni tekst alternatywny lub pusty alt, dzięki któremu czytniki pomijają obrazek, uznając go za dekoracyjny.

Podstrona logowania

• Elementy dekoracyjne (ikony) są ukryte przed czytnikami (alt="" oraz aria-hidden="true"), dzięki czemu użytkownik nie słyszy nic niewnoszących komunikatów.

• Logowanie za pomocą Profilu zaufanego – linki graficzne do wyboru banku do logowania są prawidłowo skonstruowane, obrazki mają pusty alt, a każdy link ma ukryty tekst sr-only, który nadaje mu czytelną nazwę typu „Logowanie za pomocą PKO BP / mBank SA / Santander…”.

Dashboard po zalogowaniu 

• Na stronie dashboardu obrazy i elementy graficzne zostały wdrożone poprawnie pod kątem dostępności.

Ścieżka Załóż skrzynkę E-doręczeń / Podstrona Uzyskaj adres do e-Doręczeń u publicznego dostawcy usługi, otworzona w nowym oknie poza serwisem mObywatel 

• Krokowy proces formularza – wszystkie elementy nietekstowe posiadają poprawnie zdefiniowane opisy alternatywne.
• Ankieta obrazkowa została przygotowana w sposób dostępny – każda graficzna odpowiedź (ikony buziek) posiada czytelny i szczegółowy opis alternatywny, który informuje zarówno o poziomie zadowolenia, jak i o efekcie interakcji (oddanie głosu i przejście do pola komentarza). Dzięki temu użytkownicy czytników ekranu otrzymują pełną informację o funkcji tych elementów, a obrazy nie tracą swojego znaczenia poza warstwą wizualną.

‍

2. Struktura nagłówków

1.3.1 Informacje i relacje (A), 2.4.6 Nagłówki i etykiety (AA)

Dlaczego to ważne

Nagłówki porządkują treść i pomagają użytkownikom szybko zrozumieć strukturę strony. Dzięki nim łatwiej znaleźć potrzebne informacje i zorientować się, jak poszczególne sekcje są ze sobą powiązane.

Są też kluczowe dla dostępności – czytniki ekranu wykorzystują je do nawigacji po stronie, a osoby z dysleksją czy starsi użytkownicy mogą łatwiej śledzić treść.

Dobrze zbudowana hierarchia nagłówków poprawia również widoczność strony w wynikach wyszukiwania.

Co sprawdziliśmy

• Czy na stronie zastosowano nagłówki w logicznej i spójnej hierarchii (H1–H6).

Wyniki

Badane podstrony są prawidłowo zbudowane pod kątem hierarchii nagłówków poza jednym wyjątkiem: na stronie głównej przed zalogowaniem występują dwa nagłowki h1.

 – „mObywatel” oraz „gov.pl gov.pl Serwis Rzeczypospolitej Polskiej”. Taka konstrukcja zaburza logiczną strukturę treści i utrudnia nawigację użytkownikom czytników ekranu. 

‍

3. Kontrast tekstu

1.4.3 Kontrast (minimum) (AA)

Dlaczego to ważne

Odpowiedni kontrast między tekstem a tłem ułatwia czytanie i korzystanie ze strony wszystkim użytkownikom, nie tylko tym z problemami z widzeniami. Zbyt niski kontrast sprawia, że tekst staje się trudny do odczytania, szczególnie w gorszych warunkach oświetleniowych lub na słabszych ekranach.

Współczynnik kontrastu określa różnicę jasności między tekstem a tłem. Dla zwykłego tekstu powinien wynosić co najmniej 4,5:1, a dla dużych liter i nagłówków 3:1.

Co sprawdziliśmy

• Czy teksty i grafiki testowe posiadają kontrast w stosunku minimalnym 4,5:1
• Dla dużych tekstów: 3:1

Wyniki

Kluczowe komponenty design systemu mObywatel spełniają wymagania kontrastu. Zidentyfikowany problem na sprawdzanych podstronach dotyczy elementu drugorzędnego i nie wpływa na główną ścieżkę użytkownika.

• Komponent kalendarza – dni oznaczone kolorem szarym mają zbyt niski współczynnik kontrastu (1.49:1), co może utrudniać ich odczyt osobom z wadami wzroku.

4. Zrozumiałość linków

2.4.4 Cel linku (w kontekście) (A)

Dlaczego to ważne

Linki powinny jasno informować, dokąd prowadzą i co się stanie po ich kliknięciu. Dzięki temu użytkownicy mogą łatwiej poruszać się po stronie i szybciej znaleźć potrzebne informacje.

Dla osób korzystających z czytników ekranu zrozumiałość linków ma szczególne znaczenie – często słyszą one jedynie treść odnośnika, bez kontekstu otaczającego tekstu. Dlatego sformułowania typu „czytaj więcej”, „kliknij tutaj” czy „zobacz” nie są wystarczające.

Dobrze opisane linki poprawiają też SEO – wyszukiwarki lepiej rozumieją strukturę strony i jej treść.

Co sprawdzaliśmy

• Czy tekst linku jasno informuje, dokąd prowadzi lub jaką akcję wykona użytkownik po kliknięciu.
• Czy linki nie są tworzone z samych słów typu „czytaj więcej”, „kliknij tutaj”, „pobierz” – bez dodatkowego kontekstu.
• Czy linki mają opis kontekstowy, jeśli są częścią dłuższego zdania lub listy.
• Czy użytkownik jest informowany, gdy link otwiera się w nowej karcie lub oknie.

Wyniki

Na wszystkich badanych podstronach do poprawy pozostaje sposób informowania o otwieraniu linków w nowej karcie. Obecnie komunikat przekazywany jest wyłącznie przez atrybut title, który nie jest niezawodny dostępnościowo.

Rekomendowane jest dodanie tej informacji w dostępnej nazwie linku, np. poprzez aria-label lub ukryty wizualnie tekst (sr-only).

‍

Podstrona logowania

• Przyciski i linki na podstronie prawidłowo używają atrybutu aria-label, aby zapewnić opisowe nazwy dostępne dla czytników ekranu. Przykładem jest link „Dowiedz się więcej”, który dostarcza jasną informację o celu odnośnika, niezależnie od kontekstu wizualnego: „Dowiedz się więcej o powiadomieniach w aplikacji mObywatel zamiast kodów SMS”.

Formularz zakładania skrzynki E-Doręczeń

Na tym widoku z kolei informacja o otwieraniu linku do regulaminu usługi, umieszczonego przy checkboxie, w nowym oknie została przekazana za pomocą aria-description. Choć technicznie jest to poprawne rozwiązanie, atrybut ten może być ignorowany przez część czytników ekranu. Dlatego rekomendowane jest zastosowanie bardziej niezawodnych mechanizmów, takich jak aria-label lub dodatkowy tekst ukryty wizualnie (sr-only), aby komunikat był dostępny dla wszystkich użytkowników.

‍

‍

Koniec części pierwszej raportu z szybkiego audytu dostępności serwisu mObywatel.

‍