BAF Business Accessibility Forum

Strony www

W raporcie przedstawiliśmy wyniki audytu wyselekcjonowanych serwisów internetowych w ramach sektorów istotnych z punktu widzenia Europejskiego Aktu o Dostępności, takich jak: sektor bankowy, e-commerce, łączności, transportu i TV.

Strona internetowa może być tworzona przy użyciu różnych języków programowania, frameworków, bibliotek i innych narzędzi. Niemniej jednak ostatecznie to, co jest widoczne w przeglądarce, to struktura oparta na kodzie HTML, wygląd oparty na kaskadowych arkuszach stylów CSS oraz funkcjonalności oparte na języku JavaScript. Dostępność cyfrowa strony internetowej w dużej mierze zależy od jakości zastosowania wymienionych technologii. Z tego powodu niezwykle istotne jest, aby developerzy nie tylko posiadali umiejętność korzystania z gotowych komponentów pochodzących z bibliotek i frameworków JavaScript, ale przede wszystkim mieli solidną wiedzę na temat podstawowych technologii budowy stron internetowych. Bazowe technologie mają kluczowe znaczenie nie tylko dla dostępności, ale także dla użyteczności i pozycjonowania stron internetowych.

Poziom dostępności strony internetowej można określić, przeprowadzając jej pełny audyt. Polega on na zbadaniu wytypowanych do audytu podstron lub widoków z funkcjonalnościami i komponentami istotnymi dla użytkownika lub ukończenia pożądanej operacji, takich jak: rejestracja, dokonanie zakupu, wysłanie przelewu, kontaktu z firmą itp.

Każdy z wytypowanych widoków powinien zostać poddany analizie pod kątem 50 kryteriów sukcesu standardu WCAG (Web Content Accessibility Guidelines) 2.1 na poziomie AA.

Audyt przeprowadza ekspert WCAG, który posiada odpowiednie kompetencje developerskie, umożliwiające udzielenie konkretnych rekomendacji dotyczących napotkanych problemów.

W ramach pełnego audytu konsultanci o różnych potrzebach wykonują przygotowane wcześniej zadania lub procesy zgodnie ze scenariuszem, które mają na celu wykrycie potencjalnych problemów z obsługą kluczowych funkcjonalności strony. Udział takich konsultantów umożliwia sprawdzenie, czy strona zapewnia dostępność dla użytkowników o różnych potrzebach i ograniczeniach.

Jak zatem w szybszy sposób dokonać wstępnej analizy dostępności strony?

W większości przypadków audyt dostępności strony internetowej jest procesem dość skomplikowanym, wymagającym uważności i znacznego nakładu czasu.

Należy założyć, że solidne fundamenty są nieodzowne dla każdej dostępnej strony internetowej. Tak jak w przypadku stawiania iglicy na szczycie wieżowca, brak fundamentów lub ich nieodpowiednie dostosowanie uniemożliwia utrzymanie tak wysokiego budynku, to analogicznie jest w przypadku stron internetowych. Nie możemy mówić o logicznej kolejności poruszania się po stronie za pomocą klawiatury, jeśli taka funkcjonalność w ogóle nie istnieje. Nawet dostępnie zaprojektowany formularz będzie bezużyteczny, jeśli link prowadzący do niego nie zostanie odpowiednio opisany.

Metoda Solidnych Fundamentów

W tym raporcie wyniki dostępności stron zostały oparte na tzw. Metodzie Solidnych Fundamentów.

Metoda obejmuje:

• sprawdzenie według 14 kryteriów pokrywających około 50% WCAG 2.1 AA kilku podstawowych i charakterystycznych widoków/podstron, od których użytkownik może zacząć korzystać z danej usługi. Kryteria obejmują właśnie te fundamentalne elementy, które są niezbędne do zapewnienia minimalnej dostępności.
• Testy z użytkownikami o różnych potrzebach, polegające na wykonaniu 4 charakterystycznych zadań dla danego sektora.

1. Analiza ekspercka (ok 50% WCAG 2.1 AA)
   Wytypowane 3 kluczowe podstrony. Każda oceniona wg kryteriów:
   1. Treści alternatywne dla elementów graficznych
   2. Etykiety pól formularzy
   3. Struktura nagłówków
   4. Użycie list
   5. Kontrast tekstu
   6. Kontrast elementów graficznych
   7. Tytuł strony
   8. Zrozumiałość linków
   9. Obsługa z poziomu klawiatury i widoczność fokusu
   10. Język strony
   11. Bezpośredni dostęp (skip links)
   12. Wyszukiwarka
   13. Użycie koloru
   14. Dopasowanie do ekranu
