Jak rozpocząć testowanie swojej witryny za pomocą czytnika ekranu?

Opublikowany: 2022-04-19

Nie ma wątpliwości, jak ważne jest tworzenie dostępnych stron internetowych. To stały temat dyskusji w społeczności webdesignerów. I moim zdaniem większość projektantów chce to zrobić dobrze.

Dostępność wpływa na nas wszystkich w taki czy inny sposób. Niezależnie od tego, czy chodzi o konkretne słowa użyte w poście na blogu, czy o możliwość poruszania się między stronami – to ma znaczenie.

Ale jeśli nie jesteś osobą, która korzysta z technologii wspomagających, takich jak czytnik ekranu, może nastąpić rozłączenie. Zbyt łatwo przeoczyć, jak dana funkcja wpływa na użytkowników. Jest tak prawdopodobnie dlatego, że nie testowaliśmy tego w tym kontekście.

Przyznaję, że walczyłem w tej dziedzinie. I obstawiam, że jest wielu innych projektantów, którzy też mają. Moje przywileje jako widzącego użytkownika, który nawiguje za pomocą myszy, nie zawsze skłaniały mnie do rozważenia kilku ważnych aspektów dostępności.

To prawda, testuję za pomocą zautomatyzowanych narzędzi. Dbam o to, aby czcionki były czytelne, kontrast kolorów zgodny ze standardami WCAG, a obrazy wykorzystują atrybut ALT. To wszystko są dobre rzeczy. Jednak nie reprezentują one pełnego doświadczenia korzystania z witryny internetowej.

Jak więc przenieść sprawy na wyższy poziom? Testowanie witryny za pomocą czytnika ekranu to świetny sposób na rozpoczęcie. Przyjrzyjmy się początkującemu, co się z tym wiąże. Stamtąd podzielę się tym, co znalazłem podczas moich eksperymentów.

Znajdź aplikację do czytania ekranu

Pierwszym krokiem w tym procesie jest znalezienie odpowiedniej aplikacji do czytania ekranu. Być może nie będziesz musiał iść daleko, ponieważ niektóre systemy operacyjne domyślnie je zawierają.

Użytkownicy komputerów Mac mają dostęp do VoiceOver, a użytkownicy systemu Windows mogą korzystać z Narratora. Ponadto istnieje kilka innych opcji dostępnych dla praktycznie każdego systemu operacyjnego. Ze swojej strony wybieram aplikację NVDA o otwartym kodzie źródłowym. Jest darmowy (wspierany przez darowizny) i jest jednym z bardziej popularnych wyborów.

Niezależnie od wybranej aplikacji ważne jest, aby mieć podstawową wiedzę na temat jej działania. Ponadto może być konieczne wcześniejsze wprowadzenie kilku poprawek. Na przykład chcesz się upewnić, że rozumiesz, co jest czytane. Możesz również chcieć, aby oprogramowanie wyróżniało treść podczas czytania, co ułatwia śledzenie.

WebAIM przygotował kilka przydatnych przewodników dotyczących konfigurowania różnych czytników ekranu do celów testowych. Dzięki nim będziesz w dobrej pozycji, aby zobaczyć, jak dostępna jest Twoja witryna.

Strona główna oprogramowania czytnika ekranu NVDA.

Poruszanie się

Teraz, gdy masz gotowy sprawdzony czytnik ekranu, nadszedł czas na testy! Aby poznać wrażenia użytkownika, spróbuj przeglądać różne części swojej witryny za pomocą klawiatury z włączonym czytnikiem ekranu.

Niektóre polecenia klawiaturowe są bardziej uniwersalne niż inne. Na przykład klawisz TAB przeniesie Cię do różnych linków i kontrolek formularzy, podczas gdy ENTER przeniesie Cię do miejsca docelowego linku. Większość wydaje się używać klawiszy strzałek, aby przejść od linii do linii.

Mogą jednak istnieć pewne specjalne polecenia, które są specyficzne dla aplikacji czytnika ekranu. Pozwalają na nawigację między nagłówkami, punktami orientacyjnymi, takimi jak nagłówki i stopki itp. W tym celu warto zapoznać się z ich dokumentacją.

