Ręczne testowanie ułatwień dostępu

Podstawowe informacje o testach ręcznych

Ręczne testowanie ułatwień dostępu obejmuje testy klawiatury, testy wizualne i testy poznawcze, narzędzia i techniki, które pozwalają wykrywać problemy, których nie mogą wykryć narzędzia automatyczne. Automatyczne narzędzia nie obejmują wszystkich kryteriów sukcesu określonych w WCAG, dlatego niezbędne jest przeprowadzanie automatycznych testów ułatwień dostępu i kontynuowanie testowania.

Wraz z rozwojem technologii coraz więcej testów będzie można przeprowadzać wyłącznie za pomocą narzędzi automatycznych, ale obecnie do protokołów testowania trzeba dodawać zarówno testy ręczne, jak i testy z użyciem technologii wspomagającej osoby z niepełnosprawnością, aby obejmowały one wszystkie odpowiednie punkty kontrolne wytycznych WCAG.

Zalety ręcznych testów dostępności:

  • Stosunkowo proste i szybkie w przeprowadzeniu
  • Wykrywanie większego odsetka problemów niż w przypadku samych testów automatycznych
  • Do osiągnięcia sukcesu nie jest potrzebna specjalistyczna wiedza ani narzędzia.

Wady ręcznych testów dostępności:

  • Bardziej złożone i czasochłonne niż testy automatyczne
  • Trudno powtórzyć na dużą skalę
  • Wymagają większej wiedzy na temat ułatwień dostępu, aby przeprowadzać testy i interpretować wyniki.

Porównaj elementy i szczegóły dotyczące ułatwień dostępu, które mogą zostać wykryte przez narzędzie automatyczne, z tymi, które nie zostaną wykryte.

Można je zautomatyzować Nie można zautomatyzować
Kontrast kolorów tekstu na jednolitym tle Kontrast kolorów tekstu na gradientach lub obrazach
Tekst alternatywny obrazu istnieje Tekst alternatywny obrazu jest dokładny i prawidłowo przypisany.
Nagłówki, listy i punkty orientacyjne Nagłówki, listy i punkty orientacyjne są prawidłowo oznaczone, a wszystkie elementy są uwzględnione.
ARIA jest obecna ARIA jest używana prawidłowo i zastosowana do odpowiednich elementów.
Identyfikowanie elementów, które można zaznaczyć za pomocą klawiatury które elementy nie mają zaznaczenia klawiatury, czy kolejność zaznaczania jest logiczna i czy wskaźnik zaznaczenia jest widoczny;
Wykrywanie tytułu elementu iframe iFrame, kolejność zaznaczania jest logiczna, a wskaźnik zaznaczenia jest widoczny.
Element wideo jest obecny Element wideo zawiera odpowiednie media alternatywne (np. napisy i transkrypcje).


Rodzaje testów ręcznych

Podczas sprawdzania dostępności cyfrowej strony internetowej lub aplikacji możesz skorzystać z wielu narzędzi i technik. Trzy główne obszary testów manualnych to funkcjonalność klawiatury, recenzje skupiające się na aspektach wizualnych i ogólne sprawdzanie treści.

W tym module omawiamy każdy z tych tematów na wysokim poziomie, ale poniższe testy nie są wyczerpującą listą wszystkich testów ręcznych, które możesz lub powinnaś(-eś) przeprowadzić. Zachęcamy do rozpoczęcia od ręcznej listy kontrolnej ułatwień dostępu pochodzącej z wiarygodnego źródła i opracowania własnej, ukierunkowanej listy kontrolnej ręcznego testowania, która będzie dostosowana do konkretnego produktu cyfrowego i potrzeb zespołu.

Sprawdzanie klawiatury

Szacuje się, że około 25% wszystkich problemów z dostępnością cyfrową jest związanych z brakiem obsługi klawiatury. Jak dowiedzieliśmy się z modułu skupienie klawiatury, ma to wpływ na wszystkie typy użytkowników, w tym na osoby widzące, które korzystają tylko z klawiatury, osoby niedowidzące lub niewidome, które korzystają z czytników ekranu, oraz osoby korzystające z oprogramowania do rozpoznawania mowy, które używa technologii wymagającej dostępności treści za pomocą klawiatury.

Testy klawiatury pozwalają odpowiedzieć na pytania takie jak:

  • Czy strona lub funkcja wymaga do działania myszy?
  • Czy kolejność tabulacji jest logiczna i intuicyjna?
  • Czy wskaźnik zaznaczenia klawiatury jest zawsze widoczny?
  • Czy można utknąć w elemencie, który nie powinien blokować ostrości?
  • Czy możesz poruszać się za elementem, który powinien blokować zaznaczenie, lub wokół niego?
  • Czy po zamknięciu elementu, który został zaznaczony, wskaźnik zaznaczenia powrócił do logicznego miejsca?

Wpływ funkcji klawiatury jest ogromny, ale procedura testowania jest dość prosta. Wystarczy, że odłożysz mysz lub zainstalujesz mały pakiet JavaScript i przetestujesz swoją witrynę, używając tylko klawiatury. Do testowania klawiatury niezbędne są te polecenia.