2. Testy z użytkownikami – 4 zadania

Opis kryteriów w analizie eksperckiej

Treści alternatywne dla elementów graficznych

• 0  rażące zaniedbanie
• 1  częściowy brak
• 2  nie ma większych problemów

Treści alternatywne dla elementów graficznych są ważne z kilku powodów. Przede wszystkim, ułatwiają dostęp do informacji osobom z różnymi ograniczeniami wzroku, które korzystają z aplikacji asystujących, takich jak czytniki ekranu. Dodatkowo stanowią alternatywę w przypadkach, gdy obrazy nie mogą być wyświetlone z powodu błędów, słabego połączenia internetowego lub indywidualnych ustawień użytkownika.

Treści alternatywne pomagają również w indeksowaniu i wyszukiwaniu obrazów przez wyszukiwarki internetowe, co wpływa na widoczność i dostępność treści dla szerszego audytorium.

Opisy alternatywne powinny być klarowne, zwięzłe i jednocześnie zawierać wszystkie niezbędne informacje umożliwiające zrozumienie treści i funkcji elementu graficznego. Powinny unikać powtórzeń z tekstem otaczającym lub z podpisami.

Etykiety pól formularzy

• 0  rażące zaniedbanie
• 1  częściowy brak
• 2  nie ma większych problemów

Etykiety pól formularzy to tekstowe opisy przypisane do poszczególnych pól formularza, które mają na celu zapewnienie jasnej identyfikacji danego pola formularza dla użytkowników. Etykiety pól formularzy umożliwiają łatwiejsze i bardziej intuicyjne korzystanie z formularzy na stronie internetowej. Dzięki nim użytkownik może w prosty sposób zidentyfikować, jakiego rodzaju informacje należy wpisać w konkretne pola.  Etykiety pól formularzy są istotne dla osób korzystających z technologii asystujących, takich jak czytniki ekranu. Brak etykiet uniemożliwia tym osobom samodzielne wypełnienie formularza na stronie internetowej.

Etykiety powinny być zawsze widoczne dla wszystkich użytkowników, niezależnie od wielkości ekranu urządzenia. Dzięki temu pomogą użytkownikom zorientować się, w jakim polu formularza aktualnie się znajdują bez względu na wpisane wartości.

Struktura nagłówków

• 0  rażące zaniedbanie
• 1  są, ale niepoprawna struktura
• 2  poprawne

Nagłówki pełnią kluczową rolę w organizacji i strukturze treści na stronie internetowej. Poprawna struktura nagłówków pomaga w tworzeniu spójnej i logicznej hierarchii informacji, która odzwierciedla cel i znaczenie poszczególnych sekcji i podsekcji. Dzięki temu użytkownicy łatwiej orientują się na stronie, szybko odnajdują interesujące ich treści i lepiej rozumieją, jak są one ze sobą powiązane.

Nagłówki mają również istotne znaczenie dla dostępności i użyteczności treści dla osób z różnymi potrzebami i preferencjami, takich jak osoby korzystające z czytników ekranów, osoby z dysleksją, osoby starsze czy osoby mające niski poziom umiejętności cyfrowych.

Poprawnie zorganizowane nagłówki ułatwiają nawigację po treściach i mają pozytywny wpływ na pozycjonowanie strony w wynikach wyszukiwania.

Użycie list

• 0  rażące zaniedbanie
• 1  słabe wykorzystanie
• 2  poprawne

Listy, takie jak wypunktowane, numerowane i listy definicji, pomagają w organizacji i prezentacji treści na stronach internetowych. Za pomocą list można wizualnie wyróżnić i pogrupować poszczególne elementy strony. Dzięki nim treści stają się bardziej uporządkowane i czytelne dla użytkowników, co ułatwia użytkownikom nawigację strony, zrozumienie i przyswajanie informacji.

Jedną z ważnych funkcji stosowania list na stronach internetowych jest grupowanie linków. Pozwala to użytkownikom, zwłaszcza tym korzystającym z czytników ekranu, szybko „skanować” i odnajdywać potrzebne informacje. Dzięki temu zwiększa się efektywność korzystania ze strony.

Kontrast tekstu

• 0 w dużej części niepoprawny
• 1 istnieją elementy mało kontrastowe
• 2  poprawny

Odpowiedni kontrast tekstu w stosunku do tła na stronach internetowych pomaga wyróżnić i zdefiniować poszczególne elementy strony, co przyczynia się do łatwiejszej nawigacji i korzystania z niej przez wszystkich użytkowników, niezależnie od ich zdolności wzrokowych. Wartość tego kontrastu jest określana przez tzw. współczynnik kontrastu, który dla zwykłego tekstu powinien wynosić co najmniej 4.5:1.

