Specjalista ds. dostępności cyfrowej
Rozpoznawaj bariery w serwisach, opisuj kryteria poprawek i weryfikuj je w praktyce.
Kompendium zawodu — pojęcia i zwroty
Pojęcia w pracy
- WCAG
- Wytyczne dostępności treści internetowych z kryteriami, które można testować.
- Fokus
- Wskazanie elementu, który aktualnie odbiera działania klawiatury.
- Tekst alternatywny
- Opis informacji lub funkcji obrazu dostępny bez jego oglądania.
Zwroty w typowych sytuacjach
- „Przejdźmy całą ścieżkę samą klawiaturą.”
- Sprawdzasz, czy użytkownik dotrze do celu bez myszy.
- „Zapiszę kroki, wpływ bariery i oczekiwane zachowanie.”
- Tworzysz zgłoszenie, które da się zweryfikować po poprawce.
Podstawy · Lekcja 1 z 6
Dostępność w konkretnym zadaniu
Zacznij od czynności użytkownika, np. zapisania się na spotkanie. Sprawdź, czy informacje i kontrolki dają się rozpoznać i obsłużyć na różne sposoby.
- Co zrobić najpierwZadanie
- Co zrobić dalejPrzeszkoda
- Jak zakończyćWpływ
Przykład z pracy
W formularzu etykieta znika po wpisaniu tekstu. Widoczna etykieta pomaga użytkownikowi zrozumieć pole także po uzupełnieniu.
Ćwiczenie praktyczne
Wybierz trzy ważne zadania na stronie kursu i wypisz, gdzie użytkownik może napotkać barierę.
Sprawdź się — opcjonalne pytanie
Co jest dobrą jednostką oceny dostępności?
- Losowy piksel tła
- Pełna czynność użytkownika wraz z jej wynikiem
- Wyłącznie liczba nagłówków na wszystkich stronach
Pokaż odpowiedź i wyjaśnienie
Pełna czynność użytkownika wraz z jej wynikiem. Ocena pełnej ścieżki pokazuje wpływ bariery na wykonanie celu.
Podstawy · Lekcja 2 z 6
Nawigacja klawiaturą i fokus
Przejdź całą stronę klawiszami Tab i Shift+Tab. Sprawdź, czy fokus jest widoczny, ma logiczną kolejność i czy użytkownik może wyjść z komponentu.
- Co zrobić najpierwWejście
- Co zrobić dalejObsługa klawiaturą
- Jak zakończyćPowrót fokusu
Przykład z pracy
Po zamknięciu okna dialogowego fokus powinien wrócić do kontrolki, która je otworzyła. Przetestuj wejście, poruszanie się i powrót.
Ćwiczenie praktyczne
Zapisz kolejność fokusu dla formularza i jego okna z potwierdzeniem.
Symulacja rozmowy
Dlaczego pozytywny wynik skanera nie wystarczy?
Porównaj z przykładową odpowiedzią
Skan obejmuje wybrane reguły. Samodzielnie sprawdzę, czy użytkownik rozumie nazwy, odnajduje fokus i może ukończyć zadanie z pomocą klawiatury i technologii asystującej.
Sprawdź się — opcjonalne pytanie
Co sprawdzasz po zamknięciu okna?
- Czy zmienił się kolor logo
- Czy kursor myszy jest na środku
- Czy fokus wrócił w logiczne miejsce
Pokaż odpowiedź i wyjaśnienie
Czy fokus wrócił w logiczne miejsce. Przewidywalny powrót pomaga kontynuować pracę bez ponownego szukania miejsca.
Praca krok po kroku · Lekcja 3 z 6
Semantyka, nazwy i komunikaty
Używaj elementów zgodnych z funkcją. Przyciski i pola potrzebują zrozumiałej nazwy. Komunikaty po akcji powinny być dostępne także bez przenoszenia wzroku.
- Co zrobić najpierwFunkcja
- Co zrobić dalejDostępna nazwa
- Jak zakończyćInformacja o skutku
Przykład z pracy
Przycisk z samą ikoną lupy ma nazwę „Szukaj”. Po filtrowaniu komunikat podaje liczbę wyników, zachowując położenie fokusu.
Ćwiczenie praktyczne
Przygotuj trzy przykłady nazw kontrolek i komunikat po wysłaniu formularza.
Sprawdź się — opcjonalne pytanie
Co powinna wyjaśniać nazwa kontrolki?
- Działanie lub cel elementu
- Dokładny kolor ikony
- Pozycję przycisku w kodzie
Pokaż odpowiedź i wyjaśnienie
Działanie lub cel elementu. Nazwa przekazuje funkcję niezależnie od wyglądu elementu.
Praca krok po kroku · Lekcja 4 z 6
Kontrast i treść przy powiększeniu
Sprawdź kontrast tekstu i elementów interfejsu odpowiednią metodą. Przetestuj powiększenie i wąski ekran, zwracając uwagę na czytelność i zachowanie funkcji.
- Co zrobić najpierwPowiększenie
- Co zrobić dalejKontrola układu
- Jak zakończyćSprawdzenie wykonania zadania
Przykład z pracy
Powiększona karta formularza chowa przycisk poza poziomym obszarem widoku. Jednokolumnowy układ pomaga utrzymać dostępność czynności.
Ćwiczenie praktyczne
Sprawdź kartę przy powiększeniu i w wąskim oknie. Udokumentuj, które informacje i działania są nadal dostępne.
Sprawdź się — opcjonalne pytanie
Co powinien potwierdzić test powiększenia?
- Zgodność wyglądu ze zrzutem w skali 100%
- Zachowanie treści i funkcji w powiększonym widoku
- Szybsze działanie kursora
Pokaż odpowiedź i wyjaśnienie
Zachowanie treści i funkcji w powiększonym widoku. Powiększenie może zmienić układ, a treść i obsługa powinny pozostać dostępne.
Trudniejsze sytuacje · Lekcja 5 z 6
Audyt z ręczną weryfikacją
Połącz automatyczne sprawdzenia z klawiaturą, technologią asystującą i oceną treści. W raporcie podaj scenariusz, skutek, dowód i proponowane kryterium poprawki.
- Co zrobić najpierwSkan
- Co zrobić dalejTest ręczny
- Jak zakończyćRaport i kryteria
Przykład z pracy
Skan nie znajduje pustych etykiet, ale tekst „kliknij tutaj” jest nieczytelny poza kontekstem. Ręczny test wykrywa problem w liście linków.
Ćwiczenie praktyczne
Przygotuj raport z jednym błędem wykrytym automatycznie i jednym wymagającym oceny ręcznej.
Sprawdź się — opcjonalne pytanie
Czego nie potwierdzi sam skan automatyczny?
- Czy pewne pola mają atrybut nazwy
- Czy wykryto część brakujących oznaczeń
- Czy nazwa linku dobrze wyjaśnia jego cel w kontekście
Pokaż odpowiedź i wyjaśnienie
Czy nazwa linku dobrze wyjaśnia jego cel w kontekście. Ocena sensu nazwy i wykonania zadania wymaga zrozumienia kontekstu.
Trudniejsze sytuacje · Lekcja 6 z 6
Naprawa i test regresji
Nadaj priorytet według wpływu na zadanie i liczby miejsc użycia komponentu. Po naprawie powtórz pierwotne sprawdzenie i sprawdź powiązane widoki.
- Co zrobić najpierwNaprawa
- Co zrobić dalejPonowienie
- Jak zakończyćRegresja w innych widokach
Przykład z pracy
Poprawka wspólnego okna przywraca fokus na jednej stronie. Test regresji sprawdza tę samą kontrolkę także w rejestracji i w ustawieniach.
Ćwiczenie praktyczne
Przygotuj plan sprawdzenia jednej poprawki na trzech stronach oraz warunek zamknięcia zgłoszenia.
Sprawdź się — opcjonalne pytanie
Co uzasadnia sprawdzenie kilku widoków po jednej zmianie?
- Wszystkie korzystają ze wspólnego komponentu
- Wszystkie mają ten sam kolor tła
- Widoki mają nazwy tej samej długości
Pokaż odpowiedź i wyjaśnienie
Wszystkie korzystają ze wspólnego komponentu. Wspólny komponent może zmienić zachowanie wszędzie, gdzie został użyty.