blog na temat dostępności stron internetowych

Przejdź do głównej treści

Pojedynek (nie)dostępnych stron – banki

Pojedynek (nie)dostępnych stron to seria artykułów, w których sprawdzam podstawową dostępność trzech wybranych serwisów internetowych. W teście tym wykorzystuję metodologię “Easy checks”, opisaną w artykule “Easy Checks” czyli proste sposoby na oszacowanie dostępności strony“. W pierwszym artykule z tej serii sprawdziłam strony trzech stacji telewizyjnych; tym razem postanowiłam przyjrzeć się stronom głównym trzech banków: Pekao SA, PKO BP i mBanku.

Wyniki

Wszystkie trzy sprawdzone serwisy uzyskały niemal identyczne wyniki; niestety każda ze stron zawierała błędy, które utrudniają (bądź uniemożliwiają) dostęp do pewnych treści osobom niepełnosprawnym.

Tytuł strony

Jest to jedyny sprawdzian, który przeszły pozytywnie wszystkie trzy banki. Każda ze stron posiadała tytuł prawidłowo opisujący jej treść, aczkolwiek serwis mBanku mógłby zmienić stosowane tytuły na bardziej zwięzłe:

  • <title>PKO Bank Polski</title>
  • <title>Strona główna – Bank Pekao SA</title>
  • <title>Kredyty, lokaty, konta bankowe, karty, ubezpieczenia online – mBank</title>

Alternatywy dla treści nietekstowych

Wszystkie trzy serwisy zawierały zarówno poprawnie opisane obrazki, jak też i grafiki, które nie posiadały prawidłowej alternatywy tekstowej, np.:

  • przyciski serwisów społecznościowych na stronie Pekao posiadały pusty atrybut “alt”, co oznacza, że osoby niewidome nie będą wiedzieć, do czego służą
  • strona główna banku PKO zawierała zaledwie kilka grafik, ale kilka z obrazków (w tzw. sliderze) zostały opisane w identyczny (i nieprawidłowy) sposób – “PKO Bank Polski”
  • obrazek ze strony mBanku zawierający tekst 'Zostań klientem' i pseudo-przycisk 'Otwórz konto'

    niektóre z obrazków tła zastosowanych na stronie mBanku nie były czysto dekoracyjne, gdyż zawierały tekst, taki jak “Zostań klientem, Otwórz konto” czy też “Promocja”, bądź też sugerowały spadek/wzrost kursu waluty.

Nagłówki

Choć każdy ze sprawdzanych serwisów zawierał elementy nagłówkowe, struktura nagłówków nie była całkowicie poprawna na żadnym z nich. Np. strony Pekao i PKO BP nie posiadały głównego nagłówka, zaś strona mBanku zawierała nagłówki, które nie zostały oznaczone przy pomocą odpowiednich elementów. Do innych błędów należało stosowanie nieprawidłowo zagnieżdżonych lub pustych nagłówków, oraz oznaczanie pewnych treści jako nagłówki, pomimo że w rzeczywistości nie pełniły one takiej roli.

Kontrast

Większość elementów strony Pekao została zapewniała wystarczający kontrast pomiędzy tekstem a tłem. Do wyjątków należały: biały tekst “NOWE” wyświetlony na czerwonym tle (kontrast 4.0:1), niebieski i czerwony tekst na jasno niebieskim tle użyty w sekcji “Logowanie”, oraz niemal kompletnie nieczytelny tekt w stópce strony (2.27:1).

wyróżniony fragment słabo widocznego tekstu na stronie PKO BP

Na stronie PKO BP duża część jasnoszarego tekstu wyświelonego na białym tle nie była wystarczająco czytelna (współczynnik kontrastu w przedziale od 2.4:1 do 3.5:1).

Dla odmiany serwis mBanku zdał ten test niemal w stu procentach. Choć niektóre kombinacje kolorystyczne tekstu z tłem były na granicy minimalnego kontrastu (np. biały tekst wyświetlony na jasnym obszarze zdjęcia), użycie właściwości “text-shadow” pomogło zwiększyć kontrast, czyniąc tekst bardziej czytelnym. Jedynym wyjątkiem był tu właściwie tekst “Szukaj…” wyświetlony w polu formularza znajdującym się na początku strony.

Zmiana wielkości tekstu

Na wszystkich testowanych stronach powiększenie rozmiaru tekstu spowodowało utratę niektórych treści i funkcji. Co ciekawe, strona Pekao posiada przyciski do zmianu rozmiaru tekstu, kontrolki te jednak nie działają.

Obsługa z klawiatury

Także i w tym teście wszystie strony uzyskały podobne wyniki. Choć większość elementów interaktywnych mogła być obsłużona z klawiatury, każdy z serwisów zawierał kilka elementów bądź treści, do których można było dotrzeć jedynie używając myszy, np:

  • strona Pekao zawierała odnośniki oznaczone przy pomocy elementu <div> zamiast <a>, do których nie można było przenieść fokusa
  • kontrolki slidera na stronie PKO BP oznaczone były przy użyciu elementu <span> i również nie mogły być obsłużone z klawiatury, podobnie jak przyciski służące do zamknięcia tzw. okienek pop-up
  • spora część treści na stronie mBanku jest pokazywana jedynie, gdy użytkownik myszy przenosi kursor nad odpowiedni element. Niestety osoby widzące korzystające z klawiatury nie mają dostępu do tych treści.

Widoczny fokus