Odpowiedni kontrast tekstu jest również istotny ze względu na warunki oświetleniowe, w jakich użytkownik przegląda stronę internetową, oraz jakość ekranu i matrycy monitora, z których korzysta. Jeśli kontrast jest zbyt niski, to w zależności od źródła światła i jego intensywności tekst może stawać się mniej czytelny lub nawet nieczytelny.

Dodatkowo, odpowiedni kontrast tekstu przyczynia się do poprawy ogólnej jakości i estetyki stron internetowych, co przekłada się na pozytywne doświadczenia użytkowników.

Kontrast elementów graficznych

• 0 w dużej części niepoprawny
• 1 istnieją elementy mało kontrastowe
• 2  poprawny

Elementy graficzne, takie jak: przyciski, obramowania pól formularzy, wykresy, ikony oraz obrazy, które pełnią funkcję nie tylko dekoracyjną, powinny być odpowiednio wyróżnione w stosunku do sąsiadujących elementów. Jeżeli kontrast między tymi elementami jest zbyt niski, mogą być słabo lub zupełnie niewidoczne dla niektórych użytkowników, co utrudnia lub uniemożliwia zrozumienie ich funkcji.

Dodatkowo, elementy graficzne o niskim kontraście mogą negatywnie wpływać na ogólny wygląd i styl strony, co prowadzi do pogorszenia estetyki i spadku jakości wizualnej w zależności od warunków oświetleniowych, rodzaju ekranu i matrycy urządzenia, na którym strona jest wyświetlana.

Minimalny współczynnik kontrastu dla elementów graficznych powinien wynosić co najmniej 3:1.

Tytuł strony

• 0 niejednoznaczny
• 1 jednoznaczny

Tytuł strony jest jednym z ważniejszych elementów strony internetowej, ponieważ dostarcza użytkownikom informacji na temat jej zawartości i celu serwisu internetowego.
Tytuł jest wyświetlany na pasku tytułu przeglądarki, w zakładkach, w historii przeglądania, a także często w wynikach wyszukiwania. Dzięki temu użytkownicy mogą łatwo nawigować po stronach internetowych i wybierać te, które są dla nich najbardziej interesujące.  Tytuł jest szczególnie ważny dla osób korzystających z czytników ekranu, ponieważ jest pierwszą odczytywaną przez użytkownika informacją zaraz po wejściu na stronę.

Tytuł strony ma również znaczenie przy indeksowaniu przez wyszukiwarki internetowe.

Poprawny tytuł strony powinien być unikalny dla każdej podstrony lub widoku w witrynie. Powinien jednoznacznie i precyzyjnie określać temat strony, zawierając na przykład nazwę podstrony oraz nazwę firmy. Dzięki temu użytkownicy i wyszukiwarki mogą łatwo rozpoznać zawartość strony i skorzystać z niej w sposób efektywny.

Zrozumiałość linków

• 0 rażące zaniedbanie
• 1 istnieją niezrozumiałe
• 2 zrozumiałe

Linki na stronie internetowej powinny być zrozumiałe dla użytkowników, aby ułatwić im nawigację i odszukanie interesujących informacji. Ważne jest, aby linki były czytelne i jasno określały, dokąd prowadzą po kliknięciu. Dzięki temu użytkownicy wiedzą, czego mogą się spodziewać i czy warto kliknąć w dany link.

Zrozumiałość linków jest jeszcze bardziej istotna dla osób korzystających z czytników ekranu, które nawigując bezpośrednio po odnośnikach „odsłuchują” jedynie ich treść. Zatem sformułowania takie jak np.: „czytaj więcej”, „kliknij tutaj”, „pobierz” itp. nie dają jednoznacznej informacji o celu linku. Skutecznie utrudnia to zrozumienie elementów nawigacyjnych i zniechęca do dalszego korzystania ze strony.

Zrozumiałość linków ma również wpływ na pozycjonowanie strony w wynikach wyszukiwania.

Obsługa z poziomu klawiatury i widoczność fokusu

• 0 rażące zaniedbanie
• 1 niektóre elementy niedostępne
• 2 poprawna

Możliwość obsługi stron internetowych za pomocą klawiatury i widoczność tzw. fokusu na wybranym elemencie zapewniają dostępność i użyteczność stron internetowych dla różnych grup odbiorców korzystających z różnych urządzeń i technologii.

