W tym module dowiesz się, jak używać technologii wspomagających osoby z niepełnosprawnością do testowania ułatwień dostępu. Osoba z niepełnosprawnością może korzystać z AT, aby zwiększyć, utrzymać lub poprawić możliwości wykonywania zadań.
W przestrzeni cyfrowej mogą to być:
- Brak/nowoczesne technologie: kijki do głowy i ust, lupy ręczne, urządzenia z dużymi przyciskami
- Nowoczesne: urządzenia aktywowane głosem, urządzenia śledzące ruchy oczu, klawiatury/myszy adaptacyjne.
- Sprzęt: przełączniki, klawiatury ergonomiczne, automatycznie odświeżane urządzenie brajlowskie
- Oprogramowanie: programy do zamiany tekstu na mowę, napisy na żywo, czytniki ekranu
Zachęcamy do używania różnych typów znaczników AT w ogólnym procesie testowania.
Podstawy testowania czytnika ekranu
W tym module zajmiemy się jednym z najpopularniejszych cyfrowych elementów AT, czyli czytników ekranu. Czytnik ekranu to program, który odczytuje podstawowy kod witryny lub aplikacji. Następnie te informacje są konwertowane na wyjście mowy lub alfabetu Braille'a.
Czytniki ekranu są szczególnie przydatne dla osób niewidomych i niedowidzących, ale mogą też pomóc osobom niedowidzącym, niedowidzącym i niedowidzącym oraz cierpiącym na zaburzenie poznawcze.
Zgodność z przeglądarką
Dostępnych jest kilka czytników ekranu. Najpopularniejszymi czytnikami ekranu są JAWS, NVDA i VoiceOver na komputerach oraz VoiceOver i Talkback na urządzeniach mobilnych.
W zależności od systemu operacyjnego, ulubionej przeglądarki i używanego urządzenia czytnik ekranu może być najlepszym rozwiązaniem. Większość czytników ekranu została zbudowana z myślą o konkretnych urządzeniach i w konkretnych przeglądarkach. Podczas używania czytnika ekranu w przeglądarce, pod kątem której nie został skalibrowany, możesz napotkać więcej „błędów” lub nieoczekiwane zachowanie. Czytniki ekranu działają najlepiej w poniższych kombinacjach.
Polecenia czytnika ekranu
Po prawidłowym skonfigurowaniu oprogramowania czytnika ekranu na komputerze lub urządzeniu mobilnym zapoznaj się z dokumentacją czytnika ekranu (link do niej znajdziesz w poprzedniej tabeli) i wykonaj kilka podstawowych poleceń czytnika ekranu, aby zapoznać się z technologią. Jeśli korzystasz już z czytnika ekranu, rozważ wypróbowanie nowego.
Gdy używasz czytnika ekranu do testowania ułatwień dostępu, Twoim celem jest wykrywanie problemów w kodzie, które utrudniają korzystanie z witryny lub aplikacji, a nie emulację działania użytkownika czytnika ekranu. Dzięki temu możesz wykorzystać wiedzę podstawową, kilka poleceń czytnika ekranu i odrobinę (lub nawet sporo) praktyki.
Jeśli chcesz dowiedzieć się więcej o wrażeniach użytkowników korzystających z czytników ekranu i innych usług AT, możesz nawiązać kontakt z wieloma organizacjami i osobami, aby uzyskać te cenne informacje. Pamiętaj, że testowanie kodu pod kątem zestawu reguł za pomocą AT i zapytanie użytkowników o wrażenia użytkowników często przynosi różne wyniki. Oba są istotnymi aspektami tworzenia produktów w pełni promującej integrację społeczną.
Skróty klawiszowe do czytników ekranu
Polecenia klawiszy w czytnikach ekranu mobilnych
Wersja demonstracyjna testowania czytnika ekranu
Aby przetestować naszą prezentację, skorzystaliśmy z przeglądarki Safari na laptopie z systemem MacOS i przechwyciliśmy dźwięk. Możesz je wykonać, używając dowolnego czytnika ekranu, ale sposób wystąpienia niektórych błędów może różnić się od opisu w tym module.
Krok 1
Otwórz zaktualizowany plik CodePen, który mają wszystkie automatyczne i ręczne aktualizacje 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
stronie demonstracyjnej, która może zakłócać działanie niektórych narzędzi do testowania. Więcej informacji o
Tryb debugowania w CodePen.
Krok 2
Aktywuj wybrany czytnik ekranu i przejdź na stronę demonstracyjną. Zanim skupisz się na konkretnych problemach, możesz przejrzeć całą stronę od góry do dołu.
Zarejestrowaliśmy nasz czytnik ekranu w przypadku każdego problemu, zarówno przed wprowadzeniem poprawek, jak i po ich zastosowaniu w wersji demonstracyjnej. Zachęcamy do zapoznania się z wersją demonstracyjną przy użyciu własnego czytnika ekranu.
Problem 1. Struktura treści
Nagłówki i punkty orientacyjne to jedne z głównych sposobów poruszania się użytkowników korzystających z czytników ekranu. Jeśli ich nie ma, użytkownik czytnika ekranu musi przeczytać całą stronę, aby zrozumieć kontekst. Może to zająć dużo czasu i powodować frustrację. Jeśli spróbujesz nawigować według któregoś z elementów w wersji demonstracyjnej, szybko zauważysz, że żaden z nich nie istnieje.
- Przykład punktu orientacyjnego:
<div class="main">...</div> - Przykład nagłówka:
<p class="h1">Join the Club</p>
Jeśli wszystko zostało poprawnie zaktualizowane, wygląd nie powinien się zmienić, ale korzystanie z czytnika ekranu będzie znacznie wygodniejsze.
Naprawmy to.
Niektórych niedostępnych elementów nie da się zauważyć, przeglądając witrynę. Jak pamiętasz, warto wiedzieć, jak ważne są poziomy nagłówków i semantyczny kod HTML z modułu Struktura treści. Część treści może wyglądać jak nagłówek, ale w rzeczywistości znajduje się w elemencie stylizowanym <div>.
Aby rozwiązać problem z nagłówkami i punktami orientacyjnymi, musisz najpierw określić każdy element, który powinien być tak oznaczony, i zaktualizować powiązany kod HTML. Pamiętaj, aby zaktualizować także powiązaną usługę porównywania cen.
Przykład punktu orientacyjnego: <main>...</main>
Przykład nagłówka: <h1>Join the Club</h1>
Jeśli wszystko zostało poprawnie zaktualizowane, wygląd nie powinien się zmienić, ale korzystanie z czytnika ekranu będzie znacznie wygodniejsze.
Problem 2. Kontekst linku
Użytkownikom czytników ekranu należy koniecznie poinformować o przeznaczeniu linku i o tym, czy link przekierowuje ich do nowego miejsca poza witryną lub aplikacją.
W naszej prezentacji poprawiliśmy większość linków po zaktualizowaniu tekstu alternatywnego obrazu. Udostępniliśmy jednak kilka dodatkowych linków o różnych rzadkich chorobach, o których warto wspomnieć w dodatkowym kontekście, zwłaszcza że przekierowują one do nowej lokalizacji.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
Aby rozwiązać ten problem w przypadku użytkowników czytników ekranu, aktualizujemy kod, dodając do niego więcej informacji bez wpływu na elementy wizualne. Aby pomóc większej liczbie osób, na przykład osobom z zaburzeniami czytania lub poznania, możemy dodać dodatkowy tekst wizualny.
Istnieje wiele różnych wzorców, które możemy wziąć pod uwagę przy dodawaniu dodatkowych informacji o linku. Ze względu na nasze proste środowisko, które obsługuje tylko 1 język, etykieta ARIA jest w tej sytuacji prostym rozwiązaniem. Możesz zauważyć, że etykieta ARIA zastępuje pierwotny tekst linku, więc pamiętaj, aby uwzględnić te informacje w aktualizacji.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
Problem 3. Obraz dekoracyjny
W automatycznym module testowania narzędzie Lighthouse nie mogło wykryć wbudowanego pliku SVG, które pełniło funkcję głównego obrazu powitalnego na stronie demonstracyjnej, ale czytnik ekranu znajduje go i informuje jako „obraz”. bez dodatkowych informacji. Dzieje się tak nawet bez jawnego dodania atrybutu role="img" do SVG.
<div class="section-right">
<svg>...</svg>
</div>
Aby rozwiązać ten problem, musisz najpierw określić, czy zdjęcie ma charakter informacyjny czy dekoracyjny. Zgodnie z tą decyzją musimy dodać do obrazu odpowiedni tekst alternatywny (obraz informacyjny) lub ukryć obraz przed użytkownikami czytników ekranu (obraz dekoracyjny).
Przeanalizowaliśmy zalety i wady najlepszego sposobu kategoryzowania obrazu i uznaliśmy, że ma on charakter dekoracyjny, co oznacza, że chcemy dodać lub zmodyfikować kod, aby ukryć obraz. Szybszym sposobem jest dodanie obiektu role="presentation" bezpośrednio do obrazu SVG. Spowoduje to wysłanie do czytnika ekranu sygnału, że należy pominąć ten obraz i nie umieszczać go w grupie obrazów.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problem 4. Dekoracja punktowa
Jak widzisz, czytnik ekranu odczytuje obraz punktora CSS pod nagłówkiem sekcji poświęconych rzadkim chorobom. Choć nie jest to typowy typ obrazu, omawiane w module Obrazy, należy go jednak zmodyfikować, ponieważ może on zakłócać mogą odwracać uwagę od użytkownika lub dezorientować użytkownika czytnika ekranu.
<p class="bullet">...</p>
Podobnie jak w przypadku omówionego wcześniej obrazu dekoracyjnego, możesz dodać do kodu HTML kod role="presentation" za pomocą klasy punktowanej, aby ukryć go przed czytnikiem ekranu. Podobnie działałaby role="none". Pamiętaj tylko, aby nie używać atrybutu aria-hidden: true, ponieważ spowoduje to ukrycie wszystkich informacji dotyczących akapitu przed użytkownikami czytników ekranu.
<p class="bullet" role="none">...</p>
Problem 5. Pole formularza
Z modułu Formularze dowiedzieliśmy się, że wszystkie formularze pola muszą też mieć etykietę wizualną i automatyczną. Ta etykieta musi pozostać widoczne przez cały czas.
W naszej wersji demonstracyjnej w polu e-mail subskrypcji newslettera brakuje zarówno etykiety wizualnej, jak i automatycznej. Występuje element zastępczy tekstu, ale nie zastępuje on etykiety, ponieważ nie jest trwały i nie jest w pełni zgodny ze wszystkimi czytnikami ekranu.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
Aby rozwiązać ten problem, zastąp zmienną tekstową podobną do etykiety. Element ten jest automatycznie połączony z polem formularza. Ruch został dodany za pomocą JavaScriptu, dzięki czemu etykieta pozostaje widoczna nawet po dodaniu treści do pola.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
Podsumowanie
Gratulacje! Wszystkie testy tej wersji demonstracyjnej zostały ukończone. Wszystkie te zmiany znajdziesz w zaktualizowanej wersji Codepen na potrzeby tej wersji demonstracyjnej.
Teraz możesz wykorzystać zdobytą wiedzę, aby samodzielnie sprawdzić ułatwienia dostępu witryn i aplikacji.
Celem wszystkich testów ułatwień dostępu jest zbadanie jak największej liczby potencjalne problemy, które użytkownik może napotkać. Nie oznacza to jednak, że Twoja witryna czy aplikacja Będą one zawsze dostępne po zakończeniu. Największy sukces osiągniesz projektowanie witryny lub aplikacji z myślą o ułatwieniach dostępu; przez włączenie tych testów do innych testów przed opublikowaniem.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat automatycznego testowania ułatwień dostępu
Jakiego czytnika ekranu najlepiej użyć do testowania ułatwień dostępu?
Jaki jest cel testowania technologii wspomagających osoby z niepełnosprawnością?