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

Wstęp

W poniższym szybkim audycie zbadaliśmy poziom dostępności strony PKP Intercity na podstronach związanych z ścieżką wyboru połączenia pociągowego i zakupu biletu. Publikacja audytu jest podzielona na dwie części i odbywa się w ramach naszego cyklu krótkich audytów serwisów i stron publicznych. 

Strona PKP Intercity to podstawowe miejsce, w którym pasażerowie sprawdzają rozkład jazdy, wyszukują połączenia i kupują bilety. Serwis jest intensywnie używany każdego dnia, dlatego jego dostępność wpływa bezpośrednio na to, czy każdy – niezależnie od ograniczeń – może bez problemu zaplanować i opłacić swoją podróż.

W audycie sprawdziliśmy cztery podstrony najistotniejsze dla doświadczenia użytkownika na tym portalu publicznym:

• Strona główna – to punkt startowy dla odwiedzających. Zawiera wyszukiwarkę połączeń, skróty do najważniejszych usług, komunikaty dla pasażerów, aktualności oraz menu prowadzące do sekcji serwisu.
  
  Dlaczego istotna: od jakości i czytelności strony głównej zależy, czy użytkownik zrozumie strukturę serwisu i szybko odnajdzie potrzebne treści.
  
  
• Podstrona Lista połączeń – Wyniki wyszukiwania połączeń – to widok prezentujący dostępne połączenia odpowiadające podanym kryteriom. Użytkownik wybiera tu najdogodniejszą trasę, sprawdza godziny, przesiadki, dostępne klasy.
  
  Dlaczego istotna: jest to pierwszy moment realnej decyzji o wyborze podróży – ewentualne problemy dostępności na tym etapie mogą uniemożliwić porównanie opcji lub kontynuację zakupu.

• Podstrona Twoja podróz – Wybór miejsc – podstrona pozwala wybrać konkretne miejsce w wagonie lub zaakceptować automatyczny przydział; zawiera rozbudowane komponenty interfejsu: mapy wagonów, ikony, komunikaty i wybór opcji dodatkowych.
  
  Dlaczego istotna: nieczytelne etykiety, brak opisów miejsc lub problemy z obsługą klawiaturą mogą uniemożliwić użytkownikowi samodzielny zakup biletu.
  
  
• Podstrona Płatność – ostatni etap, w którym użytkownik potwierdza dane zamówienia i wybiera formę płatności.
  
  Dlaczego istotna: to miejsce, które decyduje o konwersji. Błędy mogą zablokować finalizację zakupu.

‍

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, nawigacja i stopka

Problemy:

• Logotypy będące linkami nie mają opisowych atrybutów alt, przez co dla użytkowników technologii asystujących mogą być odczytywane jedynie jako „link, grafika”. Użytkownik nie otrzymuje więc informacji, jaka instytucja jest przedstawiona ani dokąd prowadzi odnośnik (np. do Biuletynu Informacji Publicznej lub strony dotyczącej projektów unijnych). W obecnym kodzie zastosowano pusty alt, a cel linku opisano w atrybucie title, co jest problematyczne, ponieważ wiele czytników ekranu nie odczytuje title, a na urządzeniach mobilnych atrybut ten nie jest dostępny.

• Brak pustego altu dla 4 obrazków dekoracyjnych – w pozostalaych miejscach na stronie głownej pusty alt lub alt z opisem.

Plusy:

• Ikonki linkujące do social mediów i sklepów Apple i Google Play dostępnośc elementów jest zapewniona poprzez .sr-only, czyli informacja o funkcji linku i celu zostanie zakomunikowana czytnikom, np. „Facebook – otwiera się w nowym oknie”.
• Większość obrazów na stronie posiada odpowiedni tekst alternatywny lub pusty alt, dzięki któremu czytniki pomijają obrazek, uznając go za dekoracyjny.

Podstrona Wyniki wyszukiwania połączeń

Plusy

• Ikony klas pociągu, typów (EIP, IC, TLK) – ikony typu EIP, IC, TLK mają poprawnie ustawione:
  
  • role="img"
  • aria-label="Express InterCity Premium", itp.
• Ikona „Rezerwacja obowiązkowa” – kod jest poprawnie oznaczony opisem, co pozawala na rozumienie znaczenia symbolu R.:
  
  • aria-label="Rezerwacja obowiązkowa"

Dzieki aria-label technologia asystująca, taka jak czytnik ekranu, odczyta sens graficznego oznaczenia.