Wszystkie elementy interaktywne na stronie, takie jak: linki, przyciski, formularze mogą być obsługiwane za pomocą samych klawiszy, bez konieczności używania myszy lub ekranu dotykowego. Niektórzy użytkownicy z różnych powodów nie korzystają z urządzeń wskazujących, najczęściej ze względu na ograniczenia ruchowe, problemy ze wzrokiem lub preferencje osobiste.  

Zdefiniowany fokus wskazuje, który element jest aktualnie wybrany za pomocą klawiatury. Przeważnie jest on wyróżniony poprzez ramkę lub podkreślenie oraz zmianę koloru. Dzięki temu użytkownicy klawiatury widzą, na jakim elemencie się znajdują. Widoczny fokus jest szczególnie ważny dla osób słabowidzących lub z problemami poznawczymi, które mogą mieć trudności z koncentracją uwagi lub śledzeniem ruchu kursora.

Obsługa z poziomu klawiatury jest również ważna i przydatna doraźnie w różnych sytuacjach i warunkach, np. gdy użytkownik ma problemy techniczne z myszą lub ekranem dotykowym, gdy korzysta z laptopa bez myszy lub touchpada itp.

Strony internetowe powinny być zaprojektowane w taki sposób, aby umożliwić obsługę za pomocą klawiatury i zapewnić widoczność fokusu, aby wszyscy użytkownicy mogli swobodnie poruszać się po stronie i korzystać z jej funkcji.

Język strony

• 0 brak lub błędny
• 1 poprawny

Poprawne zdefiniowanie języka w kodzie strony internetowej ułatwia dostęp do treści osobom korzystającym z aplikacji asystujących, takich jak czytniki ekranu lub narzędzia tłumaczące. Wówczas tego rodzaju aplikacje są w stanie automatycznie rozpoznać język strony i dostosować się do niego, np. poprzez odpowiednie wymawianie tekstu lub sposób jego wyświetlania.

Jeśli język strony nie jest właściwie zdefiniowany lub jest niepoprawny, może to prowadzić do błędów lub całkowitego braku zrozumienia treści przez użytkowników. Ważne jest również, aby stosować się do zasad zmiany języka w obrębie strony, jeśli występują fragmenty w innym języku niż główny.

Bezpośredni dostęp (skip links)

• 0 brak lub błędny
• 1 poprawny

Odnośniki pozwalające przechodzić bezpośrednio do treści strony internetowej (tzw. skip links) bardzo przyspieszają obsługę strony. Umożliwiają pominięcie powtarzających się sekcji strony, takich jak menu nawigacyjne czy nagłówek, i natychmiastowe przeniesienie się do głównej treści lub innych istotnych elementów, bez konieczności przeglądania wszystkich elementów po drodze.

Możliwość „przeskoczenia” do treści strony jest istotna dla osób, które mają problem z szybkim dotarciem do pożądanych informacji, w szczególności gdy do nawigacji używają aplikacji asystujących, takich jak: czytniki ekranu, urządzenia alternatywne lub sama klawiatura. Bezpośredni dostęp zapobiega frustracji i zmęczeniu użytkowników, którzy musieliby wielokrotnie naciskać klawisz Tab lub strzałkę, aby przejść przez wszystkie elementy strony i dotrzeć do sekcji, która ich interesuje.

Wyszukiwarka

• 0 brak lub nie działa
• 1 jest i działa

Wyszukiwarka na stronie internetowej to ważne narzędzie, które umożliwia użytkownikom szybkie i skuteczne odnalezienie potrzebnych informacji. Dzięki niej użytkownicy  mogą uniknąć przeglądania całej strony, co dla osób korzystających z aplikacji asystujących i korzystających z urządzeń mobilnych jest procesem czasochłonnym i frustrującym. Aby wyszukiwarka była efektywna, powinna być funkcjonalna i umożliwiać obsługę za pomocą różnych sposobów nawigacji, w tym samej klawiatury. Ponadto powinna być zrozumiała dla użytkowników, zapewniając jasne i spójne oznaczenia, instrukcje oraz komunikaty dotyczące ewentualnych błędów.

Użycie koloru

• 0 rażące zaniedbanie
• 1 niektóre elementy wyróżnione tylko kolorem
• 2 poprawne

Kolor nie powinien być jedynym wizualnym sposobem przekazywania informacji, wskazywania czynności do wykonania czy też wyróżniania elementów wizualnych.

