3 miesięcy temu
Zapewnienie dostępności usług bankowych nie jest rzeczą prostą. Na ostateczny efekt składają się setki, a choćby tysiące drobnych usprawnień i rozwiązań na stronach internetowych i w aplikacjach. Nie ma jednego sposobu na zdjęcie wszystkich barier, ale też nie trzeba wymyślać koła na nowo. Co zrobić, by zapewnić dostępność w płatnościach bezgotówkowych? Jakie rozwiązania zastosować, by korzystając z bankowości, móc wykorzystać czytnik ekranu?
O nowych przepisach, które wchodzą w życie za niecały rok, pisaliśmy w ramach cyklu „Dostępne Finanse” dość obszernie. Unijna dyrektywa (Europejski Akt o Dostępności) oraz implementująca ją ustawa nakładają na firmy wiele nowych obowiązków, zaś konsumentom przyznają prawo do dostępu do usług w sposób uwzględniający ich potrzeby.
Badanie przeprowadzone przez Rzecznika Finansowego pokazało, iż prace nad zapewnianiem dostępności usług płatniczych i bankowych postępują. Niestety niektóre firmy przez cały czas nie spełniają choćby minimalnych standardów w tym zakresie. Dlatego w ramach akcji „Dostępne Finanse” chcemy podpowiadać, jak to robić dobrze.
Opisywaliśmy wymagania, teraz chcielibyśmy pokazać rozwiązania. Co to znaczy? Na przykład jednym z takich wymagań jest, by usługa czy produkt były postrzegalne. Czyli każdy element strony internetowej, aplikacji mobilnej, informacji o usłudze czy dokumentacji powinien być dostępny do eksploracji różnymi zmysłami. Nie każdy użytkownik czy klient może korzystać ze wzroku. Stąd wymóg, by strona czy też aplikacja była dostępna dzięki innych zmysłów. Na przykład słuchu.
W jaki sposób osoby niewidome lub słabowidzące mogą nawigować po serwisach internetowych?
Odpowiedź na to pytanie wiąże się z drugim z czterech głównych wymagań dostępności elektronicznej. Chodzi o kompatybilność (nazywaną też solidnością). Polega on na tym, iż strony, aplikacje czy inne urządzenia powinny współpracować z narzędziami wykorzystywanymi przez osoby ze specjalnymi potrzebami.
„Osoba niewidoma lub z problemami z widzeniem powinna mieć dostęp z klawiatury do wszystkich elementów w serwisie internetowym, co wiąże się z możliwością zapoznania z treścią dzięki czytnika ekranu. W przypadku osób słabowidzących, tam gdzie to jest możliwe, należy dać możliwość zmiany wielkości czcionki i zmiany kontrastu” – mówi Elżbieta Oleksiak z Polskiego Związku Niewidomych.
Czym jest czytnik ekranu (z ang. screen reader), jak działa i jak zapewnić, by usługa, np. system płatniczy, pozwalała na korzystanie z niego?
Czym są czytniki ekranu?
Czytniki ekranu to narzędzia asystujące, które przetwarzają tekst na mowę syntetyczną. Na rynku jest kilka czytników ekranu, a każdy z nich ma swoją specyfikę działania. Niektóre z nich są instalowane wraz z systemem operacyjnym, inne można pobrać bezpłatnie lub wykupić licencję na ich używanie.
W Windowsie jest to funkcja Narrator, do której przetestowania zachęcam wszystkich, którzy nie słyszeli wcześniej o tym sposobie odbierania treści z komputera.
Urządzenia z systemami macOS i iOS mają aplikację VoiceOver, a na Androidzie znajdziemy TalkBack. Oprócz tego popularnością cieszą się niezależne programy: NVDA i JAWS, które według badań WebAIM są używane przez 60% użytkowników czytników ekranu. Kto korzysta z tych narzędzi? Przeznaczone są one przede wszystkim dla osób z niepełnosprawnością narządu wzroku.
Jak to działa? Tak jak napisałem wcześniej – warto, żeby każdy przekonał się na własnych uszach, jak odbiera się treści stron internetowych dzięki zmysłu słuchu. W praktyce czytnik przetwarza na dźwięk to, na co wskazuje kursor lub tzw. fokus, czyli element strony, na którym aktualnie znajduje się użytkownik nawigujący po niej dzięki klawiatury.
Osoby z dysfunkcją wzroku nie są bowiem często w stanie korzystać z myszy do nawigowania. Zamiast tego wykorzystują klawiaturę. dzięki klawisza Tab lub strzałek (zależnie od struktury strony czy aplikacji) przemieszczają się po zakładkach i oknach. Żeby jednak to było możliwe, projektanci muszą zadbać o dwie bardzo ważne sprawy: opisy alternatywne i uporządkowaną strukturę strony.
Jak pisać tekst alternatywny?
To, co użytkownik widzi na ekranie komputera lub telefonu, to tylko część informacji, które twórcy strony czy aplikacji mogą zawrzeć w kodzie. A czytniki nie przetwarzają grafiki, ona sięgają właśnie do technicznej konstrukcji serwisu.
Każdy obiekt na stronie internetowej może być opisany parametrami, które dla przeciętnego użytkownika są niewidoczne. Jednym z takich parametrów jest tzw. tekst alternatywny. To zaszyty w kodzie opis obiektu, który pozwala użytkownikowi korzystającemu z czytnika ekranu zorientować się, gdzie znajduje się aktualnie fokus/kursor.
Część użytkowników może kojarzyć tekst alternatywny ze zdjęciami lub innymi grafikami – w ich przypadku stosowanie tekstu alternatywnego jest już normą w internecie. Tym bardziej iż wyszukiwarki internetowe „lubią” dobrze opisane zdjęcia, co poprawia ich pozycjonowanie.
Przykładem niech będzie witryna Urzędu Komunikacji Elektronicznej i opublikowany na niej artykuł dotyczący opisów alternatywnych. Zdjęcie otwierające artykuł ma w kodzie wpisany atrybut „alt” o treści „Kobieta z założonymi rękami, w jasnej marynarce, na ciemnym tle”. Użytkownik odbierający stronę dzięki wzroku zobaczy zdjęcie. Użytkownik korzystający z czytnika ekranu – usłyszy ten opis.
Jednak nie każda grafika wymaga barwnego opisu alternatywnego. Dobra praktyka mówi, by w przypadku obrazów, które nie mają znaczenia funkcjonalnego lub informacyjnego, najlepiej pozostawić je „niewidoczne” dla czytników ekranu. Eksperci zalecają, by w takich sytuacjach pamiętać o dodaniu atrybutu „alt”, ale zostawić go pustym.
Dzięki temu ogranicza się zawartość strony postrzeganej przez osoby korzystające z czytnika ekranu tylko do tych rzeczywiście istotnych elementów. Trzeba zawsze pamiętać, iż omiecenie całej strony wzrokiem zajmuje sekundę, natomiast przejście dzięki klawiatury przez całą jej strukturę w poszukiwaniu konkretnego przycisku lub funkcjonalności – zdecydowanie dłużej.
Tekst alternatywny nie tylko w obrazkach
Zdecydowanie poważniejszą barierą niż niejasno opisane ilustracje może być struktura strony, która nie jest wystarczająco przejrzysta dla użytkownika czytnika ekranu. Tak samo jak alternatywny tekst powinny mieć obrazki, tak samo opisem przeznaczonym dla narzędzi zapewniających dostępność powinien być opatrzony każdy istotny element nawigacji.
Każdy przycisk w serwisie internetowym czy aplikacji mobilnej powinien być zaetykietowany, czyli powinien w atrybucie alt zawierać tekst np. „menu”. jeżeli ta zasada nie jest zachowana, to osoba, która nie widzi, nie wie, co się znajduje pod każdym elementem, dopóki w niego nie kliknie. Staje się dużym problemem, kiedy serwis lub aplikacja składa się z wielu takich przycisków.
„Wdrażając i rozwijając BLIKa w różnych serwisach, wszechstronnie dbamy o aspekty związanie z dostępnością, czyli: postrzegalność, funkcjonalność, zrozumiałość i kompatybilność. Wprowadziliśmy między innymi takie udogodnienia jak szczegółowy tekst alternatywny, który pozwala użytkownikowi korzystającemu z czytnika zawartości ekranu na pełen komfort i zrozumienie procesu, w którym się znajduje” – wskazuje Iwona Szymańska, Lead Product Designer w systemie płatności mobilnych BLIK.
Na czym to polega? Na przykład na tym, by przy wyborze metody płatności poszczególne „kafelki” z nazwami banków były nie tylko obrazkami, ale zawierały odpowiednie teksty alternatywne.
Inną sprawą jest zaprojektowanie kodu strony w taki sposób, który maksymalnie ułatwia użytkownikowi zrealizowanie transakcji. „Staramy się, aby wszędzie tam, gdzie jest BLIK, użytkownik mógł korzystać z interfejsu również dzięki klawiatury, gestu, głosu czy dotyku. Jednocześnie zależy nam, żeby zawsze wiedział on, na jakim etapie procesu płacenia się znajduje i w jaki sposób może po nim nawigować” – pisze Iwona Szymańska.
Na przykład w funkcjonalności zatwierdzania płatności BLIKiem, pierwszym fokusem po załadowaniu strony jest pole do wprowadzenia kodu. Po kliknięciu tabulatora na klawiaturze fokus przenosi się jednak nie na sąsiedni link „Skąd wziąć kod?”, tylko na znajdujący się poniżej przycisk „Dalej”.
Dlaczego tak jest? Przy płatności BLIKiem najważniejszy jest czas – ważność kodu to dwie minuty, a jak wspominałem wcześniej, nawigowanie dzięki klawiatury i czytnika ekranu zajmuje więcej czasu. Gdyby użytkownik musiał „przeklikać się” przez tę aplikację w kolejności, która wynika z graficznego układu i dla pewności odsłuchać opisu każdego z elementów, mógłby nie zdążyć sfinalizować transakcji.
Dobra nawigacja wymaga precyzyjnych opisów
Na odpowiednie dostosowanie przycisków i innych elementów nawigacyjnych strony zwraca uwagę także Bank Millennium.
„Bardzo istotną rolę w całym procesie ma utrzymanie wysokiego poziomu zgodności kodu html, stosowanie prawidłowych znaczników i adekwatne opisywanie pól i linków, które pomagają użytkownikom korzystającym z czytników ekranu w nawigacji i w zrozumieniu zawartości strony” – tłumaczy Jacek Kolasiński z zespołu zarządzania stroną internetową.
W czym się to przejawia? Na przykład w tym, iż przyciski umieszczone pod sekcjami strony dotyczącymi poszczególnych produktów zawierają dodatkowe, przeznaczone tylko dla czytników ekranów informacje. Celem takiego projektowania jest właśnie zapewnienie użytkownikowi, żeby w każdym momencie wiedział, gdzie się znajduje w strukturze strony i jaki efekt wywoła ewentualne kliknięcie przycisku.
Dla widzącego użytkownika przycisk „Dowiedz się więcej” wygląda tak samo pod ofertą „konta osobistego” jak „banku w telefonie”. Jednak dzięki dodatkowemu opisowi w kodzie strony, korzystając z czytnika strony, usłyszymy „Dowiedz się więcej…” oraz nazwę każdego produktu. Nie jest to wielka rzecz, ale łatwo o niej zapomnieć, gdy np. projektanci używają gotowych formatów do stałych elementów na stronie.
Analogiczne rozwiązanie stosuje także Bank BNP Paribas. Przycisk „Sprawdź” wygląda tak samo pod każdą z promowanych okazji. Jednak czytnik ekranu poinformuje użytkownika także o tytule oferty, do której kliknięcie przycisku miałoby go przekierować.
Regiony i nagłówki, czyli co widzą czytniki ekranu
Strona internetowa banku – podobnie jak i jego oferta – może być bardzo obszerna. Czasami użytkownik wchodzi na nią, by sprawdzić, czy nie ma jakiejś ciekawej promocji lub by sprawdzić produkt, którego potrzebuje.
Częściej jednak przez stronę główną przechodzą klienci banku, którzy chcą się zalogować. Dla tych, którzy postrzegają ją wzrokiem, jest to zwykle kwestia zlokalizowania przycisku logowania i kliknięcia go myszką. Co mają zrobić osoby, które nawigują po stronie dzięki dźwięku?
„Przykładowe wdrożenia, które pozwoliły nam na spełnienie wytycznych, to m.in. uporządkowanie struktury nagłówków na stronie oraz zdefiniowanie poprawnych regionów strony (landmarks). Te działania umożliwiły łatwą nawigację i zrozumienie struktury treści, co jest niezbędne dla osób korzystających z czytników ekranu i innych technologii asystujących” – wyjaśnia Piotr Wieczorek, Starszy Menedżer ds. User Experience w BNP Paribas Bank Polska.
Na uwagę zasługuje również wykorzystanie tzw. skiplinków, które umożliwiają przejście na skróty do najważniejszych sekcji strony przy użyciu klawiatury. Pierwszy z nich prowadzi do strony logowania.
W praktyce znowu rozwiązanie to jest niewidoczne (przynajmniej początkowo) w interfejsie strony. Ale dla czytników i ich użytkowników – bardzo pożądane. Chodzi o dodatkową nawigację pozwalającą przeskoczyć do tych sekcji strony, których klient potrzebuje.
Każdy może takie menu wywołać, otwierając stronę BNP Paribas i klikając klawisz Tab. Na samym szczycie strony powinien pojawić się przycisk-nawigacja, który można przewijać do przodu dzięki Tab lub wstecz kombinacją Shift+Tab.
Użytkownik dostaje trzy opcje: może zapoznać się z treścią strony, przejść od razu do logowania, do sekcji kontaktu z bankiem albo do części „treściowej” strony – która zawiera już oferty, informacje i produkty.
Nie o sam przycisk tu jednak chodzi. On wynika z tego, iż struktura strony jest z góry pod takie rozwiązanie zaplanowana i zarządzana. Architekci informacji muszą zadbać, by regiony i podregiony strony wydzielić, a potem zdecydować, co w każdym z nich będzie się znajdowało i jaką ścieżką do niego trafić.
I prawdą jest, iż regulacje, które nakładają na banki obowiązek tworzenia dostępnych usług i produktów, były tworzone z myślą przede wszystkim o potrzebach osób z niepełnosprawnościami. Jednak, jak pisała niedawno Claudia Wensierska w HomoDigital, dzięki dostępności cyfrowej zyskujemy wszyscy.
Źródło zdjęcia: Hal Gatewood/Unsplash
