Ten moduł dotyczy testowania ułatwień dostępu za pomocą technologii wspomagających osoby z niepełnosprawnością (AT). Osoby z niepełnosprawnościami mogą korzystać z funkcji AT, aby pomagać w zwiększaniu, utrzymywaniu lub ulepszaniu możliwości wykonywania zadań.
W świecie cyfrowym mogą to być:
- Nie-nowoczesne: pałeczki do głowy i ust, lupy ręczne, urządzenia z dużymi przyciskami
- Zaawansowane technologie: urządzenia aktywowane głosem, urządzenia śledzące ruch gałek ocznych, klawiatury/myszy adaptacyjne
- Sprzęt: przyciski przełączania, ergonomiczne klawiatury, 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 próśb o zgodę na testy w ramach ogólnego procesu testowania.
Podstawy testowania czytnika ekranu
W tym module skupimy się na jednym z najpopularniejszych cyfrowych czytników AT, czyli czytnikach ekranu. Czytnik ekranu to program, który odczytuje podstawowy kod strony internetowej lub aplikacji i przekształca te informacje na mowę lub brajl.
Czytniki ekranu są niezbędne dla osób niewidomych i niewidomych, ale mogą też być przydatne dla osób niedowidzących, mających problemy z czytaniem lub z zaburzeniami poznawczymi.
Zgodność z przeglądarką
Dostępnych jest kilka opcji czytnika ekranu. Obecnie najpopularniejszymi czytnikami ekranu są JAWS, NVDA i VoiceOver na komputery oraz VoiceOver i TalkBack na urządzeniach mobilnych.
W zależności od systemu operacyjnego, ulubionej przeglądarki i używanego urządzenia jeden czytnik ekranu może być najlepszym wyborem. Większość czytników ekranu została zaprojektowana pod kątem określonego sprzętu i przeglądarek. Gdy używasz czytnika ekranu w przeglądarce, która nie została skalibrowana, możesz napotkać więcej „błędów” lub nieoczekiwanego działania. Czytniki ekranu działają najlepiej w podanych niżej kombinacjach.
Polecenia czytnika ekranu
Po skonfigurowaniu swojego czytnika ekranu pod kątem komputera lub urządzenia mobilnego zapoznaj się z jego dokumentacją (link znajdziesz w poprzedniej tabeli) i zapoznaj się z podstawowymi poleceniami czytnika ekranu, aby zapoznać się z tą technologią. Jeśli korzystasz już z czytnika ekranu, wypróbuj nowy.
Gdy używasz czytnika ekranu do testowania ułatwień dostępu, Twoim celem jest wykrycie problemów w kodzie, które zakłócają korzystanie z witryny lub aplikacji, a nie emulowanie działania czytnika ekranu. Można więc zdobyć tak dużo wiedzy, jaką dysponujesz, mając do dyspozycji kilka poleceń czytnika ekranu, i odrobinę – lub też dużo – praktyki.
Jeśli chcesz lepiej poznać wrażenia użytkowników korzystających z czytników ekranu i innych tytułów zawodowych, możesz nawiązać kontakt z wieloma organizacjami i osobami fizycznymi, aby uzyskać te cenne informacje. Pamiętaj, że korzystanie z usług operatora w celu przetestowania kodu pod kątem zestawu reguł i zapytania użytkowników o wrażenia użytkowników często przynosi inne efekty. Oba te aspekty są ważnymi aspektami tworzenia produktów, które promują integrację społeczną.
Skróty klawiszowe do czytników ekranu
Skróty klawiszowe do czytników ekranu urządzeń mobilnych
Wersja demonstracyjna testowania czytnika ekranu
Aby przetestować naszą prezentację, 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 niektóre błędy mogą występować w inny sposób niż opisany w tym module.
Krok 1
Otwórz zaktualizowany program CodePen, na którym zastosowano wszystkie automatyczne i ręczne aktualizacje ułatwień dostępu.
Aby kontynuować kolejne testy, wyświetl go w trybie debugowania. To ważne, ponieważ usuwa element <iframe> otaczający stronę demonstracyjną, co może zakłócać działanie niektórych narzędzi testowych. Dowiedz się więcej o trybie debugowania w CodePen.
Krok 2
Aktywuj wybrany czytnik ekranu i otwórz stronę demonstracyjną. Zanim skupisz się na konkretnych problemach, możesz przejrzeć całą stronę z góry na dół.
Zapisaliśmy nasz czytnik ekranu w przypadku każdego problemu, przed zastosowaniem poprawek i po nim. Zachęcamy do obejrzenia wersji demonstracyjnej przy użyciu własnego czytnika ekranu.
Problem 1. Struktura treści
Nagłówki i punkty orientacyjne to jedne z głównych sposobów nawigowania przez 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 sprawić frustrację. Jeśli spróbujesz nawigować według któregokolwiek z elementów w wersji demonstracyjnej, szybko się dowiesz, że go 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 to spowodować żadnych zmian w wyglądzie, ale interfejs czytnika ekranu znacznie się poprawił.
Naprawmy to.
Niektórych niedostępnych elementów nie da się zauważyć, patrząc tylko na witrynę. Być może pamiętasz, jak ważne są poziomy nagłówków i semantyczny kod HTML z modułu Struktura treści. Fragment treści może wyglądać jak nagłówek, ale w rzeczywistości jest zawarty w stylizowanym elemencie <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ć 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 zaktualizowane prawidłowo, nie powinno to spowodować żadnych zmian w wyglądzie, ale interfejs czytnika ekranu znacznie się poprawił.
Problem 2. Kontekst linku
Ważne jest, aby użytkownicy czytników ekranu wiedzieli, do czego służy link i czy przekierowuje go do nowej lokalizacji poza witryną lub aplikacją.
W wersji demonstracyjnej poprawiliśmy większość linków, gdy zaktualizowaliśmy tekst alternatywny aktywnego obrazu, ale są też linki do informacji na temat różnych rzadkich chorób, które mogą odnieść korzyści 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 w przypadku użytkowników czytników ekranu, aktualizujemy kod, dodając więcej informacji bez wpływu na element wizualny. Z kolei, aby pomóc jeszcze większej liczbie osób, na przykład z zaburzeniami czytania i zaburzeń poznawczych, możemy dodać tekst wizualny.
Istnieje wiele różnych wzorców, które możemy uwzględniać w informacjach o linkach. Dzięki naszemu prostemu środowisku, które obsługuje tylko jeden język, w tej sytuacji etykieta ARIA jest dobrym rozwiązaniem. Możesz zauważyć, że etykieta ARIA zastępuje tekst oryginalnego linku, więc pamiętaj o uwzględnieniu tych informacji 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 module automatycznego testowania aplikacji Lighthouse nie udało się znaleźć wbudowanego pliku SVG, który działa jako główny obraz powitalny na naszej stronie demonstracyjnej. Czytnik ekranu wykrywa jednak ten obraz i oznacza go jako „obraz” bez dodatkowych informacji. Dzieje się tak nawet bez wyraźnego dodania do SVG atrybutu role="img".
<div class="section-right">
<svg>...</svg>
</div>
Aby rozwiązać ten problem, musisz najpierw zdecydować, czy obraz jest informatywny czy dekoracyjny. W zależności od tej decyzji trzeba dodać odpowiedni tekst zastępczy obrazu (obraz informujący) lub ukryć obraz przed użytkownikami czytników ekranu (dekoracyjny).
Wzięliśmy pod uwagę wady i zalety tego, jak najlepiej skategoryzować obraz, i uznaliśmy, że jest to elementy dekoracyjne, czyli trzeba dodać lub zmodyfikować kod tak, aby go ukryć. Najszybszą metodą jest dodanie elementu role="presentation" bezpośrednio do obrazu SVG. Spowoduje to wysłanie do czytnika ekranu sygnału, że należy pominąć ten obraz i nie umieścić go w grupie obrazów.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
4. Ozdobniki punktorów
Być może zauważyłeś, że czytnik ekranu odczytuje obraz punktu CSS w sekcji „Rzadkie choroby”. Mimo że nie jest to tradycyjny typ obrazu, o którym rozmawialiśmy w module Obrazy, obraz i tak musi zostać zmodyfikowany, ponieważ zakłóca przepływ treści i może rozproszyć lub zdezorientować użytkownika czytnika ekranu.
<p class="bullet">...</p>
Podobnie jak w przypadku wspomnianego wcześniej przykładu obrazu dekoracyjnego, możesz dodać do kodu HTML element role="presentation" z klasą punktora, aby ukryć go przed czytnikiem ekranu. I podobnie, powinien działać tag role="none". Tylko nie używaj aria-hidden: true, ponieważ spowoduje to ukrycie wszystkich informacji o akapicie 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 formularzy muszą też mieć etykietę wizualną i zautomatyzowaną. Ta etykieta musi być zawsze widoczna.
W wersji demonstracyjnej w polu e-mail służącym do subskrypcji newslettera brakuje zarówno etykiety wizualnej, jak i automatycznej. Zawiera tekst zastępczy, który nie zastępuje etykiety, ponieważ nie jest wizualnie trwała i nie jest w pełni zgodna z niektórymi 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 obiekt zastępczy tekstu podobnym elementem etykiety. Ten element etykiety jest automatycznie połączony z polem formularza, a ruch został dodany za pomocą kodu JavaScript, aby etykieta była widoczna nawet po dodaniu do pola 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 zakończone. Wszystkie te zmiany możesz zobaczyć w zaktualizowanym Codepen w tej wersji demonstracyjnej.
Teraz możesz wykorzystać zdobytą wiedzę do sprawdzania ułatwień dostępu na swoich stronach i w aplikacjach.
Celem wszystkich tych testów ułatwień dostępu jest rozwiązanie jak największej liczby problemów, które użytkownik może napotkać. Nie oznacza to jednak, że po zakończeniu tych czynności Twoja witryna lub aplikacja będą dostępne w pełni. Aby osiągnąć największy sukces, zaprojektuj witrynę lub aplikację tak, aby była dostępna w całym procesie, i włącz te testy do innych testów przed opublikowaniem.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat automatycznego testowania ułatwień dostępu
Jaki czytnik ekranu najlepiej sprawdzi się w przypadku testowania ułatwień dostępu?
Jaki jest cel testowania przy użyciu technologii wspomagających osoby z niepełnosprawnością?