Osoby z zaburzeniami widzenia kolorów, takimi jak: protanopia, deuteranopia, tritanopia i inne, mogą mieć trudności w odczytywaniu treści, które opierają się wyłącznie na kolorze. Jeśli na przykład odróżnienie serii danych na wykresie bazuje tylko na kolorach, osoby te mogą nie zrozumieć prezentowanych informacji. Dlatego ważne jest stosowanie dodatkowych sposobów wyróżniania treści, takich jak: tekst, symbole, wzory. W przypadku tekstów konieczne może być również zastosowanie innych niż tylko kolor metod wyróżniania treści. Może to obejmować podkreślanie (np. dla linków), pogrubienie lub zmianę stylu czcionki, aby osoby z zaburzeniami widzenia kolorów (ślepota barw) mogły odróżnić istotne informacje od innych.

Użycie wyłącznie koloru ma również znaczenie dla osób korzystających z trybów kontrastowych. Są to ustawienia w przeglądarce, aplikacji asystującej lub systemie operacyjnym, które wymuszają zmianę kolorów tekstu i elementów funkcjonalnych na bardziej czytelne dla użytkownika.

Dopasowanie do ekranu

• 0 rażące zaniedbanie
• 1 nieznaczne utrudnienia
• 2 poprawne

Dopasowanie się strony internetowej do ekranu  jest ważne z uwagi na coraz większe zróżnicowanie wielkości ekranów oraz rosnącą popularność urządzeń mobilnych, takich jak smartfony i tablety. Dzięki temu użytkownik może wygodnie przeglądać stronę bez konieczności przewijania poziomego.

W przypadku urządzeń mobilnych, np. gdy trzymamy smartfon w jednej pozycji w uchwycie auta, roweru lub wózka, dopasowanie do ekranu jest szczególnie przydatne, ponieważ umożliwia łatwe i wygodne korzystanie ze strony bez konieczności  zmiany pozycji ekranu. Brak dopasowania do ekranu może powodować problemy z czytaniem treści, klikaniem w linki i przyciski, a także negatywnie wpływać  na ogólną użyteczność i dostępność strony dla wszystkich użytkowników.

Aplikacje mobilne

W ramach raportu przeprowadzono badanie aplikacji z sektorów bankowego, e-commerce, łączności, transportu i telewizji, ponieważ są to branże, w których aplikacje mobilne są powszechnie używane i często pobierane przez użytkowników. Badanie objęło te same aplikacje mobilne dostępne na dwóch najpopularniejszych systemach operacyjnych, Android i iOS. Każda aplikacja mobilna może być opracowana w językach natywnych związanych z danym systemem operacyjnym, na przykład Kotlin lub Java dla Androida, a Swift lub Objective-C dla iOS. Korzystając z tych języków programowania, istnieje możliwość stworzenia w pełni dostępnej aplikacji mobilnej, ponieważ twórcy tych języków zapewniają komponenty, które zostały przetestowane i opracowane zgodnie z zasadami dostępności cyfrowej. Z drugiej strony bardzo popularne stały się frameworki i inne narzędzia, które umożliwiają tworzenie aplikacji w jednym języku programowania, a następnie kompilowanie ich w sposób, który jedynie sprawia wrażenie, że aplikacja została wytworzona w języku natywnym. To wprawdzie znacząco skraca czas tworzenia aplikacji (czasem nawet dwukrotnie), ale może również generować potencjalne problemy. Twórcy aplikacji muszą być świadomi, że nie wszystkie frameworki i narzędzia do tworzenia aplikacji gwarantują satysfakcjonującą dostępność cyfrową, dlatego wybór odpowiednich technologii na początku projektu jest kluczowy. Warto pamiętać, że ostateczny efekt kompilacji aplikacji może być różny. Czasami nawet niemożliwe jest osiągnięcie pewnych aspektów związanych z dostępnością cyfrową, tak jak w przypadku podejścia „natywnego”. Dlatego ważne jest, aby twórcy aplikacji podejmowali świadome decyzje i starannie oceniali możliwości oraz ograniczenia frameworków oraz innych narzędzi, zanim zdecydują się na ich użycie. Zapewnienie dostępności cyfrowej powinno być priorytetem, nawet jeśli oznacza to nieco dłuższy proces tworzenia aplikacji.  Audyt aplikacji mobilnej polega na zbadaniu kluczowych widoków interfejsu użytkownika. Każdy z wytypowanych widoków jest oceniany pod kątem zgodności z 50 kryteriami sukcesu opisanych w standardzie WCAG 2.1. na poziomie AA.

Pełen audyt aplikacji mobilnej wymaga zaangażowania eksperta, który posiada specjalistyczną wiedzę dotyczącą danego języka programowania natywnego lub frameworku. Ekspert jest w stanie zaproponować rozwiązanie dla potencjalnych problemów, a także, w razie konieczności, zasugerować przebudowę widoków, jeśli użyty framework w obecnej wersji nie jest w stanie rozwiązać wykrytych błędów. Warto zauważyć, że niektóre frameworki, takie jak React Native (w momencie pisania tego tekstu w wersji 0.71), nie mają nawet oficjalnej wersji 1.

