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 AT mogą 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, ergonomiczne klawiatury, automatycznie odświeżające 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 urządzenia, którego używasz, jeden czytnik ekranu może być najlepszym wyborem. Większość czytników ekranu jest tworzona z myślą o konkretnym sprzęcie i przeglądarkach internetowych. Jeśli używasz czytnika ekranu z przeglądarką, która nie została skalibrowana, możesz napotkać więcej „błędów” lub nieoczekiwanych zachowań. 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.
Podczas testowania dostępności za pomocą czytnika ekranu Twoim celem jest wykrycie problemów w kodzie, które utrudniają korzystanie z witryny lub aplikacji, a nie emulowanie działania 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 lepiej poznać wrażenia użytkowników korzystających z czytników ekranu i innych narzędzi ułatwiających dostęp, możesz skontaktować się z wielu organizacjami i osobami, aby uzyskać 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 są istotnymi aspektami tworzenia produktów w pełni promującej integrację społeczną.
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 | H | Control + Option + Command + H |
| Linki | K | Control + Option + Command + L |
| Elementy sterujące | P | Control + Option + Command + J |
| Tabele | C | Control + Option Command + T |
| W tabelach | WstawAlt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
Polecenia klawiszy w czytnikach ekranu 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ępna/poprzednia | Przesuń 1 palcem w lewo lub w prawo | Przesuń 1 palcem w lewo lub w prawo |
Wersja demonstracyjna 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
Odwiedź zaktualizowaną wersję CodePen, w której zostały zastosowane wszystkie automatyczne i ręczne ułatwienia dostępu.
Aby przejść do kolejnych testów, wyświetl go w trybie debugowania. To ważne, ponieważ powoduje usunięcie elementu <iframe> otaczającego stronę internetową demonstracyjną, co może zakłócać działanie niektórych narzędzi do testowania. Dowiedz się więcej o trybie debugowania w 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.
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 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 wywołać frustrację.
Jeśli będziesz próbować przechodzić do kolejnych elementów w wersji demonstracyjnej, szybko zauważysz, że elementy te nie istnieją.
- 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.
Napraw to.
Niektórych niedostępnych elementów nie można zauważyć, po prostu przeglądając witrynę. Z modułu Struktura treści możesz pamiętać, jak ważne są poziomy nagłówków i semantyzacja HTML. 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 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. Kontekst linku
Ważne jest, aby użytkownicy czytników ekranu mieli dostęp do informacji o celu linku i o tym, czy przekierowuje on do nowej lokalizacji 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 większej liczbie osób, na przykład osobom z zaburzeniami czytania lub poznania, możemy dodać dodatkowy tekst wizualny.
Istnieje wiele różnych wzorów, które możemy zastosować, aby dodać dodatkowe informacje. W naszym środowisku, które obsługuje tylko jeden język, etykieta ARIA jest w tej sytuacji prostą opcją. 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 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 jednak znajduje taki element i informuje o nim 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 najlepszego sposobu kategoryzacji obrazu i uznaliśmy, że ma on charakter dekoracyjny, co oznacza, że chcemy dodać lub zmodyfikować kod, aby go ukryć. Szybką metodą jest dodanie 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
W module Formularze dowiedzieliśmy się, że wszystkie pola formularzy muszą też mieć etykietę wizualną i automatyczną. 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ć dostępność swoich witryn i aplikacji.
Celem wszystkich testów ułatwień dostępu jest rozwiązanie jak największej liczby problemów, z którymi użytkownik może się potencjalnie spotkać. Nie oznacza to jednak, że po zakończeniu korzystania z Twojej witryny lub aplikacji będą one w pełni dostępne. 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?