Dostępność cyfrowa. 10 najczęstszych błędów i jak sobie z nimi poradzić?

Wiele projektantów i projektantek interesuje się dostępnością oraz chce rozwijać w tę stronę swój UXowy i UIowy warsztat. Jednak nie tylko te osoby powinny zgłębiać ten temat – programiści, testerzy, managerowie również powinni wiedzieć, jak budować dostępny produkt cyfrowy. Jak najlepiej się tego nauczyć? Obserwując błędy innych! 

Radami dotyczącymi dostępności podzielił się Wojtek Kutyła, konsultant pracujący w przestrzeni dostępności cyfrowej od wielu lat. 

Przerost formy nad treścią

Budujemy strony i aplikacje, które są piękne, mają fantastyczne animacje, nowoczesne formularze, ale zapominamy przy tym o kodzie, który ma zbudować ten produkt. 

Osoby tworzące cyfrowy design muszą myśleć też o tym, aby strona była dobrze zoptymalizowana – dużo skomplikowanych funkcji obciąża ładowanie strony i zwiększa powstawanie błędów. 

Ładna aplikacja cieszy oko, ale może okazać się trudna w obsłudze, a dla osób z niepełnosprawnością - kompletnie niefunkcjonalna.

Co z tym zrobić?

1. Uwzględniaj dostępność w projektowaniu od samego początku – już na etapie planowania i prototypowania oraz tworzenia architektury informacji.
2. Upewnij się, że rozwiązanie jest dostępne i użyteczne, zanim je "wzbogacisz" o interakcje oparte na JavaScript.
3. Używaj schematów i modeli mentalnych, które są już znane użytkownikom – nie zawsze dobrym pomysłem jest wymyślanie koła na nowo.
4. Jak najwcześniej badaj dostępność i testuj ją manualnie, aby upewnić się, że wszystko działa.
5. Ostrożnie podchodź do nowinek technicznych i zatrzymaj się, zanim się na nie rzucisz.

Brak poprawnej struktury kodu

Łatwo jest stworzyć piękną stronę, jednak o wiele trudniej jest zrobić dostępną i semantycznie poprawną witrynę. Dlatego warto zacząć od samego początku, czyli przyjrzeć się, jak wygląda struktura HTML. Czy używamy kod HTML semantycznie i zgodnie ze specyfikacją? Czy korzystamy z samych „divów”, bo tak jest szybciej i prościej? 

Jako osoba, która zajmuje się projektowaniem – nie musisz mieć dużej wiedzy o programowaniu, ale ktoś kto zajmuje się dostępnością powinien znać dobrze HTML i CSS oraz podstawy JavaScriptu.

Częste pytanie to “Czy nie lepiej będzie, jak pominę kodowanie i skorzystam z narzędzi low-code lub no-code?” Te narzędzia  są teraz popularne i dużo osób chętnie z ich korzysta. Uważaj na nie, bo mogą stać się źródłem ogromnych problemów – można za ich pomocą łatwo i szybko stworzyć produkt cyfrowy, który będzie kompletnie niedostępny.

Co z tym zrobić?

1. Poznaj dobrze standardy HTML, CSS i JavaScript i nie daj się zwieść prostocie frameworków.
2. Najpierw pisz czysty i dobrze zorganizowany HTML, a potem zajmij się jego prezentacją.
3. Pracując z narzędziami do prototypowania zastanawiaj się nad metodami implementacji swoich pomysłów.
4. Narzędzia no-code używaj rozważnie.

Niewłaściwa hierarchia treści

Przed stworzeniem prototypu, a jeszcze bardziej przed rozpoczęciem kodowania, trzeba pomyśleć o architekturze informacji. Nie można zapomnieć o strukturze i hierarchii nagłówków (h1, h2, h3), a jednocześnie nie wybierać drogi na skróty – stosować paragrafy i inne struktury tam, gdzie to potrzebne. .