Klucz Wynik
Tab Przechodzi z jednego aktywnego elementu do drugiego.
Shift + Tab Przechodzi do poprzedniego aktywnego elementu.
Strzałki Przełączanie między powiązanymi elementami sterującymi
Spacja Przełącza stany i przesuwa stronę w dół
Shift + spacja Przesuwa się w górę strony
Enter uruchamia określone elementy sterujące,
Escape Zamyka obiekty wyświetlane dynamicznie.

Kontrole wizualne

Sprawdzanie wizualne koncentruje się na elementach wizualnych strony i wykorzystuje narzędzia takie jak powiększenie ekranu lub powiększenie przeglądarki, aby sprawdzić dostępność witryny lub aplikacji.

Kontrola wizualna może Ci powiedzieć:

  • Czy występują problemy z kontrastem kolorów, których nie wykryło automatyczne narzędzie, np. tekst na gradientowym tle 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 pola formularza są spójne w całej witrynie lub aplikacji?
  • Czy występują migające, stroboskopowe lub animowane elementy, które przekraczają zalecenia?
  • Czy treść ma odpowiednie odstępy? Czy dotyczy to liter, słów, wierszy i akapitów?
  • Czy możesz zobaczyć całą zawartość za pomocą lupy ekranowej lub powiększenia przeglądarki?

Sprawdzanie treści

W przeciwieństwie do testów wizualnych, które koncentrują się na układach, ruchu i kolorach, testy treści skupiają się na słowach na stronie. Warto nie tylko sprawdzić sam tekst, ale też kontekst, aby upewnić się, że będzie on zrozumiały dla innych.

Sprawdzanie treści pozwala uzyskać odpowiedzi na pytania takie jak:

  • Czy tytuły stron, nagłówki i etykiety formularzy są jasne i opisowe?
  • Czy alternatywne teksty do obrazów są zwięzłe, dokładne i przydatne?
  • Czy kolor jest jedynym sposobem przekazywania znaczenia lub informacji?
  • Czy linki są opisowe, czy używasz ogólnego tekstu, takiego jak „czytaj dalej” lub „kliknij tutaj”?
  • Czy na stronie wprowadzono zmiany w języku?
  • Czy używany jest prosty język i czy wszystkie akronimy są wyjaśniane przy pierwszym użyciu?

Niektóre kontrole treści można częściowo zautomatyzować. Możesz na przykład napisać program do sprawdzania kodu JavaScript, który wyszukuje tekst „Kliknij tutaj” i sugeruje wprowadzenie zmiany. Jednak w przypadku tych niestandardowych rozwiązań często nadal potrzebna jest interwencja człowieka, który zmieni tekst na bardziej kontekstowy.

Prezentacja: test ręczny

Przeprowadziliśmy już automatyczne testy na naszej demonstracyjnej stronie internetowej i wykryliśmy oraz usunęliśmy 8 różnych rodzajów problemów. Możemy teraz przeprowadzić ręczne testy, aby sprawdzić, czy uda nam się wykryć jeszcze więcej problemów z ułatwieniami dostępu.

Krok 1

W naszej zaktualizowanej wersji demonstracyjnej w CodePen zastosowaliśmy wszystkie automatyczne aktualizacje ułatwień dostępu.

Wyświetl go w trybie debugowania, aby przejść do kolejnych testów. Jest to ważne, ponieważ usuwa <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 CodePen.

Krok 2

Rozpocznij ręczne testowanie, odkładając mysz lub trackpad i poruszając się po DOM-ie tylko za pomocą klawiatury.

Problem 1. Widoczny wskaźnik zaznaczenia

Pierwszy problem z klawiaturą powinien być od razu widoczny – a właściwie nie powinien, ponieważ widoczny wskaźnik fokusu został usunięty. Po zeskanowaniu kodu CSS w wersji demonstracyjnej w bazie kodu powinien pojawić się niechciany kod „outline: none”.

  :focus {
    outline: none;
  }
Naprawmy to.

Jak już wiesz z modułu dotyczącego fokusu klawiatury, aby umożliwić przeglądarkom dodawanie widocznego fokusu dla użytkowników, musisz usunąć ten wiersz kodu. Możesz pójść o krok dalej i utworzyć wskaźnik fokusu dostosowany do estetyki Twojego produktu cyfrowego.

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

Problem 2. Kolejność fokusu

Po zmodyfikowaniu wskaźnika fokusu i upewnieniu się, że jest on widoczny, przejdź na stronę za pomocą klawisza Tab. Zwróć uwagę, że pole do wprowadzania danych formularza używane do subskrypcji newslettera nie jest aktywne. Został on usunięty z naturalnej kolejności zaznaczania za pomocą ujemnego indeksu tabindex.

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

Chcemy, aby użytkownicy używali tego pola do rejestracji w naszym newsletterze, więc wystarczy usunąć ujemny indeks tabindex lub ustawić go na zero, aby pole wejściowe znów można było zaznaczyć za pomocą klawiatury.

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

