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

Wstęp

Rozpoczynamy publikację naszej serii szybkich audytów dostępności „A11y sprawdzamy”. W poniższym szybkim audycie postanowiliśmy zbadać poziom dostępności strony Rzecznika Finansowego. 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 Rzecznika służy obywatelom do uzyskania informacji i pomocy w sporach z instytucjami finansowymi – takimi jak banki, ubezpieczyciele, firmy pożyczkowe czy towarzystwa emerytalne. Umożliwia złożenie wniosku o interwencję lub postępowanie polubowne, zapoznanie się z prawami konsumentów na rynku finansowym oraz skorzystanie z pomocy ekspertów Rzecznika.

W audycie sprawdzamy trzy kluczowe podstrony istotne dla doświadczenia użytkownika na tym portalu publicznym:

• Strona główna – to punkt startowy dla większości użytkowników, zarówno konsumentów, jak i dziennikarzy czy instytucji. Zawiera główne sekcje informacyjne, aktualności, skróty do usług, komunikaty o działalności Rzecznika oraz menu prowadzące do kluczowych obszarów tematycznych.
  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 „Dla klientów – Wzory wniosków” – sekcja, w której użytkownicy szukają gotowych formularzy i dokumentów niezbędnych do złożenia wniosków o interwencję lub postępowanie polubowne.
  Dlaczego istotna: to miejsce, w którym użytkownik podejmuje pierwszy realny krok w kierunku rozwiązania swojego problemu.

• Podstrona „Wniosek o przeprowadzenie pozasądowego postępowania w sprawie rozwiązania sporu z podmiotem rynku finansowego” – podstrona opisująca możliwość złożenia wniosku o postępowanie polubowne oraz udostępniająca formularz do jego pobrania lub wypełnienia.
  Dlaczego istotna: stanowi końcowy etap ścieżki użytkownika poszukującego pomocy.

Kontekst badania

Audyt przeprowadzono w ramach cyklu krótkich analiz stron internetowych z różnych branż pod kątem dostępności cyfrowej. Celem jest zbadanie, w jakim stopniu serwisy publiczne spełniają podstawowe wymogi WCAG 2.2 i są przygotowane do wymagań Europejskiego Aktu o Dostępności (EAA).

Cel i zakres audytu

Celem audytu jest szybka i wstępna ocena, jak strona spełnia podstawowe wymogi WCAG 2.1 i 2.2 na poziomie A/AA. Raport pokazuje wyniki przeglądu kilku wybranych podstron i elementów interfejsu ocenionych na podstawie 10 kryteriów.

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 10 kluczowych kryteriów, obejmujących najczęściej spotykane błędy dostępności. Analiza obejmuje maksymalnie trzy 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/2.2 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 i 2.2. 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

Problemy:

• Brak atrybutów alt przy przy grafikach dekoracyjnych (np. ikonach Facebook, YouTube, BIP). Czytnik ekranu odczyta je jako „link, grafika”, bez informacji, dokąd prowadzą, przez co użytkownik nie wie, jaki jest cel odnośnika.

• Brak atrybutów alt przy części zdjęć w artykułach. Na szczęście większość obrazków ma poprawnie dodany tekst alternatywny. W niektórych przypadkach warto jednak rozważyć, czy opis jest potrzebny, ponieważ część z nich nie wnosi istotnej informacji.

Plusy:

• Ozdobne ikonki mają pusty atrybut alt, dzięki czemu czytniki ekranu je pomijają.
• Większość obrazów na stronie posiada odpowiedni tekst alternatywny.

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

Struktura nagłówków na sprawdzanych podstronach jest prawidłowa.

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

• Na audytowanych stronach kontrast jest prawidłowy z jednym wyjątkiem o niskim priorytecie – w top barze (na górnym pasku) slogan marki “Twój sojusznik w świecie finansów” ma zbyt niski kontrast w stosunku do tła. Kontrast można jednak zwiększyć za pomocą udostępnionej kontrolki kontrastu.

Plusy

• brak istotnych problemów z kontrastem.
• kontrolka kontrastu.

4. Kontrast elementów graficznych

1.4.11 Kontrast elementów nietekstowych (AA)

