Klient może korzystać ze strony przez klawiaturę, czytnik ekranu lub z dużym powiększeniem. Może też czytać na telefonie w słabym świetle albo mieć trudność z przetworzeniem niejasnej instrukcji. Dostępność strony internetowej polega na projektowaniu treści i funkcji, z których da się skorzystać w różnych sytuacjach.
Na początek warto sprawdzić najważniejsze zadania: znalezienie oferty, przejście przez menu i wysłanie zapytania. Poniższy przegląd pomaga wykryć część barier, ale nie jest pełnym audytem zgodności z WCAG.
Wybierz reprezentatywne strony i scenariusze: odczytanie usługi, poznanie warunków, kontakt, rezerwacja lub zakup. Nie oceniaj wyłącznie strony głównej. Formularz lub menu może używać innego komponentu niż reszta serwisu.
Zapisuj problem wraz z adresem, krokiem i skutkiem. „Menu jest niedostępne” to zbyt ogólne zgłoszenie. „Po otwarciu menu klawiaturą nie można przejść do podstrony usług” pozwala odtworzyć błąd.
W3C udostępnia wstępne kontrole dostępności. Pomagają rozpocząć przegląd, ale nie potwierdzają wszystkich wymagań ani doświadczeń użytkowników.
Tytuł powinien jasno określać temat. Dalej używaj logicznych nagłówków opisujących kolejne części. Nie wybieraj H3 tylko dlatego, że wygląda mniejszy; poziom ma wskazywać relację treści, a styling jest osobną decyzją.
Pisz konkretne instrukcje, dziel długie fragmenty i wyjaśniaj specjalistyczne terminy potrzebne do decyzji. Lista może ułatwić wykonanie kroków, lecz nie zastąpi wyjaśnienia kontekstu. Unikaj informacji umieszczonych wyłącznie jako tekst w obrazie.
Tekst linku powinien opisywać cel. Kilka odnośników nazwanych „więcej” nie pozwala łatwo rozróżnić, dokąd prowadzą. Pomocne są zasady czytelnego linkowania wewnętrznego.
Jasny tekst na jasnym tle może być trudny do odczytania, podobnie jak informacje umieszczone na zmiennym zdjęciu. Dla poziomu AA WCAG minimalny kontrast zwykłego tekstu wynosi zasadniczo 4,5:1, a dużego tekstu 3:1; definicja dużego tekstu i wyjątki są opisane w wyjaśnieniu kryterium kontrastu.
Kolor nie powinien być jedynym sposobem przekazania informacji. Błąd formularza oznacz również tekstem, a aktywny stan pokaż tak, aby dało się go rozpoznać bez odróżniania samych barw.
Powiększ stronę i sprawdź, czy tekst pozostaje czytelny, przyciski dostępne, a treść nie jest obcinana. Zwróć uwagę na sztywne wysokości kontenerów i nakładki zasłaniające ważne elementy. Widok mobilny i powiększenie mogą ujawnić różne problemy.
Korzystając z klawiatury, przejdź przez menu, odnośniki i formularz. Sprawdź, czy widać aktualne miejsce fokusu, kolejność jest logiczna i można wrócić z otwartego elementu. Nie usuwaj widocznego obramowania fokusu tylko z powodów wizualnych bez zapewnienia odpowiedniego zastępstwa.
Zwróć uwagę na menu rozwijane, modalne okna i accordion. Użytkownik powinien móc je obsłużyć, rozpoznać stan i wrócić do głównej treści. Efekt najechania myszą nie potwierdza działania z klawiatury.
Nie blokuj użytkownika w komponencie, z którego nie można wyjść. Jeśli pojawia się pułapka lub ważny przycisk nie daje się uruchomić, potraktuj to jako konkretną barierę do poprawy, a nie preferencję projektu.
Każde pole powinno mieć zrozumiałą etykietę powiązaną z kontrolką. Tekst przykładowy znikający po rozpoczęciu pisania nie jest dobrym zamiennikiem stałej informacji, co trzeba wpisać. W3C opisuje oznaczanie pól w poradniku etykiet formularzy.
Wymagane pola i format wskaż przed błędem. Komunikat powinien wyjaśniać problem i sposób poprawy, np. potrzebę wpisania pełnego adresu e-mail. Nie wystarczy czerwone obramowanie lub napis „niepoprawne dane”.
Sprawdź obsługę klawiaturą, zachowanie po błędzie i potwierdzenie wysłania. Informacja o sukcesie musi być dostępna również dla technologii wspomagających. Jeśli strona zmienia komunikat bez przeładowania, wykonawca powinien sprawdzić sposób przekazania tej zmiany.
Tekst alternatywny powinien wynikać z roli obrazu. Jeśli grafika przekazuje informację, opisz ją odpowiednio do kontekstu. Obraz dekoracyjny nie potrzebuje rozbudowanego opisu. Przycisk z samą ikoną musi mieć dostępną nazwę objaśniającą działanie.
Przy nagraniu oceniaj potrzebę napisów, transkrypcji i innych sposobów przekazania treści. Nie zakładaj, że każdy może odtworzyć dźwięk lub zobaczyć obraz. Autoodtwarzanie i ruch mogą dodatkowo utrudniać korzystanie.
Materiały pobierane również stanowią część ścieżki. Jeżeli warunki usługi dostępne są wyłącznie w trudnym do odczytania PDF, poprawa strony nie rozwiązuje całego problemu.
Skaner może wskazać część błędów kodu, kontrastu lub oznaczeń. Nie oceni jednak, czy instrukcja jest zrozumiała i czy proces pozwala wykonać zadanie. Brak wykrytych błędów nie oznacza pełnej dostępności.
Po automatycznej kontroli przeprowadź zadania klawiaturą i sprawdź reprezentatywne elementy z technologiami wspomagającymi. Przy wymaganiu pełnej zgodności potrzebny jest szerszy audyt określający standard, poziom, zakres oraz metodę oceny.
Nie traktuj nakładki lub wtyczki jako dowodu zgodności. Ustawienie większego tekstu nie naprawi nieopisanej kontrolki i niedziałającego menu. Wymagania najlepiej uwzględnić wcześniej w makiecie i projekcie.
Najpierw zajmij się barierami uniemożliwiającymi ważne zadanie: kontakt, wybór usługi czy zakup. Następnie uporządkuj błędy wspólnych komponentów, które powtarzają się na wielu stronach. Zapisz poprawki i testuj ponownie po wdrożeniu.
Nowe treści i widgety mogą przywrócić problem. Ustal zasady nagłówków, linków, opisów i formularzy dla osób edytujących. Utrzymanie witryny powinno uwzględniać także sprawność ścieżek użytkownika.
Dostępność strony internetowej to część jakości projektu i redakcji. Wstępny przegląd pomaga zacząć, a jego zakres trzeba uczciwie odróżnić od potwierdzenia pełnej zgodności.
Nie. Wykrywa część problemów, ale nie ocenia pełnej ścieżki i zrozumiałości informacji. Potrzebne są testy ręczne, a pełny audyt ma określony standard i zakres.
Sama instalacja nie jest dowodem zgodności. Może dostarczać wybrane funkcje, lecz nie naprawia automatycznie struktury, nazw kontrolek i działania wszystkich procesów.
Nie traktuj go jako stałej etykiety. Znika podczas wpisywania i może nie przekazywać potrzebnej informacji wszystkim użytkownikom. Zapewnij czytelną, właściwie powiązaną etykietę.
Sprawdź odnalezienie oferty i wysłanie zapytania, następnie nagłówki, kontrast, powiększenie i klawiaturę. Zapisuj konkretne bariery. Taki przegląd nie jest jednak pełnym potwierdzeniem zgodności.
Jeżeli menu, tekst lub formularz utrudniają kontakt, warto rozpocząć od konkretnych ścieżek. Porozmawiaj z Craftivo o jakości projektu i elementach wymagających sprawdzenia.