• Graficzne oznaczenia miejsc specjalnych (np. miejsce na rower, miejsce na wózek inwalidzki itd.) są prawidłowo opisane w kodzie. Każda ikona posiada atrybut alt, a opisy odnoszą się do funkcji stojącej za obrazkiem, a nie do wyglądu obrazka. 

Podstrona Twoja podróz – Wybór miejsc

Plusy

• ikony mają prawidłowo przygotowane opisy alternatywne,
• obrazy dekoracyjne mają właściwie nadany alt="" lub aria-hidden,
• etykiety przycisków i linków są uzupełnione o atrybuty aria, dzięki czemu użytkownicy czytników ekranu otrzymują pełniejszy kontekst działania elementu.

Alternatywny sposób wyboru miejsc

Strona PKP zawiera złożony, wizualny wybierak miejsc w postaci mapy wagonu. Nie jest on w pełni obsługiwalny za pomocą klawiatury i czytników ekranu, jednak zapewniono alternatywny sposób wyboru miejsc – poprzez dostępną listę.

Podstrona Płatność

Plusy 

• Licznik czasu na zakup biletu został oznaczony atrybutem aria-live, dzięki czemu użytkownicy czytników ekranu są na bieżąco informowani o pozostałym czasie na dokończenie transakcji.

Problemy

• Użytkownicy czytników ekranu nie dowiedzą się, ile bilet kosztował przed promocją. Przekreślona cena 71,00 zł jest przekazywana wyłącznie wizualnie – w kodzie nie zastosowano atrybutów aria ani ukrytego opisu, który informowałby o tym, że jest to dawna cena przed obniżką, a 39,05 zł to cena aktualna. Czytnik czyta: “Do zapłaty: 71 zl, obecna cena 39,05 zł”.

‍

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

Strona głowna

• W strukturze nagłówków brakuje elementu <h1>, który powinien definiować główny tytuł strony.
• Nagłówki <h3> w sekcji wyszukiwania połączenia są nieprawidłowo zagnieżdżone – brakuje nad nimi nadrzędnych nagłówków wyższego poziomu, co zaburza hierarchię dokumentu.
• Pozostałe nagłówki <h2> i <h3> są stosowane poprawnie i zachowują prawidłową kolejność.
  

‍

Podstrony Wyniki wyszukiwania połączeń, Twoja podróz – Wybór miejsc oraz  Płatność

Problem:

• Na analizowanych podstronach w top barze znajdują się ukryte nagłówki (h1, h2). To błąd, ponieważ zgodnie z dobrymi praktykami semantycznymi oraz wytycznymi WCAG nagłówki powinny opisywać strukturę treści strony, a nie elementy nawigacji czy ikonki menu.
  
  Skutkiem takiego podejścia jest m.in. pojawienie się dwóch nagłówków h1 na podstronie Twoja podróż – Wybór miejsc:

• h1: „PKP Intercity” – ukryty nagłówek w top menu,
• h1: „Wybór miejsc” – właściwy nagłówek sekcji głównej.

‍

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

Problem

Kluczowe elementy w design systemie PKP Intercity mają niewłaściwie dobrane kontrasty, co powoduje systemowe, powtarzalne błędy dostępności na wielu podstronach i wpływa na czytelność interfejsu.

Elementy, które mają zbyt niski kontrast:

• Nagłówki sekcji (np. „Preferencje wyboru miejsca”, „Bilety dodatkowe”)
• Przyciski CTA (np. „Wybierz miejsce”, „Przejdź do płatności”, „Wróć”, „Wyszukaj”) – zarówno w wersji wypełnionej, jak i w wariancie outlined – mają zbyt niski kontrast między tekstem a tłem.
• Pomarańczowy tekst linków i akcji (np. „Później”, „Wróć do wyszukiwarki”)
• Pomarańczowe etykiety i oznaczenia na jasnych tłach (np. liczby, badge, podświetlenia)

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

Strona główna

Logo – link do strony głównej

• Logo ma nie ma opisowego atrybut alt="PKP Intercity" oraz nie nie informuje on precyzyjnie o celu – że to link do strony głównej. Ten tekst mógłby być podany w aria-label.

‍

Poza tym na stronie głownej nie występują błędy dostępności związane z celem linku.

Podstrona Twoja podróż – Wybór miejsc

Problemy

• Link ma ukryty tekst (sr-only), ale brak informacji, że link otwiera się w nowej karcie. Dodatkowo Brak informacji, że to plik PDF.

‍

Czytaj drugą część audytu PKP Intercity.