Ręczne testowanie ułatwień dostępu

Podstawy testowania ręcznego

Ręczne testowanie ułatwień dostępu obejmuje klawiaturę, testy wizualne i poznawcze, a także narzędzia i techniki wykrywające problemy, których nie są w stanie wykryć narzędzia zautomatyzowane. Narzędzia automatyczne nie spełniają wszystkich kryteriów sukcesu określonych przez WCAG, dlatego ważne jest, by nie przeprowadzać zautomatyzowanych testów ułatwień dostępu i przestać je testować.

W miarę rozwoju technologii więcej testów może być objętych tylko automatycznym narzędziem, ale obecnie do protokołów testów należy dodać ręczne i wspomagające mechanizmy kontroli, aby uwzględnić wszystkie obowiązujące punkty kontrolne WCAG.

Zalety ręcznego testowania ułatwień dostępu:

• Wygodne i szybkie
• wykrywają większy odsetek problemów niż same testy automatyczne;
• Niewiele narzędzi i wiedza niezbędnych do osiągnięcia sukcesu

Wady ręcznego testowania ułatwień dostępu:

• Bardziej złożone i czasochłonne testy niż testy automatyczne
• Powtarzanie na dużą skalę może być trudne
• wymagają większej wiedzy o ułatwieniach dostępu do przeprowadzania testów i interpretowania wyników.

Porównajmy, jakie elementy i szczegóły ułatwień dostępu są obecnie wykrywane przez zautomatyzowane narzędzie, a które nie są wykrywane.

Rodzaje testów ręcznych

Jest wiele narzędzi i technik ręcznych, które warto wziąć pod uwagę podczas analizowania strony internetowej lub aplikacji pod kątem cyfrowej ułatwień dostępu. Podczas testów ręcznych należy skupić się na 3 głównych obszarach: funkcjonalność klawiatury, atrakcyjne wizualnie opinie i ogólne sprawdzanie treści.

W tym module szczegółowo omówimy każdy z tych tematów, ale poniższe testy nie stanowią pełnej listy wszystkich testów ręcznych, które można lub należy przeprowadzić. Zachęcamy do rozpoczęcia od ręcznej listy kontrolnej ułatwień dostępu pochodzącej z renomowanego źródła i opracowania własnej, ukierunkowanej na potrzeby zespołu listy kontrolnej ręcznego testowania.

Sprawdzanie klawiatury

Szacuje się, że około 25% wszystkich problemów z dostępnością cyfrową jest wynikiem braku obsługi klawiatury. W module fokusa klawiatury dowiedzieliśmy się, że dotyczy to wszystkich typów użytkowników, w tym niedowidzących i niedowidzących czytników ekranu oraz oprogramowania rozpoznawania głosu, które korzysta z technologii opartej na obsłudze treści przy użyciu klawiatury.

Testy z klawiatury odpowiadają na pytania w rodzaju:

• Czy strona internetowa lub funkcja wymaga myszy do działania?
• Czy kolejność zakładek jest logiczna i intuicyjna?
• Czy wskaźnik zaznaczenia klawiatury jest zawsze widoczny?
• Czy uda Ci się utknąć w elemencie, który nie powinien zatrzymywać skupienia?
• Czy możesz przejść do elementu, który powinien przyciągać zaznaczenie, lub za jego pomocą?
• Czy po zamknięciu elementu, który został wyróżniony, wskaźnik zaznaczenia powrócił do właściwego miejsca?

Chociaż wpływ działania klawiatury jest ogromny, procedura testowania jest dość prosta. Wystarczy, że odłożysz kursor myszy lub zainstalujesz mały pakiet JavaScript i przetestujesz swoją stronę, używając samej klawiatury. Poniższe polecenia są niezbędne do testowania klawiatury.

Kontrole wizualne

Testy wizualne koncentrują się na wizualnych elementach strony i wykorzystują narzędzia takie jak powiększenie ekranu lub powiększenie przeglądarki, aby sprawdzić dostępność w witrynie lub aplikacji pod kątem ułatwień dostępu.

Dzięki kontroli wizualnej możesz dowiedzieć się:

• Czy występują problemy z kontrastem kolorów, których automatyczne narzędzie nie może wychwycić, na przykład tekst na gradientze lub obrazie?
• Czy są jakieś elementy, które wyglądają jak nagłówki, listy i inne elementy strukturalne, ale nie są tak zakodowane?
• Czy linki nawigacyjne i dane wejściowe w formularzu są spójne w całej witrynie lub aplikacji?
• Czy są jakieś efekty błyskowe, stroboskopowe lub animacje, które wykraczają poza zalecenia?
• Czy treści mają odpowiednie odstępy? Do liter, słów, wierszy i akapitów?
• Czy widzisz całą zawartość za pomocą lupy lub powiększenia w przeglądarce?

Sprawdzanie treści

W odróżnieniu od testów wizualnych, które koncentrują się na układzie, ruchu i kolorach, kontrola treści koncentruje się na słowach znajdujących się na stronie. Warto nie tylko przyjrzeć się samej treści, ale także sprawdzić kontekst, aby upewnić się, że inni użytkownicy również będą mogli ją zrozumieć.

Funkcja sprawdzania treści odpowiada na pytania w rodzaju:

• Czy tytuły stron, nagłówki i etykiety formularzy są zrozumiałe i dobrze opisują ich zawartość?
• Czy alternatywne obrazy są zwięzłe, dokładne i przydatne?
• Czy kolor jest jedynym sposobem na przekazanie znaczenia lub informacji?
• Czy linki mają charakter opisowy lub czy używasz ogólnego tekstu, np. „dowiedz się więcej” lub „kliknij tutaj”?
• Czy język na stronie uległ zmianie?
• Czy używany jest zwykły język, a akronimy zostały użyte w pierwszej kolejności?

Niektóre kontrole treści mogą być częściowo zautomatyzowane. Możesz np. napisać linter JavaScript, który sprawdza, czy wyświetla się opcja „Kliknij tutaj”, i zasugeruje wprowadzenie zmian. Takie niestandardowe rozwiązania często wymagają jednak zmiany kontekstu przez człowieka.

Prezentacja: test ręczny

Do tej pory na naszej stronie demonstracyjnej przeprowadziliśmy automatyczne testy i wykryliśmy i naprawiliśmy 8 różnych rodzajów problemów. Jesteśmy teraz gotowi do ręcznego sprawdzenia, czy znajdziemy jeszcze więcej problemów z ułatwieniami dostępu.

Krok 1

W naszej zaktualizowanej demonstracji z CodePen wprowadziliśmy wszystkie automatyczne aktualizacje ułatwień dostępu.

Aby kontynuować kolejne testy, wyświetl go w trybie debugowania. To ważne, ponieważ usuwa element <iframe> otaczający demonstracyjną stronę internetową, co może zakłócać działanie niektórych narzędzi testowych. Dowiedz się więcej o trybie debugowania w CodePen.

Krok 2

Rozpocznij test ręczny, odkładając mysz lub trackpad na bok i poruszając się w górę i w dół modelu DOM, używając tylko klawiatury.

Problem 1: widoczny wskaźnik zaznaczenia

Pierwszy problem z klawiaturą powinien być widoczny od razu (a może nie powinien być widoczny), ponieważ został usunięty widoczny wskaźnik zaznaczenia. Po przeskanowaniu kodu CSS w wersji demonstracyjnej zobaczysz, że do bazy kodu dodano przerażającą klauzulę „outline: none”.

  :focus {
    outline: none;
  }

Naprawmy to.

Jak wiesz z modułu fokus klawiatury, musisz usunąć ten wiersz kodu, aby umożliwić przeglądarkom wyświetlanie widocznego fokusu dla użytkowników. Możesz pójść o krok dalej i utworzyć wskaźnik skupienia zgodny ze stylem Twojego produktu cyfrowego.

:focus {
  outline: 3px dotted #008576;
}

Problem 2: Kolejność skupienia

Gdy już zmodyfikujesz wskaźnik zaznaczenia i stanie się on widoczny, pamiętaj, aby poruszać się klawiszem Tab po stronie. Zwróć uwagę, że pole do wprowadzania danych używane do subskrybowania newslettera nie jest zaznaczone. Zostały usunięte z naturalnego porządku ostrości przez ujemny tabindex.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Naprawmy to.