Dodatkowo, aby kompleksowo ocenić dostępność aplikacji mobilnej, konieczne są pogłębione testy z użytkownikami o różnych szczególnych potrzebach, takimi jak: osoby niewidome, niedowidzące, głuche, starsze osoby czy osoby z niepełnosprawnością intelektualną, których nazywamy „konsultantami”. Konsultanci wykonują szereg zadań, m.in. zakup produktów, biletów czy wykonywanie przelewu. Te zadania pozwalają na wykrycie potencjalnych problemów, które mogą utrudniać lub nawet uniemożliwić korzystanie z funkcjonalności aplikacji.

Ze względu na te dwa czynniki – szczegółową analizę zastosowanego frameworku oraz pogłębione testy z użytkownikami o specjalnych potrzebach – pełen audyt dostępności cyfrowej aplikacji mobilnej jest procesem czasochłonnym i czasami dość skomplikowanym.

Czy szybsza ocena dostępności cyfrowej aplikacji mobilnej jest możliwa?

Odpowiedź na to pytanie brzmi „tak”. Istnieje taka możliwość. Każda aplikacja mobilna, niezależnie od swojego stopnia skomplikowania lub liczby funkcjonalności:

• zawsze korzysta z podstawowych elementów interaktywnych, takich jak: przyciski, pola formularzy i łącza,
• może zawierać kluczowe elementy strukturalne, takie jak nagłówki czy wspomniane wcześniej przyciski,
• posiada szatę graficzną w postaci elementów nietekstowych przenoszących znaczenie oraz tekstów, która podlega ocenie pod względem kontrastu.

W związku z tym prawidłowym podejściem jest skupienie się na sprawdzeniu tych kluczowych elementów. Jeśli te elementy będą zawierać błędy, to korzystanie z aplikacji może być niemożliwe lub przynajmniej znacznie utrudnione. Koncentrując się zatem na najważniejszych aspektach dostępności, można przeprowadzić szybszą ocenę, która pozwoli wykryć ewentualne problemy i skupić się na ich rozwiązaniu. Jednak warto pamiętać, że dla gruntownej oceny poziomu dostępności aplikacji w celu kompleksowej naprawy błędów pełen audyt nadal jest zalecany. Pozwoli on bowiem uniknąć powielania innych uchybień, które wcześniej nie zostały wykryte.

Niniejszy raport ma na celu jedynie przedstawienie ogólnego poziomu dostępności cyfrowej oraz najpoważniejszych i najczęściej powtarzających się błędów. Naszym założeniem nie jest przebudowa badanych narzędzi cyfrowych. W związku z tym naszą analizę postanowiliśmy oprzeć na 11 podstawowych elementach:

1. etykiety przycisków,
2. etykiety pól formularzy,
3. nagłówki,
4. elementy strukturalne,
5. kontrast tekstu,
6. kontrast elementów nietekstowych,
7. orientacja,
8. zarządzanie accessibility fokusem,
9. tytuły,
10. zamiennik gestów,
11. grupowanie elementów.

Badanie podstawowych ścieżek funkcjonalnych w aplikacjach, takich jak zakup biletu czy produktu, zostało dodatkowo przeprowadzone przy wsparciu wymienionych konsultantów ze szczególnymi potrzebami:

• konsultantem niewidomym,
• konsultantem niedowidzącym,
• konsultantem głuchym,
• konsultantem seniorem,
• konsultantem ze średnim wykształceniem.

Opis kryteriów w analizie eksperckiej

Aplikacje zostały zbadane na dwóch najbardziej popularnych systemach operacyjnych: Android i iOS.

Każdy analizowany element mógł otrzymać punktację w przedziale od 0 do 2.  Maksymalna liczba punktów możliwa do zdobycia to 22.

Etykiety przycisków

• 0 całkowity brak lub rażące zaniedbanie
• 1 częściowy brak lub nieprawidłowe
• 2 poprawne

Etykiety tekstowe przycisków w postaci ikon / chevronu są niezbędne dla użytkowników, którzy korzystają z aplikacji czytających ekran lub z innych asystentów. Dzięki obecności etykiet tekstowych takie osoby mogą swobodnie korzystać z aplikacji. W niektórych przypadkach systemy operacyjne próbują odgadywać etykiety na podstawie ikon / szewronu, co może prowadzić do nieprawidłowych interpretacji. W sytuacjach gdy konieczne jest dodatkowe opisanie akcji, pomocne okazują się również podpowiedzi (hint). Jeśli przycisk posiada widoczną etykietę tekstową, istotne jest, aby treść odczytywana przez aplikacje czytające zaczynała się od lub była zgodna z widoczną treścią. To pozwala na aktywowanie takiego przycisku za pomocą poleceń głosowych. Etykiety tekstowe powinny być krótkie, zwięzłe i precyzyjnie opisywać funkcje przycisku.