Warto również zauważyć, że skuteczne poruszanie się w ten sposób wymaga praktyki. Pierwsze kilka prób może być trochę niezręczne. Ale kiedy już opanujesz różne polecenia, wszystko powinno stać się bardziej intuicyjne.

Czytnik ekranu podświetla bieżącą linię na stronie autora.

Moje doświadczenie z czytnikiem ekranu

Żeby oczyścić powietrze – nie jestem ekspertem w dziedzinie czytników ekranu. Moja wiedza jest w najlepszym razie szczątkowa. Ale moje doświadczenie z NVDA było pouczające.

Jako poligon doświadczalny wykorzystałem kilka stron mojej biznesowej strony internetowej. I to, co znalazłem, niekoniecznie było poważnymi wadami. Tekst można było przeczytać i można było nawigować po witrynie.

Raczej odkryłem pewne przykrości – rzeczy, które, co zrozumiałe, frustrowałyby użytkowników. Przyjrzyjmy się kilku przykładom:

Suwak, który przerywa

W wywiadzie dla eksperta ds. dostępności, Taylor Arndt, wspomniała o karuzeli/pokazie slajdów jako o funkcjach, które mogą zaszkodzić dostępności. Testowanie za pomocą czytnika ekranu wysuwa to na pierwszy plan.

Automatyczna karuzela, której użyłem, była nawigacyjna, ale miała paskudny zwyczaj ogłaszania się za każdym razem, gdy pojawiał się następny slajd. To bardzo utrudniało czytnikowi ekranu dotarcie do innych sekcji strony przed przerwaniem.

Znalazłem dość proste rozwiązanie. Używany przeze mnie suwak WordPress (Soliloquy) ma opcję zmiany regionu na żywo ARIA na mniej agresywne ustawienie. To, w połączeniu z ręczną nawigacją karuzeli, pozbyło się uciążliwości.

Powtarzający się tekst

Używanie atrybutu ALT z obrazami to powszechna wskazówka dotycząca ułatwień dostępu. Jednak w przypadku obrazów czysto dekoracyjnych podanie tekstu opisowego może być zbędne. Wpadłem na to przy kilku różnych okazjach.

Głównym winowajcą były wpisy na blogu. Zarówno tytuł posta, jak i atrybuty ALT polecanego obrazu były identyczne – co oznacza, że ​​czytnik ekranu przeczytał je dwukrotnie. W rezultacie nawet stosunkowo krótka lista wpisów powoduje bolesny UX.

Punktem spornym jest to, że blok z listami postów WordPress, którego użyłem, nie ma opcji pozostawienia pustych atrybutów ALT. W związku z tym może być wymagane obejście.

Karuzela i powtarzający się tekst ALT zapewniają mniej niż idealne wrażenia użytkownika.

Dowiedz się, jak dostępność witryn internetowych działa w praktyce

Tworzenie stron internetowych zgodnych ze standardami WCAG daje satysfakcję – i to właśnie powinniśmy robić jako projektanci stron internetowych. Ale zaznaczanie pól na liście rzeczy do zrobienia nie mówi wszystkiego.

Lepsze zrozumienie tego, jak inni odbiorą Twoją pracę, wymaga trochę dodatkowego wysiłku. Testowanie za pomocą czytnika ekranu zapewnia ścieżkę do uzyskania dokładniejszego wglądu. I chociaż nie jest to kompletny przewodnik, mam nadzieję, że pomoże wzbudzić Twoje zainteresowanie i eksperymentować.

Jak się przekonałem, nawet jeśli przedmiot jest uważany za dostępny literą normy, nie oznacza to, że jest łatwy w użyciu. Dlatego opłaca się kopać trochę głębiej. Może to być różnica między witryną, która służy jedynie do użytku, a taką, która zapewnia najlepsze możliwe wrażenia.

Uwaga: Jak wspomniano powyżej, jestem nowicjuszem, jeśli chodzi o tę technologię. Jeśli chcesz podzielić się wskazówkami dotyczącymi czytnika ekranu, skontaktuj się ze mną za pośrednictwem Twittera.