W tym module omawiamy korzystanie z technologii wspomagających (AT) do testowania dostępności. Osoba z niepełnosprawnością może korzystać z AT, aby zwiększyć, utrzymać lub poprawić możliwości wykonywania danego zadania.
W przestrzeni cyfrowej mogą to być:
- Niedozwolone lub przestarzałe technologie: patyczki do ust i głowy, lupy ręczne, urządzenia z dużą liczbą przycisków
- Zaawansowane: urządzenia aktywowane głosem, urządzenia do śledzenia ruchów gałek ocznych, klawiatury i 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 korzystania z różnych typów testów automatycznych w całym procesie testowania.
Podstawy testowania czytników ekranu
W tym module skupiamy się na jednym z najpopularniejszych cyfrowych narzędzi wspomagających – czytnikach ekranu. Czytnik ekranu to oprogramowanie, które odczytuje podstawowy kod witryny lub aplikacji i konwertuje te informacje na mowę lub brajla.
Czytniki ekranu są niezbędne dla osób niewidomych i niedowidzących, ale mogą też być przydatne osobom słabowidzącym, z zaburzeniami czytania i niepełnosprawnością umysłową.
Zgodność z przeglądarką
Dostępnych jest kilka opcji czytników ekranu. Najpopularniejsze czytniki ekranu to 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 jest tworzona z myślą o konkretnym sprzęcie i przeglądarkach internetowych. Podczas korzystania z 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 podanych niżej kombinacjach.
Czytnik ekranu | System operacyjny | Zgodność z przeglądarką |
---|---|---|
Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
NVDA (Non-Visual Desktop Access) | Windows | Chrome i Firefox |
Narrator | Windows | Edge |
VoiceOver | macOS | Safari |
Orca | Linux | Firefox |
TalkBack | Android | Chrome i Firefox |
VoiceOver (dla urządzeń mobilnych) | iOS | Safari |
ChromeVox | ChromeOS | Chrome |
Polecenia czytnika ekranu
Po prawidłowej konfiguracji czytnika ekranu na komputerze lub urządzeniu mobilnym zapoznaj się z dokumentacją czytnika ekranu (link do niej znajdziesz w poprzedniej tabeli) i wypróbuj kilka podstawowych poleceń, aby zapoznać się z tą technologią. Jeśli korzystasz już z czytnika ekranu, wypróbuj inny.
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 zrobić wiele, jeśli tylko masz podstawową wiedzę, znasz kilka poleceń czytnika ekranu i masz trochę (lub dużo) praktyki.
Jeśli chcesz dowiedzieć się więcej o wrażeniach użytkowników korzystających z czytników ekranu i innych usług reklamowych, skontaktuj się z wieloma organizacjami i osobami, aby uzyskać te cenne informacje. Pamiętaj, że korzystanie z AT do testowania kodu pod kątem zgodności z zestawem zasad i pytanie użytkowników o ich wrażenia często daje inne wyniki. Oba te aspekty są ważne, aby tworzyć w pełni wszechstronne usługi.
Polecenia klawiszy dla czytników ekranu na komputerach
Element | NVDA (Windows) | VoiceOver (macOS) |
---|---|---|
Klawisze poleceń ogólnych | Wstaw | Control + Option |
Wyłącz dźwięk | Kontrola | Kontrola |
Czytaj dalej/wstecz | ↓ lub ↑ | Control + Option + → lub ← |
Zacznij czytać | Wstaw↓ | Control + Option + A |
Lista elementów/rotor | NVDA + F7 | Control + Option + U |
Punkty orientacyjne | D | Control + Option + U |
Nagłówki | P | Control+Option+Command+H |
Linki | K | Control + Option + Command + L |
Elementy sterujące | P | Control+Option+Command+J |
Tabele | T | Control + OpcjaCommand + T |
W tabelach | Wstaw Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
Polecenia klawiszy dla czytników ekranu na urządzeniach mobilnych
Element | TalkBack (Android) | VoiceOver (iOS) |
---|---|---|
Odkrywaj | Przeciągnij jednym palcem po ekranie. | Przeciągnij jednym palcem po ekranie. |
Wybierz lub aktywuj | Dwukrotne dotknięcie | Dwukrotne dotknięcie |
Przesuń w górę lub w dół | Przesuń w górę lub w dół 2 palcami | Przesuń trzema palcami w górę lub w dół |
Zmień strony | Przesuń 2 palcami w lewo lub w prawo | Przesuń w prawo lub lewo za pomocą 3 palców |
Następny/poprzedni | Przesuń 1 palcem w lewo lub w prawo | Przesuń 1 palcem w lewo lub w prawo |
Demo testowania czytnika ekranu
Aby przetestować naszą wersję demonstracyjną, użyliśmy przeglądarki Safari na laptopie z systemem macOS, aby przechwycić dźwięk. Możesz wykonać te czynności za pomocą dowolnego czytnika ekranu, ale sposób, w jaki napotkasz niektóre błędy, może się różnić od tego, jak jest to opisane w tym module.
Krok 1
Otwórz zaktualizowany plik CodePen, w którym zastosowano automatyczne i ręczne aktualizacje ułatwień dostępu.
Aby przejść do kolejnych testów, wyświetl go w trybie debugowania. Jest to ważne, ponieważ usuwa <iframe>
otaczający stronę internetową demonstracyjną, co może zakłócać działanie niektórych narzędzi testowych. Dowiedz się więcej o trybie debugowania CodePen.
Krok 2
Włącz wybrany czytnik ekranu i otwórz stronę demonstracyjną. Być może warto przyjrzeć się całej stronie od góry do dołu, a dopiero potem skupić się na konkretnych problemach.
Na potrzeby każdego problemu nagraliśmy nasz czytnik ekranu przed zastosowaniem poprawek i po ich zastosowaniu. Zachęcamy do przetestowania wersji demonstracyjnej za pomocą czytnika ekranu.
Problem 1. Struktura treści
Nagłówki i punkty orientacyjne to jedne z głównych sposobów nawigacji za pomocą 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 się poruszać po stronie, korzystając z elementów demo, szybko zauważysz, że ich tam nie ma.
- Przykład punktu orientacyjnego:
<div class="main">...</div>
- Przykład nagłówka:
<p class="h1">Join the Club</p>
Jeśli wszystko zostało zaktualizowane prawidłowo, nie powinno być żadnych wizualnych zmian, ale czytnik ekranu powinien działać znacznie lepiej.
Niektórych niedostępnych elementów nie da się zauważyć, przeglądając witrynę. Jak pamiętasz o znaczeniu poziomów nagłówków i semantycznego kodu HTML z modułu Struktura treści. Treść może wyglądać jak nagłówek, ale jest w rzeczywistości ujęta w stylizowany element <div>
.
Aby rozwiązać problem z nagłówkami i punktami orientacyjnymi, musisz najpierw zidentyfikować każdy element, który powinien być oznaczony jako taki, i zaktualizować powiązany kod HTML. Pamiętaj, aby zaktualizować też powiązany plik CSS.
- Przykład punktu orientacyjnego:
<main>...</main>
- Przykład nagłówka:
<h1>Join the Club</h1>
Jeśli wszystko zostało zaktualizowane prawidłowo, nie powinno być żadnych zmian wizualnych, ale działanie czytnika ekranu powinno się znacznie poprawić.
Problem 2. Linkowanie kontekstu
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 naszym pokazie naprawiliśmy większość linków podczas aktualizowania tekstu alternatywnego aktywnego obrazu, ale jest kilka dodatkowych linków dotyczących różnych rzadkich chorób, które mogłyby zyskać na 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 dla użytkowników czytników ekranu, zaktualizowaliśmy kod, aby dodać więcej informacji bez wpływu na elementy wizualne. Aby pomóc jeszcze większej liczbie osób, na przykład tym z zaburzeniami poznawczymi i czytania, możemy dodać dodatkowy tekst wizualny.
Istnieje wiele różnych wzorów, które możemy zastosować, aby dodać dodatkowe informacje. Ze względu na nasze ś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 oryginalny tekst linku, dlatego 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 naszym module testów automatycznych Lighthouse nie był w stanie wykryć wbudowanego pliku SVG, który pełni rolę głównego obrazu powitalnego na stronie demonstracyjnej. Czytnik ekranu znajdzie jednak ten tekst i ogłosi go jako „obraz” bez dodatkowych informacji.
Dzieje się tak nawet wtedy, gdy nie dodasz atrybutu role="img"
do pliku SVG.
<div class="section-right">
<svg>...</svg>
</div>
Aby rozwiązać ten problem, musimy najpierw określić, czy obraz jest informacyjny czy dekoracyjny. W związku z tym musimy dodać odpowiedni tekst alternatywny dla obrazu (obraz informacyjny) lub ukryć obraz przed użytkownikami czytników ekranu (obraz dekoracyjny).
Przeanalizowaliśmy zalety i wady różnych sposobów kategoryzowania obrazu i zawniosliśmy, że jest on ozdobny, co oznacza, że chcemy dodać lub zmodyfikować kod, aby go ukryć. Szybkim sposobem jest dodanie obiektu role="presentation"
bezpośrednio do obrazu SVG. Czytnik ekranu otrzymuje sygnał, że ma pominąć ten obraz i nie uwzględniać go w grupie obrazów.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problem 4. Ozdoba na liście wypunktowanej
Być może zauważysz, że czytnik ekranu odczytuje obrazek z obrazem w ramce w sekcji dotyczącej rzadkich chorób. Chociaż nie jest to tradycyjny typ obrazu, o którym rozmawialiśmy w module Obrazy, należy go zmodyfikować, ponieważ zakłóca on przepływ treści i może rozpraszać lub dezorientować użytkownika czytnika ekranu.
<p class="bullet">...</p>
Podobnie jak w przypadku obrazu ozdobnego, o którym była mowa wcześniej, możesz dodać do kodu HTML element role="presentation"
z klasą symbolu, aby ukryć go przed czytnikiem ekranu. Podobnie działa role="none"
. Pamiętaj tylko, aby nie używać znaku aria-hidden: true
, ponieważ w przeciwnym razie ukrywasz całą treść akapitu przed użytkownikami korzystającymi z czytników ekranu.
<p class="bullet" role="none">...</p>
Problem 5. Pole formularza
Z modułu Formularze dowiedzieliśmy się, że wszystkie pola formularza muszą mieć też etykietę wizualną i programową. Ta etykieta musi być zawsze widoczna.
W naszym pliku demo brakuje etykiety wizualnej i programowej w polu e-maila do rejestracji na newsletter. Jest element zastępczy z tekstem, ale nie zastępuje on etykiety, ponieważ nie jest widoczny stale 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 element zastępczy tekstowy elementem etykiety o podobnej nazwie. Ten element etykiety jest połączony z polem formularza za pomocą kodu JavaScript. Dzięki temu etykieta pozostaje widoczna, nawet gdy dodasz do pola nowe treści.
<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 sprawdzić ułatwienia dostępu w swoich witrynach i aplikacjach.
Celem wszystkich tych testów ułatwień dostępu jest rozwiązanie jak największej liczby problemów, na jakie może wejść użytkownik. Nie oznacza to jednak, że po zakończeniu procesu witryna lub aplikacja będzie w pełni dostępna. Najlepsze efekty osiągniesz, jeśli w trakcie całego procesu projektowania witryny lub aplikacji będziesz mieć na uwadze dostępność, a testy dostępności będziesz uwzględniać w ramach innych testów przed uruchomieniem.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat automatycznego testowania ułatwień dostępu
Który czytnik ekranu jest najlepszy do testowania ułatwień dostępu?
Jaki jest cel testowania za pomocą technologii wspomagającej?