Krok 3

Po sprawdzeniu, czy można poruszać się po stronie za pomocą klawiatury, przechodzimy do sprawdzania elementów wizualnych i treści.

Podczas testowania klawiatury przez przełączanie się między elementami na stronie demonstracyjnej za pomocą klawisza Tab zapewne zauważysz, że klawiatura skupia się na 3 wizualnie ukrytych linkach w akapitach dotyczących różnych schorzeń.

Aby nasza strona była dostępna, linki muszą wyróżniać się na tle otaczającego je tekstu i zawierać zmianę stylu inną niż kolor po najechaniu kursorem myszy i skupieniu na nich uwagi za pomocą klawiatury.

Naprawmy to.

Szybkim rozwiązaniem jest dodanie podkreślenia do linków w akapitach, aby je wyróżnić. Rozwiąże to problem z dostępnością, ale może nie pasować do ogólnej estetyki projektu, którą chcesz osiągnąć.

Jeśli nie dodasz podkreślenia, musisz zmodyfikować kolory tak, aby spełniały wymagania dotyczące zarówno tła, jak i tekstu.

Jeśli sprawdzisz wersję demonstracyjną za pomocą narzędzia do sprawdzania kontrastu linków, zobaczysz, że kolor linku spełnia wymaganie dotyczące kontrastu kolorów 4,5:1 między tekstem o standardowym rozmiarze a tłem. Jednak niepodkreślone linki muszą też spełniać wymaganie dotyczące kontrastu kolorów 3:1 w stosunku do otaczającego tekstu.

Jedną z opcji jest zmiana koloru linku, aby pasował do innych elementów na stronie. Jeśli jednak zmienisz kolor linku na zielony, musisz też zmodyfikować tekst główny, aby spełniał ogólne wymagania dotyczące kontrastu kolorów między wszystkimi 3 elementami: linkami, tłem i otaczającym tekstem.

Zrzut ekranu z WebAIM dla tekstu linku pokazuje, że link do tekstu głównego nie spełnia wymagań WCAG na poziomie A.
Jeśli link i tekst główny są takie same, test się nie powiedzie.
Zrzut ekranu z WebAIM pokazuje, że wszystkie testy są zaliczone, gdy kolor linku jest zielony.
Jeśli link i tekst główny są różne, test jest zaliczony.

Problem 4. Kontrast kolorów ikony

Kolejnym problemem z kontrastem kolorów, który został pominięty, są ikony mediów społecznościowych. W module Kolor i kontrast dowiedzieliśmy się, że ważne ikony muszą mieć kontrast kolorów z tłem na poziomie 3:1. W wersji demonstracyjnej ikony mediów społecznościowych mają jednak współczynnik kontrastu 1,3:1.

Naprawmy to.

Aby spełnić wymagania dotyczące kontrastu kolorów na poziomie 3:1, ikony mediów społecznościowych są zmieniane na ciemniejszy odcień szarości.

Zrzut ekranu wersji demonstracyjnej z analizatorem kolorów, który pokazuje nieprawidłowy kontrast kolorów ikony.

Problem 5. Układ treści

Jeśli przyjrzysz się układowi treści akapitu, zobaczysz, że tekst jest w pełni wyjustowany. Jak już wiesz z modułu Typografia, powoduje to powstawanie „rzek spacji”, które mogą utrudniać czytanie tekstu niektórym użytkownikom.

p.bullet {
   text-align: justify;
}
Naprawmy to.

Aby zresetować wyrównanie tekstu w wersji demonstracyjnej, możesz zaktualizować kod do text-align: left; lub całkowicie usunąć ten wiersz z CSS, ponieważ lewe wyrównanie jest domyślnym wyrównaniem w przeglądarkach. Pamiętaj, aby przetestować kod, ponieważ inne style dziedziczone mogą usuwać domyślne wyrównanie tekstu.

p.bullet {
   text-align: left;
}

Krok 4

Zrzut ekranu przedstawiający witrynę demonstracyjną Medical Mysteries Club.
Wszystkie problemy zgłoszone ręcznie zostały już rozwiązane w wersji demonstracyjnej, co widać na tym obrazie.

Gdy zidentyfikujesz i naprawisz wszystkie problemy z dostępnością, które zostały opisane w poprzednich krokach, Twoja strona powinna wyglądać podobnie do zrzutu ekranu.

Podczas sprawdzania ręcznego możesz znaleźć więcej problemów z ułatwieniami dostępu niż te, które omówiliśmy w tym module. Wiele z tych problemów omówimy w następnym module.

Następny krok

Doskonale! Ukończono moduły testów automatycznych i ręcznych. Możesz wyświetlić nasz zaktualizowany CodePen, w którym zastosowano wszystkie automatyczne i ręczne poprawki ułatwień dostępu.

Teraz przejdź do ostatniego modułu testowego, który skupia się na testowaniu technologii wspomagającej osoby z niepełnosprawnością.

Wstecz
Automatyczne testowanie ułatwień dostępu
Dalej
Testowanie technologii wspomagających osoby z niepełnosprawnością