Podstawy testowania ręcznego
Ręczne testowanie ułatwień dostępu polega na wykorzystaniu testów z klawiatury, funkcji wizualnych i poznawczych, narzędzi i technik, aby wykrywać problemy, których automatyczne narzędzia nie są w stanie wykryć. Zgodnie z automatyzacją nie spełnia wszystkich kryteriów sukcesu określonych w WCAG, ważne, aby nie uruchamiać automatycznych testów ułatwień dostępu, a potem przerwać testy.
Wraz z rozwojem technologii swoje zautomatyzowane narzędzia mogłyby zrealizować więcej testów, ale obecnie do protokołów testowania trzeba dodać zarówno weryfikację manualną, jak i wspomaganą, aby obejmowały wszystkie odpowiednie punkty kontrolne WCAG.
Zalety ręcznych testów ułatwień dostępu:
- Jest przystępna i szybka w obsłudze.
- Wykrywanie większego odsetka problemów niż w przypadku samych testów automatycznych
- Do osiągnięcia sukcesu potrzeba niewiele narzędzi i wiedzy
Wady ręcznych testów ułatwień dostępu:
- Bardziej złożone i czasochłonne niż testy automatyczne
- Powtarzanie na dużą skalę może być trudne
- Wymagaj większej wiedzy na temat ułatwień dostępu, aby przeprowadzać testy i interpretować wyniki
Porównajmy, jakie elementy i szczegóły ułatwień dostępu można obecnie wykryć za pomocą automatycznego narzędzia w odróżnieniu od tych, które nie zostaną wykryte.
Rodzaje testów ręcznych
Istnieje wiele ręcznych narzędzi i technik, o których warto pamiętać, analizując strona internetowa lub aplikacja z dostępnością cyfrową. 3 najważniejsze obszary, na których warto się skupić testy ręczne obejmują korzystanie z klawiatury, oceny wizualne oraz ogólną kontrolę treści.
W tym module omówimy szczegółowo każdy z tych tematów, ale poniższe testy nie stanowią wyczerpującej listy wszystkich testów ręcznych które można lub należy uruchomić. Warto zacząć od ręczna lista kontrolna ułatwień dostępu z renomowanego źródła i opracuj własną listę kontrolną do testów ręcznych pod kątem konkretnych usług cyfrowych i potrzeb zespołu.
Sprawdzanie przez klawiaturę
Szacuje się, że około 25% wszystkich problemów z dostępnością w internecie jest związanych z brakiem obsługi klawiatury. Jak dowiedzieliśmy się w module zaznaczanie klawiatury, dotyczy to wszystkich typów użytkowników, w tym osób widzących tylko przy użyciu klawiatury, niedowidzących lub niewidomych czytników ekranu oraz osób korzystających z oprogramowania do rozpoznawania głosu, które wykorzystuje technologię opartą na obsłudze dostępu przy użyciu klawiatury.
Testy klawiatury pozwalają odpowiedzieć na takie pytania jak:
- Czy strona internetowa lub funkcja wymaga do działania myszy?
- Czy kolejność tabulatorów jest logiczna i intuicyjna?
- Czy wskaźnik zaznaczenia klawiatury jest zawsze widoczny?
- Czy można utknąć w elemencie, który nie powinien zatrzymywać ostrości?
- Czy potrafisz poruszać się za lub wokół elementu, który powinien przyciągać uwagę?
- Czy po zamknięciu elementu, dla którego został zaznaczony, wskaźnik ostrości wrócił do właściwego miejsca?
Chociaż wpływ funkcji klawiatury jest ogromny, procedura testowania jest dość prosta. Wystarczy, że odłożysz mysz lub zainstalujesz niewielki pakiet JavaScript i przetestujesz swoją witrynę wyłącznie za pomocą klawiatury. Poniższe polecenia są niezbędne do testowania klawiatury.
Kontrole wizualne
Kontrole wizualne skupiają się na elementach wizualnych strony i korzystają z narzędzi takich jak powiększenie ekranu lub powiększenie przeglądarki, aby sprawdzać witrynę lub aplikację pod kątem ułatwień dostępu.
Dzięki kontroli wizualnej możesz:
- Czy występują problemy z kontrastem kolorów, których automatyczne narzędzie nie jest w stanie wykryć, na przykład tekst na gradientie lub obrazie?
- Czy są jakieś elementy, które wyglądają jak nagłówki, listy i inne elementy strukturalne, ale nie są jako takie zakodowane?
- Czy linki nawigacyjne i dane wejściowe w formularzu są spójne w całej witrynie lub aplikacji?
- Czy występują zakłócenia, efekty stroboskopowe lub animacje, które nie spełniają zaleceń?
- Czy treści zawierają odpowiednie odstępy? Dla liter, słów, wierszy i akapitów?
- Czy widzisz całą zawartość przy użyciu lupy lub powiększenia w przeglądarce?
Sprawdzanie treści
W odróżnieniu od testów wizualnych skupiających się na układzie, ruchu i kolorach, kontrola treści skupia się na słowach znajdujących się na stronie. Musisz nie tylko przejrzeć samą treść, ale też sprawdzić jej kontekst, aby upewnić się, że nadaje się on dla innych użytkowników.
Sprawdzanie treści pozwala uzyskać odpowiedzi na takie pytania jak:
- Czy tytuły stron, nagłówki i etykiety formularzy są zrozumiałe i opisowe?
- Czy alternatywne obrazy są zwięzłe, dokładne i przydatne?
- Czy jedynym sposobem przedstawienia znaczenia lub informacji jest kolor?
- Czy linki są opisowe, czy używasz ogólnych tekstów, takich jak „dowiedz się więcej” lub „kliknij tutaj?”?
- Czy zmienił się język na stronie?
- Czy używany jest prosty język i wszystkie akronimy są zapisywane przy pierwszym użyciu?
Niektóre mechanizmy sprawdzania treści mogą być częściowo zautomatyzowane. Można na przykład napisać lintera JavaScriptu, który sprawdza opcję „Kliknij tutaj”. i zaproponuje zmianę. Jednak w takich rozwiązaniach i tak często człowiek musi zmienić treść tekstu na coś kontekstowego.
Prezentacja: test ręczny
Do tej pory na naszej stronie demonstracyjnej przeprowadziliśmy automatyczne testy i wykryliśmy i usunęliśmy 8 różnych typów problemów. Jesteśmy teraz gotowi do ręcznego sprawdzenia, czy uda nam się wykryć jeszcze więcej problemów z ułatwieniami dostępu.
Krok 1
W zaktualizowanym prezentacji CodePen znajdziesz wszystkie zastosowanych automatycznych aktualizacji ułatwień dostępu.
Otwórz je w trybie debugowania, by kontynuować
dla kolejnych testów. To ważne, ponieważ powoduje usunięcie elementu <iframe>, który otacza
demonstracyjną, która może zakłócać działanie niektórych narzędzi testowych. Więcej informacji o
Tryb debugowania w CodePen.
Krok 2
Rozpocznij ręczne testowanie, odkładając mysz lub trackpad na bok i poruszaj się w górę i w dół elementu 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ż widoczny wskaźnik zaznaczenia został usunięty. Po przeskanowaniu kodu CSS w wersji demonstracyjnej powinien on być dodany do bazy kodu.
:focus {
outline: none;
}
Naprawmy to.
Zgodnie z informacjami w module Sterowanie za pomocą klawiatury musisz usunąć ten wiersz kodu, aby umożliwić przeglądarkom dodawanie widocznego fokusu dla użytkowników. Możesz pójść o krok dalej i utworzyć wskaźnik skupienia dopasowany do estetyki Twojego produktu cyfrowego.
:focus {
outline: 3px dotted #008576;
}
Problem 2. Kolejność wyróżnienia
Gdy już zmodyfikujesz wskaźnik zaznaczenia i stanie się widoczny, użyj klawisza Tab, przez całą stronę. Zauważysz wtedy, że pole do wprowadzania danych wykorzystane w celu subskrypcji biuletynu nie jest zaznaczony. Została usunięta w porządku naturalnego skupienia przez ujemny indeks tabindex.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Chcemy, aby użytkownicy wykorzystywali to pole do subskrypcji naszego newslettera, dlatego wystarczy usunąć ujemny indeks tabindex lub ustawić go na zero, dzięki czemu dane wejściowe będą ponownie dostępne za pomocą klawiatury.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Krok 3
Po sprawdzeniu fokusu klawiatury przechodzimy do kontroli wizualnej i treści.
Problem 3. Kontrast koloru linku
Podczas testów klawiatury naciskaj klawisz Tab, by sprawdzić stronę demonstracyjną. z pewnością zauważyliście, że klawiatura skupiała się na trzech ukrytych wizualnie linkach w artykułów na temat różnych schorzeń.
Aby nasza strona była dostępna, linki muszą się odróżniać od otaczającego tekstu i uwzględnić zmianę stylu innego niż kolor po najechaniu kursorem myszy i zaznaczeniu na klawiaturze.
Poprawmy to.
Szybkim rozwiązaniem jest dodanie podkreślenia linków wewnątrz akapitów, aby je wyróżnić. Rozwiązałobyby to problem z ułatwieniami dostępu, ale mogą nie pasować do ogólnej estetyki projektu, na jaką masz nadzieję.
Jeśli postanowisz nie dodawać podkreślenia, musisz zmienić kolory w taki sposób, aby spełniały wymagania dotyczące zarówno tła, jak i tekstu reklamy.
Podczas przeglądania wersji demonstracyjnej za pomocą narzędzia do sprawdzania kontrastu linków zobaczysz, że kolor linku spełnia wymóg dotyczący kontrastu kolorów 4,5:1 między zwykłym tekstem a tłem. Jednak linki niepodkreślone muszą spełniać wymóg kontrastu kolorów 3:1 względem otaczającego tekstu.
Możesz na przykład zmienić kolor linku, aby pasował do pozostałych elementów na stronie. Jeśli jednak zmienisz kolor linku na zielony, musisz również zmodyfikować tekst główny, aby spełniał ogólne wymagania dotyczące kontrastu kolorów wszystkich 3 elementów: linków, tła i otaczającego tekstu.
Problem 4. Kontrast kolorów ikon
Inny problem z kontrastem kolorów to ikony mediów społecznościowych. Z modułu kolory i kontrast wiesz, że najważniejsze ikony muszą osiągnąć kontrast kolorów 3:1 względem tła. W wersji demonstracyjnej ikony mediów społecznościowych mają współczynnik kontrastu 1,3:1.
Poprawmy to.
Aby spełnić wymagania dotyczące kontrastu kolorów 3:1, ikony mediów społecznościowych zmieniają kolor na ciemniejszy odcień szarości.
Problem 5. Układ treści
Jeśli spojrzysz na układ treści akapitu, widać, że jest on całkowicie uzasadniony. Jak wiesz na stronie Moduł typografii, w ten sposób powstają „rzesze kosmiczne”, co może utrudniać niektórym osobom czytelnikom.
p.bullet {
text-align: justify;
}
Aby zresetować wyrównanie tekstu w wersji demonstracyjnej, możesz zmienić kod na
text-align: left; lub całkowicie usuń ten wiersz z CSS, ponieważ lewa część strony jest
wyrównanie domyślne w przeglądarkach. Pamiętaj o przetestowaniu kodu na wypadek innych
dziedziczone style usuwają domyślne wyrównanie tekstu.
p.bullet {
text-align: left;
}
Krok 4
Gdy znajdziesz i wyeliminujesz wszystkie ręczne problemy z ułatwieniami dostępu opisane w poprzednich krokach, strona powinna wyglądać podobnie do tego na zrzucie ekranu.
Podczas ręcznych testów może pojawić się więcej problemów z ułatwieniami dostępu niż omówiliśmy w tym module. Wiele z tych problemów omówimy w następnym module.
Następny krok
Doskonale! Udało Ci się ukończyć moduły testowania automatycznego i ręcznego. Zobacz zaktualizowany kod CodePen, ze wszystkimi automatycznymi i ręcznymi poprawkami ułatwień dostępu.
Przejdźmy teraz do ostatniego modułu testowania pomocy przy testowaniu technologii.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat ręcznego testowania ułatwień dostępu
Które elementy muszą spełniać standardy kontrastu kolorów WCAG?