W tym module skupiamy się na korzystaniu z technologii wspomagającej osoby z niepełnosprawnością do testowania ułatwień dostępu. Osoba z niepełnosprawnością może używać technologii wspomagających, aby zwiększyć, utrzymać lub poprawić swoje możliwości wykonywania zadań.
W przestrzeni cyfrowej technologie wspomagające mogą być:
- Proste lub mało zaawansowane technologicznie: wskaźniki do ust i głowy, lupy ręczne, urządzenia z dużymi przyciskami
- Technologia: urządzenia aktywowane głosem, urządzenia śledzące wzrok, klawiatury adaptacyjne i myszy
- Sprzęt: przyciski przełączników, klawiatury ergonomiczne, urządzenie brajlowskie z automatycznym odświeżaniem
- Oprogramowanie: programy do zamiany tekstu na mowę, napisy na żywo, czytniki ekranu
Zachęcamy do używania w procesie testowania różnych typów narzędzi AT.
Podstawy testowania czytników ekranu
W tym module skupimy się na jednym z najpopularniejszych cyfrowych narzędzi AT, czyli czytnikach ekranu. Czytnik ekranu to oprogramowanie, które odczytuje kod źródłowy witryny lub aplikacji. Następnie przekształca te informacje w mowę lub tekst w brajlu dla użytkownika.
Czytniki ekranu są niezbędne dla osób niewidomych i głuchoniewidomych, ale mogą też być przydatne dla osób niedowidzących, z zaburzeniami czytania i niepełnosprawnością poznawczą.
Zgodność z przeglądarką
Dostępnych jest wiele opcji czytników ekranu. Najpopularniejsze czytniki ekranu to JAWS, NVDA i VoiceOver na komputery oraz VoiceOver i Talkback na urządzenia mobilne.
W zależności od systemu operacyjnego, ulubionej przeglądarki i używanego urządzenia najlepszym wyborem może być jeden z czytników ekranu. Większość czytników ekranu jest tworzona z myślą o konkretnych urządzeniach i przeglądarkach. Jeśli używasz czytnika ekranu z przeglądarką, dla której nie został on skalibrowany, możesz napotkać więcej „błędów” lub nieoczekiwanych zachowań. Czytniki ekranu działają najlepiej w tych kombinacjach:
| Czytnik ekranu | System operacyjny | Zgodność z przeglądarką |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome i Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome i Firefox |
| VoiceOver (na urządzenia mobilne) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
Polecenia czytnika ekranu
Po prawidłowym skonfigurowaniu oprogramowania czytnika ekranu na komputerze lub urządzeniu mobilnym zapoznaj się z dokumentacją czytnika ekranu (link w tabeli powyżej) i wypróbuj niektóre podstawowe polecenia czytnika ekranu, aby poznać tę technologię. Jeśli używasz już czytnika ekranu, wypróbuj nowy.
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 odtworzenie doświadczeń użytkownika czytnika ekranu. Dzięki podstawowej wiedzy, kilku poleceniom czytnika ekranu i trochę (lub dużo) praktyki możesz wiele zdziałać.
Jeśli chcesz lepiej poznać wrażenia użytkowników korzystających z czytników ekranu i innych technologii wspomagających, możesz skontaktować się z wieloma organizacjami i osobami, aby uzyskać te cenne informacje. Pamiętaj, że używanie technologii wspomagającej do testowania kodu pod kątem zgodności z określonym zestawem reguł i pytanie użytkowników o ich wrażenia często daje różne wyniki. Oba te aspekty są ważne przy tworzeniu w pełni dostępnych produktów.
Polecenia klawiszy dla czytników ekranu na komputerze
| Element | NVDA (Windows), | VoiceOver (macOS) |
|---|---|---|
| Klawisze poleceń ogólnych | Wstaw | Control+Option |
| Wyłącz dźwięk | Sterowanie | Sterowanie |
| Czytaj następny/poprzedni | ↓ 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 formularzy | P | Control+Option+Command+J |
| Tabele | T | Control+OptionCommand+T |
| W tabelach | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
Polecenia klawiszowe dla mobilnych czytników ekranu
| Element | TalkBack (Android) | VoiceOver (iOS), |
|---|---|---|
| Odkrywaj | Przeciągnij jednym palcem po ekranie. | Przeciągnij jednym palcem po ekranie. |
| Wybieranie lub aktywowanie | Dwukrotne dotknięcie | Dwukrotne dotknięcie |
| Przesuwanie w górę lub w dół | Przesuń w górę lub w dół 2 palcami | Przesuń w górę lub w dół trzema palcami |
| 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 |
Prezentacja testowania czytnika ekranu
Aby przetestować wersję demonstracyjną, użyliśmy przeglądarki Safari na laptopie z systemem macOS i nagraliśmy 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 opisanego w tym module.
Krok 1
Odwiedź zaktualizowany CodePen, w którym zastosowano wszystkie automatyczne i ręczne 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
Włącz wybrany czytnik ekranu i otwórz stronę demonstracyjną. Zanim skupisz się na konkretnych problemach, możesz przejrzeć całą stronę od góry do dołu.
Nagraliśmy działanie czytnika ekranu w przypadku każdego problemu przed wprowadzeniem poprawek i po ich wprowadzeniu w wersji demonstracyjnej. Zachęcamy do przetestowania wersji demonstracyjnej za pomocą własnego czytnika ekranu.
Problem 1. Struktura treści
Nagłówki i punkty orientacyjne to jeden z głównych sposobów poruszania się po stronie 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 spróbujesz nawigować za pomocą któregokolwiek z tych elementów w wersji demonstracyjnej, szybko odkryjesz, że 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 zmian wizualnych, ale korzystanie z czytnika ekranu będzie znacznie wygodniejsze.
Naprawmy to.
Niektóre niedostępne elementy nie są widoczne na pierwszy rzut oka. Z modułu Struktura treści możesz pamiętać, jak ważne są poziomy nagłówków i semantyczny kod HTML. Treść może wyglądać jak nagłówek, ale w rzeczywistości jest otoczona stylizowanym znakiem <div>.
Aby rozwiązać problem z nagłówkami i elementami 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ą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 zaktualizowane prawidłowo, nie powinno być żadnych zmian wizualnych, ale korzystanie z czytnika ekranu będzie znacznie lepsze.
Problem 2. Kontekst linku
Użytkownikom czytników ekranu należy przekazywać informacje o tym, do czego służy link i czy przekierowuje on do nowej lokalizacji poza witryną lub aplikacją.
W naszej wersji demonstracyjnej naprawiliśmy większość linków, gdy zaktualizowaliśmy tekst alternatywny aktywnego obrazu, ale jest jeszcze kilka linków dotyczących różnych rzadkich chorób, które mogłyby skorzystać z dodatkowego kontekstu, zwłaszcza że przekierowują 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, aktualizujemy kod, dodając więcej informacji bez wpływu na element wizualny. Możemy też dodać dodatkowy tekst wizualny, aby pomóc jeszcze większej liczbie osób, np. tym, które mają problemy z czytaniem i zaburzenia poznawcze.
Możemy rozważyć wiele różnych wzorców, aby dodać dodatkowe informacje o linku. W naszym środowisku, które obsługuje tylko jeden język, etykieta ARIA jest w tej sytuacji prostym rozwiązaniem. Możesz zauważyć, że etykieta ARIA zastępuje oryginalny 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 wykrył wbudowanego kodu SVG, który pełni funkcję głównego obrazu powitalnego na naszej stronie demonstracyjnej. Czytnik ekranu jednak go znajduje i odczytuje jako „obraz” bez dodatkowych informacji.
Dzieje się tak nawet bez wyraźnego dodania atrybutu role="img" do SVG.
<div class="section-right">
<svg>...</svg>
</div>
Aby rozwiązać ten problem, musimy najpierw zdecydować, czy obraz jest informacyjny czy dekoracyjny. Na podstawie tej decyzji musimy dodać odpowiedni tekst alternatywny obrazu (obraz informacyjny) lub ukryć obraz przed użytkownikami czytników ekranu (obraz dekoracyjny).
Rozważyliśmy zalety i wady różnych sposobów kategoryzacji obrazu i uznaliśmy, że jest on dekoracyjny, co oznacza, że chcemy dodać lub zmodyfikować kod, aby go ukryć. Szybkim sposobem jest dodanie role="presentation" bezpośrednio do obrazu SVG. Wysyła to sygnał do czytnika ekranu, aby pominął ten obraz i nie umieszczał go w grupie obrazów.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problem 4. Dekoracja punktora
Być może zauważysz, że czytnik ekranu odczytuje obraz punktu CSS w sekcjach dotyczących rzadkich chorób. Ten obraz nie jest taki sam jak ten, o którym mówiliśmy w module Obrazy, ale nadal musi zostać zmodyfikowany, ponieważ zakłóca przepływ treści i może rozpraszać lub mylić użytkownika czytnika ekranu.
<p class="bullet">...</p>
Podobnie jak w przypadku dekoracyjnego obrazu omówionego wcześniej, możesz dodać do kodu HTML element role="presentation" z klasą bullet, aby ukryć go przed czytnikiem ekranu. Podobnie zadziała role="none". Pamiętaj tylko, aby nie używać tagu
aria-hidden: true, ponieważ spowoduje to ukrycie wszystkich informacji z akapitów przed użytkownikami czytników ekranu.
<p class="bullet" role="none">...</p>
Problem 5. Pole formularza
W module Formularze dowiedzieliśmy się, że wszystkie pola formularza muszą mieć etykietę wizualną i programową. Ta etykieta musi być zawsze widoczna.
W naszej wersji demonstracyjnej brakuje zarówno wizualnej, jak i programowej etykiety w polu e-maila do rejestracji w newsletterze. Istnieje element zastępczy tekstu, ale nie zastępuje on etykiety, ponieważ nie jest widoczny przez cały czas 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 symbol zastępczy tekstu podobnym elementem etykiety. Ten element etykiety jest połączony z polem formularza za pomocą kodu, a ruch został dodany za pomocą JavaScriptu, aby etykieta była widoczna nawet wtedy, gdy do pola dodawana jest treść.
<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! Udało Ci się ukończyć wszystkie testy w tej wersji demonstracyjnej. Wszystkie te zmiany możesz zobaczyć w zaktualizowanym Codepenie dla tej wersji demonstracyjnej.
Teraz możesz wykorzystać zdobytą wiedzę, aby sprawdzić dostępność swoich witryn i aplikacji.
Celem wszystkich tych testów ułatwień dostępu jest wyeliminowanie jak największej liczby problemów, na które użytkownik może natrafić. Nie oznacza to jednak, że po zakończeniu tych działań Twoja witryna lub aplikacja będzie w pełni dostępna. Najlepsze wyniki osiągniesz, projektując witrynę lub aplikację z uwzględnieniem dostępności na każdym etapie procesu i przeprowadzając te testy wraz z innymi testami przedpremierowymi.