Chcemy, aby użytkownicy wykorzystywali to pole przy rejestracji do newslettera, więc wystarczy usunąć ujemny indeks tabulacji lub ustawić go na 0, aby umożliwić wpisywanie danych za pomocą klawiatury.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Krok 3

Po zaznaczeniu zaznaczenia za pomocą klawiatury przejdziemy do sprawdzania treści i treści wizualnej.

Problem 3. Kontrast kolorów linku

Podczas testowania klawiatury przewijając ją w górę i w dół strony demonstracyjnej, pewnie zauważyłeś, że w akapitach o różnych schorzeniach klawiatura koncentruje się na trzech niewidocznych linkach.

Aby strona była dostępna, linki muszą wyróżniać się od otaczającego tekstu i zawierać zmianę stylu (niekolorową) po najechaniu kursorem myszy i w zaznaczeniu na klawiaturze.

Naprawmy to.

Szybkim rozwiązaniem jest podkreślenie linków wewnątrz akapitów, aby je wyróżnić. Może to rozwiązać problem z ułatwieniami dostępu, ale może nie odpowiadać ogólnej estetyce projektu, którą chcesz osiągnąć.

Jeśli nie zdecydujesz się na podkreślenie, będzie trzeba zmienić kolory w taki sposób, aby spełniały wymagania dotyczące zarówno tła, jak i tekstu.

Gdy wyświetlisz wersję demonstracyjną za pomocą narzędzia do sprawdzania kontrastu linków, zobaczysz, że kolor linku spełnia wymóg kontrastu kolorów 4,5:1 między zwykłym tekstem a tłem. Linki bez podkreślenia muszą jednak spełniać wymagania dotyczące kontrastu kolorów 3:1 z otaczającym tekstem.

Jedną z opcji jest zmiana koloru linku, aby pasował do pozostałych elementów na stronie. Jeśli jednak zmienisz kolor linku na zielony, treść również trzeba zmodyfikować tak, aby spełniała ogólne wymagania dotyczące kontrastu kolorów między wszystkimi 3 elementami: linkami, tłem i otaczającym je tekstem.

Problem 4. Kontrast kolorów ikon

Kolejnym problemem z kontrastem kolorów są ikony mediów społecznościowych. W module kolorów i kontrastu dowiedzieliśmy się, że najważniejsze ikony muszą mieć kontrast 3:1 z tłem. Jednak w wersji demonstracyjnej współczynnik kontrastu ikon mediów społecznościowych wynosi 1,3:1.

Naprawmy to.

Aby spełnić wymagania dotyczące kontrastu kolorów 3:1, ikony mediów społecznościowych zmieniają kolor na ciemnoszary.

Problem 5. Układ treści

Jeśli spojrzymy na układ treści akapitu, tekst jest w pełni uzasadniony. Jak już wiesz z modułu Typografia, tworzy się „rzeki przestrzeni”, co może utrudniać czytanie tekstu.

p.bullet {
   text-align: justify;
}

Naprawmy to.

Aby zresetować wyrównanie tekstu w wersji demonstracyjnej, możesz zaktualizować kod do wartości text-align: left; lub całkowicie usunąć ten wiersz z CSS. Jest to domyślne wyrównanie dla przeglądarek. Pamiętaj, by przetestować kod i sprawić, że domyślne wyrównanie tekstu zostanie usunięte z innych dziedziczonych stylów.

p.bullet {
   text-align: left;
}

Krok 4

Gdy wykryjesz i rozwiążesz wszystkie ręczne problemy z ułatwieniami dostępu opisane w poprzednich krokach, Twoja strona powinna wyglądać podobnie do naszego zrzutu ekranu.

W ręcznych testach może się znaleźć więcej problemów z ułatwieniami dostępu, niż zostało omówione w tym module. Wiele z nich omówimy w następnym module.

Następny krok

Doskonale! Masz ukończone moduły testowania automatycznego i ręcznego. Możesz też zobaczyć nasz zaktualizowany kod Pen, który zawiera wszystkie automatyczne i ręczne poprawki ułatwień dostępu.

Przejdźmy teraz do ostatniego modułu testowego poświęconego wspomagającemu testowaniu technologii.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat ręcznego testowania ułatwień dostępu