Dlaczego to ważne

Elementy graficzne pełniące funkcję użytkową (przyciski, obramowania pól, wykresy, ikony) muszą być wyraźnie wyróżnione względem tła i sąsiadujących elementów. Niski kontrast sprawia, że są słabo widoczne lub niewidoczne dla części użytkowników, co uniemożliwia korzystanie z interfejsu. Wymagany minimalny kontrast: 3:1.

Co sprawdzaliśmy

• Kontrast elementów nietekstowych, takich jak przyciski, obramowania pól, ikony oraz wskaźnik fokusu klawiaturowego.

Wyniki

Plusy

Na analizowanych stronach nie stwierdziliśmy problemów z kontrastem elementów graficznych – wszystkie komponenty interfejsu są dobrze widoczne i spełniają wymogi WCAG 2.2 AA.

5. 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 stronie głównej

Linki ikonki social media

• Obrazek w linku ma pusty atrybut alt (alt=""), a tytuł (title) nie opisuje celu linku – informuje tylko, że otworzy się w nowej karcie.
• Dla użytkowników czytników ekranu link zostanie ogłoszony jako „link, link otwiera się w nowej karcie” bez nazwy – nie wiadomo dokąd prowadzi.

Logo - link do strony głównej

• Logo ma opisowy atrybut alt="Rzecznik Finansowy", jednak nie informuje on precyzyjnie o celu – że to link do strony głównej. Ten tekst mógłby być podany w aria-label.

Buttony “Czytaj więcej”

• Buttony „Czytaj więcej” są niejednoznaczne – nie wiadomo, dokąd prowadzą. Dodatkowo powtarzają się w ramach listy, co utrudnia orientację użytkownikom czytników ekranu. Każdy link „Czytaj więcej” musi zawierać doprecyzowaną informację o celu, np.
  • przez aria-label="Czytaj więcej: [tytuł artykułu]", lub
  • przez ukryty tekst dla czytników (<span class="sr-only">...tytuł artykułu...</span>)

Tagi – linkujące na podstronę wyników wyszukiwania

• Tagi prowadzą do podstrony wyników wyszukiwania, ale zostały oznaczone jako przyciski (<button>). Powinny być linkami (<a>), ostylowanymi jak przyciski. Obecna forma wprowadza w błąd użytkowników czytników ekranu, ponieważ anonsuje przycisk, więc sugeruje akcję na bieżącej stronie (np. filtr), a nie nawigację.

Na podstronie Dla klientów-Wzory wniosków

Linki do plików (DOC, DOCX)

• Czytnik odczytuje nazwę dokumentu, format i rozmiar – ale pomijany jest kontekst kategorii (np. „Dla występujących o interwencję w sprawie ubezpieczeniowo-emerytalnej”).
• Użytkownik czytnika ekranu nie dowiaduje się, czego dokładnie dotyczy wzór.
• W aria-label należy dodać pełny opis: np.
aria-label="Pobierz wzór wniosku (DOCX, 0,03 MB) dla występujących o interwencję w sprawie ubezpieczeniowo-emerytalnej"

Linki do platformy ePUAP umieszczone w tekście

• Link do ePUAP nie ma opisowego tekstu, zamiast tego widoczne jest tylko słowo “Link”
• Informacja, że link otworzy się w nowej karcie, znajduje się tylko w title. Nie wszystkie czytniki ekranowe go odczytują.
• Zamiast polegać wyłącznie na title, lepiej użyć aria-label lub dodać wizualnie ukryty opis (.sr-only), który jednoznacznie przekazuje cel linku i informuje o nowej karcie.

Podstrona formularza

Linki do filmu instruktażowego n a YouTube umieszczone w tekście

• Link nie ma wystarczająco opisowego tekstu – sam zwrot „do filmu instruktażowego” nie wskazuje, że prowadzi do serwisu YouTube i otwiera się w nowej karcie.
• Informacja o nowej karcie znajduje się jedynie w title, którego wiele czytników ekranowych nie odczytuje.
• Zamiast title należy użyć aria-label lub dodać ukryty opis (.sr-only), który jednoznacznie opisze cel linku