Etykiety pól formularzy

• 0 całkowity brak lub rażące zaniedbanie
• 1 częściowy brak lub nieprawidłowe
• 2 poprawne

Formularze umieszczane w aplikacjach umożliwiają przesłanie danych koniecznych do zakończenia procesów wymagających podania danych, np. zalogowania się do aplikacji lub wprowadzenia danych wysyłki produktu. Brak etykiet powiązanych z polami spowoduje niemożliwość ich poprawnego wypełnienia przez osoby korzystające z aplikacji czytających, a nieprawidłowe treści spowodują wprowadzenie niepoprawnych danych. Ważnym staje się również fakt posiadania powiązanych etykiet po uzupełnieniu pola formularza wartością, tak by aplikacje czytające odczytywały zarówno wartość wprowadzoną w pole, jak i jego etykietę.

Nagłówki

• 0 całkowity brak
• 1 częściowy brak lub nieprawidłowe zagnieżdżenie (WebView)
• 2 poprawne

Nagłówki stanowią istotny element interfejsu użytkownika w aplikacjach mobilnych, a ich właściwe wykorzystanie jest szczególnie istotne dla użytkowników korzystających z aplikacji czytających. Dzięki nagłówkom użytkownicy mogą łatwiej nawigować po aplikacji, za pomocą odpowiednich gestów, co umożliwia szybkie odnajdywanie poszczególnych sekcji widoków. Nagłówki powinny zawierać krótkie, zwięzłe i opisowe treści, które przekazują istotne informacje o zawartości danej strony. Powinny być łatwe do zrozumienia i odzwierciedlać treści znajdujące się pod danym nagłówkiem.

Elementy strukturalne

• 0 całkowity brak lub rażące zaniedbanie
• 1 częściowy brak lub nieprawidłowe
• 2 poprawne

Każdy element umieszczony na widoku aplikacji mobilnej powinien posiadać odpowiednią rolę anonsowaną przez aplikacje czytające, np. rolę obrazka, przycisku, łącza itp. Pozwala to na przekazanie użytkownikowi informacji o jego roli, a jednocześnie na odnajdowanie takich elementów za pomocą odpowiednich gestów. Elementy strukturalne powinny mieć poprawne role, np. aktywna ikona nie powinna mieć jedynie roli obrazka, lecz przede wszystkim rolę przycisku.

Każdy element umieszczony na widoku aplikacji mobilnej powinien być odpowiednio oznaczony tak, aby aplikacje czytające mogły prawidłowo anonsować o jego roli, np. jako roli obrazka, przycisku, łącza itp. To umożliwia użytkownikowi nie tylko łatwe identyfikowanie roli elementu ale również sprawne ich odnajdywanie za pomocą odpowiednich gestów. Należy pamiętać o przypisaniu elementom strukturalnym właściwych ról. Przykładowo oznaczenie aktywnej ikony jedynie rolą „obrazka” byłoby błędem.  Aktywna ikona powinna przede wszystkim mieć rolę „przycisku”.

Kontrast tekstu

• 0 bardzo dużo niekontrastowych treści
• 1 częściowy brak
• 2 poprawny

Kontrast tekstu w aplikacjach mobilnych ma duże znaczenie dla czytelności i dostępności interfejsu użytkownika. Odpowiedni kontrast umożliwia wszystkim użytkownikom łatwe odczytywanie etykiet elementów nawigacyjnych oraz pozostałych tekstów pojawiających się w aplikacjach. Dla prawidłowego kontrastu przy zwykłym tekście współczynnik kontrastu powinien wynosić co najmniej 4,5:1. Zachowanie odpowiedniego kontrastu tekstu ma również istotny wpływ na odbiór treści w różnych warunkach oświetleniowych, w jakich korzystamy z urządzenia.

Kontrast elementów nietekstowych

• 0 bardzo dużo niekontrastowych elementów nietekstowych
• 1 częściowy brak
• 2 poprawny

