Dostępność zaczyna się od samodzielnego korzystania
Strona internetowa jest dostępna, gdy ludzie mogą z niej niezawodnie korzystać niezależnie od swoich możliwości i sytuacji. Dotyczy to osób niewidomych i słabowidzących, osób niesłyszących, osób z ograniczeniami ruchowymi lub poznawczymi oraz wielu starszych użytkowników. Korzystanie ze strony może też czasowo utrudniać złamana ręka, hałaśliwe otoczenie lub wolne połączenie internetowe. Dostępność nie jest więc przeznaczona dla małej, szczególnej grupy, lecz poprawia dostęp dla bardzo różnych osób.
To, czy oferta jest naprawdę dostępna, widać podczas wykonywania konkretnych zadań. Czy można znaleźć termin wizyty, wysłać formularz lub skopiować numer telefonu bez utknięcia w nawigacji? Czy wiadomo, jakie dane są wymagane i co stanie się po wysłaniu formularza? Sama deklaracja dostępności niewiele pomaga, jeśli ważne informacje znajdują się wyłącznie na grafice albo okna dialogowego nie da się zamknąć bez myszy.
Operatorom stron pomaga prosta zmiana perspektywy: w centrum uwagi powinna znaleźć się nie pojedyncza funkcja, lecz cała droga prowadząca do celu. Czytelna strona główna nie wystarczy, jeśli proces zamawiania pozostaje niezrozumiały. Dlatego najpierw przyjrzyj się najczęstszym i najważniejszym ścieżkom użytkowników. To właśnie tam bariery stają się szczególnie widoczne, a poprawki bezpośrednio zwiększają samodzielność, bezpieczeństwo i zaufanie.
Przejrzysta struktura strony zapewnia niezawodną orientację
Ludzie zapoznają się ze stronami internetowymi na różne sposoby. Niektórzy przeglądają nagłówki, inni mocno powiększają treść, a osoby niewidome korzystają z czytnika ekranu, który odczytuje elementy strony. Przejrzysta struktura pomaga w każdej z tych sytuacji. Każda strona powinna mieć wyraźnie rozpoznawalny główny temat, a nagłówki powinny logicznie dzielić treść. Osoba czytająca tylko nagłówki powinna już rozumieć, czego dotyczy strona i gdzie znaleźć poszukiwaną informację.
Powtarzające się obszary również potrzebują stałego miejsca. Logo, główna nawigacja, wyszukiwarka i dane kontaktowe nie powinny zmieniać położenia ani nazwy na kolejnych stronach. Stały układ odciąża osoby, którym orientacja sprawia trudność lub które zapamiętują sekwencje działań. Szczególnie pomocne są opisowe tytuły stron i widoczne oznaczenie bieżącej sekcji. Dzięki temu zawsze wiadomo, gdzie się znajdujemy i jak wrócić do nadrzędnego tematu.
Unikaj stron, na których wiele równie wyrazistych obszarów konkuruje o uwagę. Jeśli na początku jednocześnie pojawiają się trzy banery, kilka kafelków i automatycznie zmieniający się obraz, nie wiadomo, co jest najważniejsze. Uporządkuj treści według znaczenia i zapewnij najważniejszej czynności wyraźne miejsce. Spokojna hierarchia nie tylko ułatwia orientację, lecz także przyspiesza podejmowanie decyzji i ogranicza przypadkowe kliknięcia.
Czytelny projekt nie zmusza do zgadywania
Dobrą czytelność zapewniają odpowiednio duża czcionka, wyraźne kształty znaków oraz wystarczające odstępy między wierszami i akapitami. Bardzo cienki krój pisma lub ciasno złożony tekst może męczyć nawet osoby o dobrym wzroku. Na małych ekranach problem staje się jeszcze poważniejszy. Użytkownicy powinni móc powiększyć tekst bez obcinania treści i konieczności przewijania w poziomie. Dlatego sprawdzaj nie tylko widok standardowy, ale także znacznie powiększone wersje strony.
Kolor może wspierać przekazywanie informacji, ale nie może być ich jedynym nośnikiem. Czerwona ramka wokół błędnie wypełnionego pola formularza może być niewidoczna dla osób z zaburzeniami widzenia barw. Dodaj zrozumiały komunikat i jednoznacznie oznacz pole, którego dotyczy. Ta sama zasada obowiązuje w przypadku wykresów, wskaźników stanu i wybranych pozycji menu. Wzory, symbole lub tekst pozwalają zachować znaczenie także bez dokładnego rozpoznawania kolorów.
Odpowiedni kontrast sprawia, że tekst, przyciski i pola formularzy są widoczne w różnych warunkach oświetleniowych. Jasnoszary tekst na białym tle często wygląda elegancko, ale szybko staje się nieczytelny. Szczególnie problematyczne są drobne wskazówki, teksty zastępcze i napisy umieszczone na obrazach. Sprawdzaj kontrast już na etapie projektowania, a nie dopiero tuż przed publikacją. Dzięki temu kolory można jeszcze zmienić bez żmudnego naprawiania gotowego wyglądu.
Wszystkie ważne funkcje muszą być dostępne z klawiatury
Nie każdy może sprawnie posługiwać się myszą lub ekranem dotykowym. Niektóre osoby korzystają wyłącznie z klawiatury, sterowania głosem albo innego urządzenia wejściowego. Dlatego linki, przyciski, menu i pola formularzy muszą być dostępne w logicznej kolejności. Po naciśnięciu klawisza Tab zaznaczenie aktywnego elementu powinno podążać za widocznym układem strony. Przeskoki do ukrytych obszarów lub krążenie wewnątrz jednego komponentu niepotrzebnie utrudniają nawet proste zadania.
Aktualnie aktywny element musi pozostawać wyraźnie widoczny. Delikatny cień, który niemal zlewa się z tłem, nie wystarczy. Osoba poruszająca się po stronie klawiaturą musi zawsze wiedzieć, który element zostanie uruchomiony po kolejnym naciśnięciu klawisza. Usuwaj domyślne oznaczenie aktywnego elementu tylko wtedy, gdy zastąpisz je co najmniej równie wyraźnym rozwiązaniem. Dotyczy to także menu, okien dotyczących plików cookie, podpowiedzi wyszukiwania i wyskakujących okien.
Przetestuj najważniejsze ścieżki w całości bez używania myszy. Otwórz nawigację, wybierz ofertę, wypełnij formularz i zamknij wszystkie okna dialogowe. Zwróć uwagę na miejsca, w których znika zaznaczenie aktywnego elementu albo czynność wymaga przeciągnięcia, przesunięcia palcem lub wskazania kursorem. Ten prosty test ujawnia wiele przeszkód, które pozostają niezauważone podczas zwykłej obsługi myszą.
Zrozumiałe treści szybciej prowadzą do właściwego działania
Dostępne treści od początku informują odbiorców, co powinni wiedzieć lub zrobić. Zacznij od najważniejszego komunikatu, a następnie wyjaśnij niezbędne szczegóły. Długie wstępy, wewnętrzne terminy branżowe i niejasne odwołania utrudniają orientację. Zamiast linku "Więcej informacji znajdziesz tutaj" wskaż jego cel, na przykład "Dokumenty potrzebne do wniosku o dodatek mieszkaniowy". Dzięki temu znaczenie linku pozostanie zrozumiałe również wtedy, gdy czytnik ekranu odczyta go poza kontekstem akapitu.
Krótkie zdania są pomocne, lecz zrozumiałość nie oznacza nadmiernego upraszczania każdej treści. Wyjaśniaj nieznane pojęcia tam, gdzie się pojawiają, i konsekwentnie używaj tych samych określeń. Jeśli strona na przemian mówi o koncie klienta, profilu i obszarze użytkownika, powstaje niepotrzebna niepewność. Konkretne przykłady pomagają zwłaszcza przy terminach, warunkach lub niejednoznacznych decyzjach, o ile nie zastępują właściwej treści.
Nagłówki, etykiety i przyciski powinny niezawodnie spełniać oczekiwania. Przycisk z napisem "Dalej" mówi niewiele, natomiast "Sprawdź dane" wyjaśnia kolejny krok. Ostrzeżenia powinny wskazywać problem i możliwe rozwiązanie. Przyjazne, bezpośrednie sformułowania wspierają zarówno osoby z niewielką wprawą w czytaniu, jak i tych, którzy działają pod presją czasu. Przejrzysty tekst jest zatem istotną częścią obsługi, a nie późniejszą ozdobą językową.
Formularze wymagają jednoznacznych pytań i pomocnych komunikatów
Formularze należą do miejsc, w których użytkownicy najczęściej opuszczają stronę internetową. Każde pole potrzebuje stale widocznej etykiety wyjaśniającej jego przeznaczenie. Przykład umieszczony w polu może dodatkowo pomóc, ale nie powinien zastępować etykiety, ponieważ znika podczas wpisywania. Pytaj tylko o dane rzeczywiście potrzebne do realizacji danego procesu. Krótsze formularze są łatwiejsze do zrozumienia, szybsze do wypełnienia i powodują mniej błędów.
Pola obowiązkowe i oczekiwane formaty muszą być widoczne przed rozpoczęciem wpisywania. Jeśli data musi mieć określony zapis, pokaż zrozumiały przykład. W miarę możliwości akceptuj popularne warianty, zamiast odrzucać dane z powodu spacji lub łączników. Przy dłuższych procesach pomaga czytelny wskaźnik postępu, o ile informuje, która część jest właśnie wypełniana i ile kroków jeszcze pozostało.
Jeśli wystąpi błąd, komunikat musi znajdować się w pobliżu danego pola i konkretnie wyjaśniać, co należy zmienić. "Nieprawidłowe dane" pozostawiają użytkownika bez pomocy, natomiast "Wpisz pięciocyfrowy kod pocztowy" podpowiada rozwiązanie. Po wysłaniu formularza potrzebne jest także jednoznaczne potwierdzenie. Powinno ono informować, czy dane zostały przesłane pomyślnie i kiedy można oczekiwać odpowiedzi.
Obrazy, dźwięk i wideo potrzebują równoważnych form dostępu
Obrazy często przekazują informacje, których brakuje w otaczającym je tekście. Tekst alternatywny powinien wtedy krótko opisywać to, co jest istotne z punktu widzenia celu strony. W przypadku zdjęcia w profilu członka zespołu mogą wystarczyć imię, nazwisko i funkcja. W przypadku wykresu jego wniosek i ważne wartości muszą być natomiast dostępne także bez obrazu. Technologie wspomagające powinny pomijać obrazy czysto dekoracyjne, aby nie wydłużały treści o nic nieznaczące nazwy plików lub powtórzenia.
Materiały wideo potrzebują napisów obejmujących wypowiedzi i ważne dźwięki. Jeśli widocznych działań nie można wywnioskować ze ścieżki dźwiękowej, może być również potrzebna audiodeskrypcja. Transkrypcja zapewnia kolejny sposób dostępu oraz ułatwia ponowne czytanie i wyszukiwanie poszczególnych wypowiedzi. Napisy należy starannie sprawdzać, ponieważ automatycznie wygenerowane wersje często mylą nazwiska, terminy branżowe lub liczby, co może zmienić znaczenie.
Multimedia nie mogą nieoczekiwanie uruchamiać się z dźwiękiem. Ruchome treści powinno dać się zatrzymać, jeśli przez dłuższy czas rozpraszają lub utrudniają czytanie. Zwróć też uwagę na szybko migające efekty i gwałtowne przejścia. Elementy sterujące pomagają tylko wtedy, gdy ich przyciski są zrozumiale opisane i dostępne z klawiatury. Dzięki temu treść pozostaje użyteczna dla osób z ograniczeniami słuchu, wzroku lub koncentracji, nie przeszkadzając przy tym innym użytkownikom.
Na małych ekranach jakość jest szczególnie widoczna
Wiele osób odwiedza strony internetowe głównie za pomocą smartfona. Mała przestrzeń, zmienne warunki oświetleniowe i obsługa palcem występują tam jednocześnie. Obszary dotykowe powinny więc być wystarczająco duże i odpowiednio od siebie oddalone. Mały przycisk zamykania przy krawędzi okna dialogowego może być niemal nieosiągalny dla osoby z ograniczoną sprawnością ruchową. Dobrze rozmieszczone i jasno opisane elementy sterujące zapobiegają przypadkowym działaniom.
Treści powinny dostosowywać się do wąskiego widoku bez znikania ważnych funkcji. Szczególnie dokładnie sprawdź tabele, mapy, ustawienia plików cookie i wielopoziomową nawigację. Jeśli informacja pojawia się tylko po najechaniu na element kursorem myszy, na urządzeniach dotykowych jest całkowicie niedostępna. Udostępnij tę samą funkcję po dotknięciu lub za pośrednictwem widocznego linku i zadbaj o to, aby wyświetlone treści można było łatwo zamknąć.
Nie należy też bez ważnego powodu narzucać orientacji urządzenia. Niektóre osoby mocują tablet lub smartfon w stałym uchwycie i nie mogą go obrócić. Strona działająca wyłącznie w orientacji pionowej może przez to stać się bezużyteczna. Elastyczny projekt uwzględnia takie sytuacje od początku i łączy użyteczność mobilną z dostępnością, zamiast traktować oba zagadnienia oddzielnie.
Testy z prawdziwymi użytkownikami znajdują więcej niż kontrole automatyczne
Automatyczne narzędzia kontrolne mogą szybko znaleźć brakujące etykiety, słaby kontrast i określone błędy w strukturze. Są dobrym punktem wyjścia, ale nie rozpoznają, czy nawigacja jest zrozumiała ani czy komunikat o błędzie rzeczywiście pomaga. Nawet technicznie obecny tekst alternatywny może być bezużyteczny. Wyniki takich narzędzi należy więc traktować jako wskazówki i poddawać ocenie osób, które potrafią uwzględnić kontekst całej strony.
Uzupełnij kontrolę techniczną prostymi testami ręcznymi. Powiększ stronę, obsłuż ją wyłącznie klawiaturą i odsłuchaj najważniejsze obszary za pomocą czytnika ekranu. Jeszcze więcej informacji dają testy z osobami, które na co dzień korzystają z różnych narzędzi wspomagających i strategii. Powierz im prawdziwe zadanie, takie jak znalezienie wydarzenia lub wysłanie zapytania, i obserwuj, gdzie pojawiają się trudności z orientacją lub wykonaniem czynności.
Informacje zwrotne należy oceniać według ich wpływu. Niedostępny proces rezerwacji lub brak informacji dotyczącej zdrowia są pilniejsze niż niewielki błąd odstępu. Zapisuj, jaki problem występuje na konkretnej stronie i których użytkowników dotyczy. Po wprowadzeniu poprawki tę samą ścieżkę trzeba przetestować ponownie. W ten sposób długa lista ogólnych uwag zmienia się w możliwą do prześledzenia poprawę rzeczywistego sposobu korzystania ze strony.
Dostępność staje się trwała, gdy odpowiedzialność jest jasno określona
Dostępna strona internetowa nie powstaje dzięki jednorazowej modernizacji. Nowe treści, funkcje i kampanie mogą w każdej chwili wprowadzić nowe przeszkody. Dlatego każda zaangażowana rola potrzebuje odpowiedniego zakresu odpowiedzialności. Zespoły redakcyjne dbają o zrozumiałe teksty i opisy obrazów, zespoły projektowe o kontrast i stany elementów, a zespoły programistyczne o obsługę i strukturę techniczną. Osoby zatwierdzające treści powinny wiedzieć, jakie podstawowe cechy trzeba sprawdzić przed publikacją.
Pomocne są dostępne szablony i komponenty wielokrotnego użytku. Jeśli formularze, okna dialogowe i elementy nawigacji zostały już prawidłowo zaprojektowane i sprawdzone, zespoły nie muszą rozwiązywać tych samych problemów od nowa na każdej stronie. Interfejsy redakcyjne powinny w zrozumiały sposób wymagać niezbędnych danych, takich jak teksty alternatywne. Jednocześnie trzeba pozostawić miejsce na wyjątki, ponieważ złożony wykres wymaga innego opisu niż zdjęcie dekoracyjne. Dobre podstawy ułatwiają prawidłowe wdrażanie dostępności w codziennej pracy.
Największa praktyczna korzyść pojawia się wtedy, gdy użytkownicy mogą wykonywać ważne zadania bez możliwych do uniknięcia przeszkód. Zacznij od najczęściej używanych ścieżek, usuń poważne bariery i sprawdź efekty z prawdziwymi użytkownikami. W ten sposób stopniowo poprawia się nie tylko dostępność poszczególnych stron, lecz także jakość całej oferty. Inkluzywna obecność online powstaje tam, gdzie zrozumiałość, projekt i technologia wspólnie służą samodzielnemu korzystaniu.