W tym teście najgorzej wypadła strona mBanku. Większość linków zamieszczona była na ciemnym tle, co oznacza że domyślny wskaźnik fokusa był niemal niewidoczny. Kolejnym problemem było to, że większość elementów, które otrzymują fokus, była niewidoczna na ekranie.

Strony Pekao i PKO BP zapewniły wskaźnik fokusa dla większości interaktywnych elementów, ale można znaleźć kilka wyjątków, np. kontrolki zakładek na pierwszej z tych stron, czy też przycisk / odnośnik “Zaloguj się” na drugiej z nich.

Formularze, etykiety, komunikaty o błędach

sekcja 'Logowanie' strony Pekao SA zawierająca niestandardową listę opcji i przycisk 'Dalej'

Strona Pekao SA nie posiadała odpowiednio oznaczonych etykiet dla pól formularzowych. Co więcej, element <select> w sekcji “Logowanie” został ukryty i zastąpiony elementem <div> zawierającym kilka odnośników (odpowiadającym opcjom elementu <select>).
Linki te z punktu widzenia osoby korzystającej z czytnika ekranu nie działają: wybranie któregokolwiek z nich nie otwiera nowej strony. Osoby niewidome nie są świadome, że muszą nie tylko wybrać odpowiedni link, ale również zatwierdzić go przez naciśnięcie przycisku “Dalej”. Jest to nieoczekiwane i trudne do przewidzenia zachowanie, gdyż nie jest ani sposób, w jaki działają standardowe linki, ani w jaki działają elementy <select>. Jest to typowy przykład złamania jednej z głównych zasad dostępności – używania elementów HTML zgodnie z ich przeznaczeniem.

Podobnie jak w przypadku strony Pekao SA, twórcy serwisu mBank zdecydowali się zastąpić element <select> znajdujący się w stopce strony alternatywnym rozwiązaniem. Niestety rozwiązanie to nie działa tak, jak powinno; choć użytkownicy czytnika ekranu mogą przenieść fokus do listy opcji, wartość poszczególnych opcji nie zostaje im odczytana (sprawdzono używając NVDA 2014.4). Osoby niewidome nie wiedzą zatem, jakie opcje mają do wyboru i trudno jest im świadomie wybrać jedną z nich.

Strona banku PKO BP także nie zapewnia prawidłowo oznaczonych etykiet dla elementów formularzowych.

Alternatywy dla treści multimedialnych

Wszystkie testowane strony były pozbawione treści multimedialnych.

Podstawowa struktura

Struktura żadnej z trzech stron nie była do końca poprawna. Poza wspomnianą wcześniej nieprawidłową strukturą nagłówków, problemami z opisami elementów graficznych i problematycznymi alternatywami dla elementów formularzowych, strony te zawierały również inne elementy, które nie zostały prawidłowo oznaczone. Na przykład, na stronie Pekao SA zostały użyte tzw. zakładki, jednak w kodzie HTML nie została stworzona żadna relacja pomiędzy kontrolkami zakładek, a odpowiadającymi im panelami. Osoby niewidome nie będą świadome, że wybranie któregoś z linków przedstawionych wizualnie jako nazwa zakładki, spowoduje zmianę treści na bieżącej stronie. Z punktu widzenia użytkownika czytnika ekranu jest to lista niedziałających linków.

Podsumowanie

Każdy z trzech przetestowanych serwisów wymaga naprawienia pewnych błędów, by polepszyć ich dostępność. Oprócz problemów opisanych powyżej istnieją także inne, np. slidery, których nie można zatrzymać, czy też stosowanie obrazków zawierających tekst, zamiast tekstu w formie HTML.

Tabela wyników
(1 – nie wykryto błędów, 0.5 – kilka błędów, 0 – wiele błędów, X – nie dotyczy)
Sprawdzian Pekao SA PKO BP mBank
W sumie: 4.0 / 9
44%
4.0 / 9
44%
4.0 / 9
44%
Tytuł strony 1 1 1
Alternatywa dla treści nietekstowych 0.5 0.5 0.5
Nagłówki 0.5 0.5 0.5
Kontrast 0.5 0.5 1.0
Zmiana wielkości tekstu 0 0 0
Dostęp z klawiatury 0.5 0.5 0.5
Widoczny fokus 0.5 0.5 0
Formularze, etykiety, komunikaty o błędach 0 0 0
Alternatywy dla treści multimedialnych X X X
Podstawowa struktura 0.5 0.5 0.5

Komentarze:

  1. Z ciekawości sprawdziłem i mBank na pewno nie spełnia wymagania unikalnych tytułów stron. Po kliknięciu na informacje o banku, cokolwiek byśmy nie klikali, tytuł pozostaje bez zmiany.
    PS. Podczytuję ten blog z przyjemnością.

  2. admin

    Teoretycznie w moich szybkich sprawdzianach testuję tylko jedną stronę (w tym przypadku była to strona główna serwisu). Oczywiście żeby stwierdzić, czy tytuł danej strony jest unikalny, nie wystarczy przetestować tylko jedną stronę – z tego co pamiętam sprawdziłam jeszcze przypadkowo wybrane trzy inne i wszystkie miały poprawne elementy <title>. Ale ma Pan rację – otworzyłam teraz więcej podstron i niektóre z nich mają nieprawidłowe tytuły. Cóż, mBank miał szczęście, gdy pisałam artykuł… 🙂
    PS: Dziękuję!

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>