Kontrast elementów nietekstowych przenoszących znaczenie  jest istotne dla czytelności i dostępności interfejsu użytkownika. Wśród takich elementów można wyróżnić przyciski w postaci ikon, obramowania pól formularzy oraz same ikony, które  samodzielnie przenoszą informację. Odpowiedni kontrast tego typu  elementów pozwala użytkownikom na szybkie ich odnajdowanie i identyfikowanie.  Współczynnik kontrastu, który określa prawidłową wartość kontrastu, powinien wynosić co najmniej 3,0:1.

Zachowanie odpowiedniego kontrastu elementów nietekstowych ma również istotny wpływ na czytelność treści w różnych warunkach oświetleniowych, w jakich korzystamy z urządzenia.

Orientacja

• 0 brak
• 1 jest, ale występują błędy
• 2 poprawna

Orientacja urządzenia odnosi się do sposobu, w jaki użytkownik korzysta z urządzenia mobilnego: pionowo (tryb portretowy – portrait) lub poziomo (tryb krajobrazowy – landscape). Każda aplikacja powinna zapewniać poprawne wyświetlanie treści w obu trybach orientacji. To jest szczególnie istotne dla użytkowników, którzy mają możliwość użycia aplikacji tylko w jednej orientacji, na przykład z powodu przytwierdzenia urządzenia do uchwytu w określonym położeniu (np. na wózek czy rower). Niektóre funkcjonalności lub gesty wykonywane w aplikacji mogą być bardziej naturalne lub wygodne przy określonej orientacji urządzenia. Na przykład korzystanie z klawiatury ekranowej jest bardziej komfortowe w trybie portretowym, a oglądanie materiałów multimedialnych – w trybie krajobrazowym.

Aplikacje powinny być tak skonfigurowane, by po zmianie orientacji urządzenia automatycznie i dynamicznie dostosować układ treści do ekranu.

Zarządzanie accessibility fokusem

• 0 rażące błędy
• 1 zdarzają się błędy
• 2 poprawne

Accessibility fokus jest to aktywny sposób wskazania użytkownikowi, który element interfejsu jest obecnie wyróżniony lub gotowy do interakcji. Fokus wskazuje, na którym elemencie w danym momencie powinna zostać skupiona uwaga użytkownika. Skupianie uwagi jest szczególnie istotne dla użytkowników korzystających z aplikacji czytających. Nieprawidłowe przenoszenie fokusu, na przykład podczas przechodzenia między widokami, lub niesekwencyjna, nieprawidłowa kolejność odnajdywania tekstów lub elementów interaktywnych w obrębie jednego widoku prowadzą do błędów w zrozumieniu treści i funkcji aplikacji. Dla osób słabowidzących, z problemami poznawczymi czy słabą koncentracją uwagi fokus powinien być widoczny na ekranie w sposób bardzo wyraźny, dlatego należy stosować wyróżnienie, takie jak: zaznaczenie ramką, kolorem, podkreśleniem lub inwersją kolorów.

Tytuły widoków

• 0 brak
• 1 częściowy brak
• 2 poprawne

Tytuły widoków to treści przetwarzane przez aplikację czytającą jako pierwsze po ich otwarciu. Brak anonsowania tytułów widoków lub ich niepoprawna treść niewątpliwie wprowadzają w błąd. W takich sytuacjach użytkownicy korzystający z czytnika ekranu nie będą mogli się zorientować, czy pożądany widok został poprawnie wyświetlony w aplikacji.

Zamiennik gestów

• 0 bardzo dużo elementów
• 1 są elementy bez zamienników
• 2 poprawne

Dodanie zamienników do gestów przesuwania po ścieżce pozwala na dostęp do wszystkich przesuwanych kontenerów za pomocą gestów jednopunktowych niewykorzystujących gestów przesuwania po ścieżce. Jest to alternatywny sposób nawigacji oraz interakcji dla użytkowników, którzy mają trudności z wykonywaniem gestów po ścieżce, na przykład z powodu fizycznych ograniczeń lub innych niepełnosprawności związanych z motoryką dłoni. Przykładowo brak stronicowania slajdów przesuwanych w poziomie utrudnia takim użytkownikom dostęp do wszystkich treści.  

Grupowanie elementów

• 0 dużo rozgrupowanych treści
• 1 zdarzają się
• 2 poprawne

Poprawne grupowanie kontenerów z treściami umożliwia osobom korzystającym z aplikacji czytających łatwy i szybki dostęp do poszukiwanych informacji bez konieczności wielokrotnego przeszukiwania treści, takich jak przyciski prowadzące do tych samych zasobów.

Jednocześnie istotne jest unikanie grupowania elementów tekstów w pojedyncze elementy odnajdywane przez aplikacje czytające. Niestety to się często zdarza w przypadku, gdy aplikacje są tworzone przy użyciu gotowych frameworków.