Jeden z powodów niewłaściwej hierarchii treści na stronach www, to traktowanie witryny, jak książki – tworzenia długich i zawiłych tekstów. Tymczasem produkt cyfrowy musi być zwarty, konkretny i przemyślany. Dotyczy to także warstwy treści.

Co z tym zrobić?

1. Zastanów się nad architekturą informacji, zanim przystąpisz do prototypowania/kodowania.
2. Upewnij się, że treść ułożona jest w logiczną strukturę. Sprawdź kolejność nagłówków.
3. Pomyśl nad tym, jak będzie działać treść odczytywana częściowo – nie zakładaj, że każdy przeczyta cały content.
4. Naucz się obsługi czytników ekranowych i sprawdzaj, jak przegryzają się przez treść.
5. Przyglądaj się książkom, magazynom i instrukcjom obsługi odkurzaczy. Szukaj inspiracji w Internecie – często strony rządowe robią to dobrze, mistrzem jest gov.uk.

Utrudniona nawigacja z klawiatury

Podczas korzystania z laptopa lub komputera większość osób korzysta z klawiatury. Dla wielu osób klawiatura to jedyna technologia wsparcia dostępności, która umożliwia im korzystanie z Internetu. Takim osobom pracę utrudniają elementy HTML używane niezgodnie z ich przeznaczeniem oraz interakcje wykonane za pomocą JavaScriptu, które nie są odpowiednio wzbogacone o informacje wspomagające technologie asystujące.

Aby zaprojektować stronę, z której będzie się dało korzystać za pomocą samej klawiatury, trzeba samemu znać skróty klawiszowe i z nich korzystać - jak inaczej przetestować dostępność? Przyda się również znajomość standardu ARIA (Accessible Rich Internet Applications), który wspomaga tworzenie dostępnych rozwiązań opartych na dynamicznych interakcjach, choćby tych tworzonych z pomocą JavaScript. 

Co z tym zrobić?

1. Upewnij się, że wszystkie elementy interaktywne są obecne w kolejce nawigacji z klawiatury (klawisz TAB!). 
2. Używaj elementów interaktywnych zgodnie ze specyfikacją HTML.
3. Minimalizuj użycie JavaScriptu i jego niepoprawne wykorzystanie do opisywania interakcji elementów, które nie powinny być interaktywne.
4. Pamiętaj o ARIA i stosują ją, ale tylko wtedy, kiedy nie możesz znaleźć odpowiednika HTML. 
5. Zawsze testuj nawigację z klawiatury - najwcześniej jak zdołasz, ale także po zaimplementowaniu dodatków JavaScript.

Brak alt

Alternatywna treść dla elementów nietekstowych w HTML odnosi się w przypadku obrazów (<img>) do atrybutu alt,.
Alt jest niezbędny dla dostępności stron, ponieważ osoby korzystające z czytników ekranu polegają na tym atrybucie, by zrozumieć to, co jest w danym miejscu. Ponadto, jeśli element nietekstowy nie zostanie załadowany, to treść z atrybutu alt zostanie wyświetlona w jego miejscu – to się przyda, kiedy ktoś ma wolny Internet. Dodatkowo, wyszukiwarki internetowe używają tego atrybutu do lepszego rozumienia zawartości, co może wpłynąć na optymalizację pod kątem SEO. 

Pamiętaj o tym, że alt to jedna z technik zapewniania alternatyw dla treści nietekstowych. Inne elementy, takie jak materiały video czy nagrania audio także powinny zostać w nią wyposażone. Rzuć okiem na WCAG (Web Content Accessibility Guidelines), w którym znajdziesz wskazówki na ten temat.

Opisujesz każdy element nietekstowy? Super! Upewnij się, że robisz to dobrze:

1. Sprawdź, czy każdy element nietekstowy ma właściwą alternatywę tekstową albo jest prawidłowo pomijany w drzewie dostępności, jeśli nie ma żadnego znaczenia.
2. Zrozum, jak działa atrybut alt obrazów i naucz się stosować puste atrybuty oraz definiować obrazy jako tła CSS.
3. Pamiętaj, że "elementy nietekstowe" to nie tylko zdjęcia, ale i wykresy, media strumieniowe, animacje i inne cuda.
4. Używaj czytnika ekranowego do przetestowania opisów.

Niedostępne formularze

Internet jest zbudowany z formularzy; są one wszędzie. Niestety, ale to właśnie formularze są najgorzej projektowanym elementem, mimo tego, że występują na prawie każdej stronie lub aplikacji.

Często staramy się zrobić coś innego, nowego, a kończy się to tak, że w formularzu nawigacja przy pomocy klawiatury jest niemożliwa. Co jest największą bolączką? Niedziałające drop-downy, niezrozumiałe ikony, kalendarze, animacje.

Co z tym zrobić?

1. Weź pod uwagę dostępność już we wstępnej fazie projektowania formularzy.
2. Upewnij się, że każde pole tekstowe ma skojarzoną z nim etykietę label.
3. Uważaj na niestandardowe metody pobierania danych i nalegaj na zwykłe, proste formularze.
4. Do zbierania danych używaj odpowiedniego rodzaju pól tekstowych.
5. Dziel formularze na grupy opisane za pomocą semantycznego HTML.
6. Pozwalaj edytować formularze po ich wysłaniu.
7. Upewnij się, że etykiety tekstowe mają sens.
8. Nie używaj nigdy etykiety "submit" dla przycisku wysyłającego formularz.

Niewłaściwa obsługa błędów

Wypełniasz długi formularz, klikasz „Wyślij”, ale nic się nie dzieje. Scrollujesz do góry i widzisz komunikat „Niepoprawna wartość”. Czy wiesz, co zrobić z tym dalej? Co trzeba poprawić? 

Użytkownik nie czyta w myślach, nie wie, co chcemy od niego dostać, aby przepuścić go dalej – trzeba to dokładnie opisać. Pamiętajmy, że po błędnym wypełnieniu narasta stres, przez co osoba może jeszcze bardziej nie wiedzieć, co ma zrobić dalej, a niezrozumiały komunikat błędu będzie tylko to pogarszał.

Pozwól każdemu na dotarcie do obsługi klienta, która pomoże, kiedy użytkownik nie jest w stanie ukończyć danej czynności – alternatywne metody kontaktu są bardzo ważne!

Co z tym zrobić?

1. Pamiętaj, że czytniki ekranowe odczytują tylko to, co widzą, a więc wyświetlaj błędy informując również technologie wsparcia dostępności.
2. Upewnij się, że błędy są zrozumiałe i mówią o tym, jakich danych brakuje.
3. Jeśli to możliwe, wyświetl numerowaną listę błędów nad formularzem.
4. Zauważ, że nie każdy widzi kolor w ten sam sposób. Komunikaty o błędach muszą mieć sens i nie polegać jedynie na kolorze jako źródle przekazywania informacji
5. Jeśli chcesz stosować błędy dynamiczne (automatycznie wyskakujące, dotyczące tylko danego pola), upewnij się, że:

1. użytkownik skończył pisać, zanim wyświetlisz komunikat,
2. błędy odczytywane są przez czytniki ekranowe z wykorzystaniem poprawnie użytej technologii ARIA.

Brak linku „przejdź do treści”

Bardzo mało stron ma zaimplementowaną tę funkcję. Skip to main content polega na tym, że użytkownicy korzystający tylko z klawiatury, używają klawisza TAB, aby przeskakiwać od linku do linku. Jeśli na stronie jest dużo linków, to muszą je przeglądać za każdym razem od nowa. Funkcja skip to main content pozwala im łatwo i szybko to ominąć.

Rekomendacja to zainstalowanie linku „przejdź do treści” na początku drzewa HTML – on może być schowany, nie musi być widoczny dla osób, które nie klikną klawisza tab. Ponadto trzeba regularnie sprawdzać, czy link jest ciągle dostępny dla nawigacji z pomocą klawiatury i czytników ekranowych.

Niezrozumiała treść

W produktach cyfrowych często można spotkać zawiłą i wręcz niestrawną treść. Używamy trudnych określeń prawnych i branżowych. Lubimy stosować stwierdzenia, które nic nie znaczą, ale ładnie wyglądają. Tworzeniem dostępnej treści zajmuje się dziedzina UX Writingu, możesz więcej przeczytać o tym temacie tutaj: Więcej niż słowa. Czyli o roli UX writingu w organizacji.

Co z tym zrobić?

1. Zorganizuj w pracy szkolenie dla copywriterów i osób z działu prawnego na temat pisania dostępnej i nie wykluczającej treści.
2. Nie używaj żargonu, a jeśli musisz, wyjaśniaj akronimy i trudne słowa.
3. Pamiętaj, że sieć to nie książka ani magazyn – w online przetwarzamy informacje inaczej. 
4. Testuj czytelność tekstów.
5. Nie twórz długich łańcuchów tekstu, które trzeba przewijać poziomo po powiększeniu rozmiaru czcionki.
6. Upewnij się, że każda etykieta interaktywnego elementu informuje użytkownika o tym, co zmieni się, kiedy podejmie akcję.

Pułapka fokusu klawiaturowego

Kiedy wyświetla się popup reklamowy lub z ciasteczkami, to aby przykuć do niego uwagę, reszta strony często “przygasa”. . 

Często zdarza się, że taki popup jest niedostępny dla nawigacji klawiaturą, , chociaż w tym samym czasie ten dostęp istnieje dla całej treści pod popupem. Nazywamy to pułapką fokusu. ,. Użytkownik nie przejdzie dalej, nawet może nie wiedzieć, co nie działa. W takiej sytuacji korzystanie ze strony lub aplikacji jest niemożliwe.

Co z tym zrobić?

1. Staraj się nie wyświetlać popupów i zmieniać drzewa DOM dynamicznie. Jeśli musisz, rób to mądrze — upewnij się, że do wszystkiego można dostać się z klawiatury!
2. Upewnij się, że nowe elementy pojawiające się na ekranie przechwytują fokus i komunikują swoje nadejście.
3. Pamiętaj o rozwiązaniach modalnych i stosuj je, jeśli możesz.
4. Upewnij się, że użytkownik może zamknąć wyskakujące okna/popupy w intuicyjny i typowy sposób.

Podsumowanie – jak zadbać o dostępność i inkluzywność?

Wejdź w buty innej osoby

Sprawdź, jak wygląda korzystanie z Internetu przy użyciu czytników ekranu oraz klawiatury i skrótów klawiszowych. To doświadczenie zmieni sposób, w jaki postrzegasz produkty cyfrowe. 

Zawsze testuj strony i aplikacje używając technologii wsparcia dostępności – rób to regularnie i nie czekaj na koniec prac projektowych. Testuj po kawałku! 

Korzystaj z narzędzi automatycznej walidacji, ale niech to będzie tylko początek pracy. Nie opieraj się w 100% tylko na wnioskach z tych programów – najważniejsze są testy wykonywane przez osoby z niepełnosprawnością.

Poszerzaj swoją wiedzę

Na temat dostępności cyfrowej powstało wiele książek, kursów, ale też dokumentacji i specyfikacji. Wykorzystuj tę wiedzę przy projektowaniu i kodowaniu – przyda Ci się wspomniany wcześniej WCAG i specyfikacja języka HTML. 

Dostępność jest ważna od samego początku

Nie traktuj inkluzywności i dostępności, jak modnych słów, które warto dodać do swojego portfolio. Trzeba o tym myśleć od samego początku i z tą myślą budować produkt. Dostępność nie może być „wisienką na torcie”, którą zajmiesz się na samym końcu – wtedy będzie to droższe i zajmie więcej czasu.

Rozmawiaj o dostępności

Rozsiewaj w zespole temat dostępności – pokaż na czym to polega, po co się to robi i czy jest to trudne. Podziel się z developerami treściami związanymi z włączającym projektowaniem  i spróbuj ich nimi zainteresować.

‍