Jak włączyć ułatwienia dostępu w procesie zespołu.
Poprawa dostępności witryny może być trudnym zadaniem. Jeśli dopiero zaczynasz swoją przygodę z ułatwieniami dostępu, szeroki zakres omawianych zagadnień sprawia, że zastanawiasz się, od czego zacząć. W końcu uwzględnienie różnorodnych umiejętności oznacza konieczność rozważenia odpowiednio zróżnicowanego zakresu problemów.
Pamiętaj, że ułatwienia dostępu to wysiłek zespołowy. Każdy człowiek ma swoje zadanie. W tym artykule przedstawiamy kryteria dla każdej z głównych dyscyplin (menedżer projektu, projektant UX i dewelopera), aby umożliwić uwzględnienie w swoim procesie sprawdzonych metod związanych z ułatwieniami dostępu.
Menedżer projektu
Nadrzędnym celem każdego kierownika projektu jest uwzględnianie ułatwień dostępu na każdym etapie pracy. Upewnij się, że jest to priorytet na równi z innymi zagadnieniami, takimi jak wydajność czy wrażenia użytkownika. Poniżej znajdziesz kilka wskazówek, o których warto pamiętać, analizując swój proces.
- Udostępnij zespołowi szkolenie z zakresu ułatwień dostępu.
- Określ kluczowe ścieżki użytkowników w witrynie lub aplikacji.
- Spróbuj włączyć do pracy zespołowej listę kontrolną ułatwień dostępu.
- W miarę możliwości oceń witrynę lub aplikację za pomocą badań opinii użytkowników.
Szkolenie na temat ułatwień dostępu
Istnieje wiele świetnych bezpłatnych materiałów na temat ułatwień dostępu w internecie. Przeznaczenie zespołu na zgłębienie omawianego tematu może ułatwić uwzględnienie ułatwień dostępu na wczesnym etapie procesu.
Materiały udostępnione przez Google to między innymi:
Ułatwienia dostępu w internecie od Google – kilkutygodniowy interaktywny kurs szkoleniowy.
Podstawy ułatwień dostępu – pisemne przewodniki i sprawdzone metody dotyczące ułatwień dostępu.
Material Guidelines: Accessibility – zbiór sprawdzonych metod dotyczących UX dla projektowania promującego integrację społeczną.
Identyfikowanie najważniejszych ścieżek użytkowników
Każda aplikacja zawiera jakieś główne działanie, które musi wykonać użytkownik. Jeśli np. tworzysz aplikację e-commerce, każdy użytkownik musi mieć możliwość dodania produktu do koszyka.
Niektóre działania mogą mieć drugorzędne znaczenie i być może wykonywane tylko sporadycznie. Na przykład zmiana awatara to fajna funkcja, ale nie musi być konieczna we wszystkich usługach.
Zidentyfikowanie głównych i dodatkowych działań w aplikacji pomoże Ci priorytetowo traktować ułatwienia dostępu. Później możesz połączyć te działania z listą kontrolną ułatwień dostępu, aby śledzić swoje postępy i uniknąć regresji.
Wprowadzanie listy kontrolnej ułatwień dostępu
Tematyka ułatwień dostępu jest bardzo szeroka, więc stworzenie listy kontrolnej ważnej kwestii do rozważenia pomoże Ci zadbać o to, by uwzględnić wszystkie podstawowe zagadnienia.
Istnieje wiele list kontrolnych dotyczących ułatwień dostępu, na przykład:
Lista kontrolna WebAIM WCAG Wytyczne dotyczące ułatwień dostępu Vox
Mając listę kontrolną, możesz przyjrzeć się głównym i dodatkowym działaniom, aby określić, co jeszcze zostało do zrobienia. Możesz opanować ten proces bardzo taktycznie, a nawet stworzyć macierz działań głównych i dodatkowych, a potem określić każdy etap tego procesu, niezależnie od tego, czy brakuje jakichś informacji o ułatwieniach dostępu.
Ocena na podstawie badań opinii użytkowników
Nic nie zastąpi spotkania z rzeczywistymi użytkownikami i obserwacją, jak korzystają z aplikacji. Jeśli dostosowujesz ułatwienia dostępu do dotychczasowych rozwiązań, ten proces pomoże Ci szybko zidentyfikować obszary wymagające poprawy. A jeśli rozpoczynasz nowy projekt, możesz skorzystać z badań opinii użytkowników, aby uniknąć poświęcania zbyt dużej ilości czasu na opracowywanie funkcji, która jest trudna w obsłudze.
Staraj się korzystać z opinii jak najszerszej grupy użytkowników. Weź pod uwagę użytkowników, którzy korzystają głównie z klawiatury lub technologii wspomagających, takich jak czytniki ekranu czy lupy.
projektant UX
Ponieważ ludzie często projektują, kierując się własnymi uprzedzeniami, jeśli nie jesteś osobą niepełnosprawną i nie masz współpracowników z niepełnosprawnościami, możesz nieumyślnie projektować reklamy tylko dla niektórych użytkowników. W czasie pracy zadaj sobie pytanie „Jakie typy użytkowników mogą polegać na tym projekcie?” Oto kilka metod, które możesz wykorzystać, aby zwiększyć integrację społeczną w swoim procesie.
- Treści mają wystarczający kontrast kolorów.
- Kolejność kart jest zdefiniowana.
- Elementy sterujące mają dostępne etykiety.
- Z UI możesz korzystać na kilka sposobów.
Treści mają dobry kontrast kolorów
Głównym celem większości witryn jest przekazanie użytkownikowi pewnych informacji w postaci tekstu lub obrazów. Jednak treści o niskim kontraście mogą być trudne do czytania dla niektórych użytkowników (zwłaszcza tych z wadami wzroku). Może to negatywnie wpłynąć na wygodę użytkowników. Aby rozwiązać ten problem, zadbaj o to, aby cały tekst i obrazy miały wystarczający kontrast kolorów.
Kontrast jest mierzony przez porównanie luminancji koloru pierwszego planu i koloru tła. W przypadku mniejszych tekstów (poniżej 18 punktów lub pogrubienia 14 punktów) zalecany jest minimalny współczynnik 4,5:1. W przypadku większego tekstu współczynnik proporcji można ustawić na 3:1.
Na poniższej ilustracji tekst z lewej strony spełnia te minimalne wymagania, a tekst po prawej ma niski kontrast.
Istnieje wiele narzędzi do pomiaru kontrastu kolorów, np. Material Color Tool firmy Google, aplikacja Współczynnik kontrastu Lea Verou i aXe firmy Deque.
Kolejność kart jest zdefiniowana
Kolejność kart to kolejność, w jakiej elementy są zaznaczone, gdy użytkownik naciska klawisz Tab. W przypadku użytkowników, którzy poruszają się przede wszystkim za pomocą klawiatury, klawisz Tab to podstawowy sposób przechodzenia do wszystkich elementów na ekranie. Można myśleć o nim jak o kursorach myszy.
Kolejność kart powinna być taka sama jak kolejność czytania, od góry do dołu strony – ważniejsze elementy powinny być umieszczone wyżej. Dzięki temu każdy, kto używa klawiatury, może szybko znaleźć te elementy.
Powyższy interfejs przykładowy jest numerowany tak, aby można było pokazać kolejność kart. Stworzenie takiej makiety może pomóc w określeniu kolejności kart. Możesz go potem udostępnić programistom i testerom kontroli jakości, by sprawdzić, czy kod został prawidłowo zaimplementowany i przetestowany.
Elementy sterujące mają etykiety z ułatwieniami dostępu
W przypadku osób korzystających z technologii wspomagających osoby z niepełnosprawnością, takich jak czytniki ekranu, etykiety dostarczają informacji, które w innym przypadku byłyby jedynie wizualne. Na przykład przycisk wyszukiwania będący ikoną lupy może mieć dostępną etykietę „Szukaj”, która pomaga uzupełnić brakujące elementy wizualne.
Oto kilka prostych wskazówek, którymi należy się kierować podczas projektowania łatwo dostępnych etykiet:
- Zachowaj zwięzłość – słuchanie długich opisów może być męczące.
- Staraj się nie dodawać typu ani stanu elementu sterującego – jeśli element sterujący jest poprawnie zakodowany, czytnik ekranu odczyta to automatycznie.
- Koncentracja na czasownikach zachęcających do działania – używaj słowa „Szukaj”, a nie „lupa”.
Możesz utworzyć próbkę z oznaczonymi wszystkimi opcjami. Możesz go udostępnić zespołowi programistów i zespołu kontroli jakości w celu wdrożenia i testowania.
Różne sposoby interakcji z interfejsem i jego rozumienia
Można łatwo przypuszczać, że wszyscy użytkownicy korzystają ze strony głównie za pomocą myszy. Podczas projektowania zastanów się, jak użytkownik będzie używać elementu sterującego przy użyciu klawiatury.
Zaplanuj stany skupienia. Oznacza to, że można określić, jak będzie wyglądał element sterujący, gdy użytkownik zaznaczy go klawiszem Tab lub naciśnie klawisze strzałek. Dobrze jest zaplanować te stany odpowiednio wcześnie, zamiast wkrótce je nakręcić na etapie projektowania.
I wreszcie, pamiętaj, że każdy punkt interakcji powinien być łatwy do zrozumienia przez użytkownika. Staraj się nie przekazywać informacji tylko kolorem, ponieważ użytkownicy z niepełnosprawnością barw mogą przeoczyć te subtelne wskazówki. Klasyczny przykład to nieprawidłowe pole tekstowe. Zamiast tylko podkreślać problem na czerwono, zastanów się nad dodaniem tekstu pomocniczego. W ten sposób uwzględnisz więcej podstaw i zwiększysz prawdopodobieństwo, że użytkownik zauważy problem.
Deweloper
Rola programisty polega na połączeniu zarządzania koncentracją i semantyki, aby zapewnić użytkownikom doskonałe wrażenia. Oto kilka kwestii, o których powinni pamiętać programiści podczas pracy nad witryną lub aplikacją:
- Kolejność kart jest logiczna.
- Ostrość jest odpowiednio zarządzana i widoczna.
- Elementy interaktywne mają obsługę klawiatury.
- Role i atrybuty ARIA są stosowane w razie potrzeby.
- Elementy są prawidłowo oznaczone.
- Testowanie jest automatyczne.
Logiczna kolejność kart
Elementy natywne, takie jak input, button i select, są bezpłatnie uwzględniane w kolejności kart i można je automatycznie zaznaczyć za pomocą klawiatury. Ale nie wszystkie elementy
działają tak samo! Elementy ogólne, takie jak div i span, nie są uwzględnione w kolejności kart. Oznacza to, że jeśli do utworzenia interaktywnego elementu sterującego używasz elementu div, musisz wykonać dodatkowe czynności, aby udostępnić go za pomocą klawiatury.
Dostępne są 2 opcje:
- Przyznaj elementowi kontroli
tabindex="0". Umożliwi to przynajmniej skupienie się na klawiszach, ale prawdopodobnie będzie trzeba wykonać dodatkową pracę, aby dodać obsługę naciśnięć klawiszy. - Tam, gdzie to możliwe, w przypadku każdego elementu sterującego przypominającego przycisk używaj elementu
buttonzamiastdivlubspan. Natywny elementbuttonjest bardzo łatwy w użyciu i bezpłatnie obsługuje klawiaturę.
Zarządzanie koncentracją
Zmieniając treść strony, pamiętaj, aby skierować uwagę użytkownika, przenosząc koncentrację. Klasycznym przykładem zastosowania tej techniki jest otwarcie okna modalnego. Jeśli użytkownik, który polega na naciśnięciu klawiatury, naciśnie przycisk, aby otworzyć okno, a jego zaznaczenie nie zostanie przeniesione do elementu okna, jedynym działaniem będzie przeglądanie całej witryny za pomocą klawisza Tab, aż w końcu znajdzie nowy element sterujący. Przenosząc priorytety na nowe treści, gdy tylko się pojawią, możesz zwiększyć wygodę użytkowników.
Obsługa elementów interaktywnych za pomocą klawiatury
Jeśli tworzysz element sterujący, np. karuzelę lub menu, musisz wykonać dodatkowe czynności, aby dodać obsługę klawiatury. Przewodnik po metodach tworzenia ARIA to przydatny zasób, w którym można rozpoznać różne wzorce interfejsu użytkownika i obsługiwane działania na klawiaturze.
Więcej informacji o dodawaniu do elementów obsługi klawiatury znajdziesz w sekcji roving tabindex w dokumentacji Google dotyczącej podstaw ułatwień dostępu.
Role i atrybuty ARIA są stosowane w razie potrzeby
Niestandardowe elementy sterujące wymagają nie tylko prawidłowej obsługi klawiatury, ale również odpowiedniej semantyki. W końcu div jest z perspektywy semantycznej po prostu ogólnym kontenerem grupującym. Jeśli używasz menu div jako podstawy, musisz polegać na ARIA, aby dodać dodatkową semantykę, aby typ elementu sterującego można było przekazać do technologii wspomagającej. Tutaj również Przewodnik po metodach tworzenia ARIA może pomóc w określeniu, które role, stany i właściwości powinny być używane.
Wiele wyjaśnień w przewodniku ARIA zawiera też przykładowy kod.
Oznaczanie elementów etykietami
Do oznaczania etykietami natywnych danych wejściowych możesz użyć wbudowanego elementu <label> zgodnie z opisem w MDN. Nie tylko pomoże Ci to stworzyć awansowaną reklamę na ekranie, ale też nada wpisanym informacjom nazwę na potrzeby ułatwień dostępu w drzewie ułatwień dostępu. Nazwa ta jest następnie odczytywana przez technologię wspomagającą osoby z niepełnosprawnością (np. czytnik ekranu) i zapowiadana użytkownikowi.
Funkcja <label> nie obsługuje nadawania łatwo dostępnych nazw kontrolom niestandardowym (takim jak te utworzone za pomocą elementów niestandardowych lub prostych elementów div i spanów). Aby mieć dostęp do tego typu ustawień, musisz użyć atrybutów aria-label i aria-labelledby.
Testy automatyczne
Lenistwo może być dobre, zwłaszcza jeśli chodzi o testowanie. W miarę możliwości staraj się zautomatyzować testy ułatwień dostępu, aby nie musieć robić wszystkiego ręcznie. Istnieje obecnie wiele świetnych narzędzi do testowania w branży, które ułatwiają i szybkie sprawdzanie typowych problemów z ułatwieniami dostępu:
Komponent aXe utworzony przez systemy Deque jest dostępny jako rozszerzenie do Chrome i moduł węzłów (dobrze sprawdza się w przypadku środowisk ciągłej integracji). W tym krótkim filmie A11ycast opisujemy kilka różnych sposobów włączenia aXe w proces programowania.
Lighthouse to projekt Google typu open source służący do kontroli wydajności progresywnych aplikacji internetowych. Poza sprawdzeniem, czy Twoja aplikacja PWA obsługuje elementy takie jak Service Worker i plik manifestu aplikacji internetowych, Lighthouse uruchomi też serię sprawdzonych metod, w tym testy dotyczące problemów z ułatwieniami dostępu.
Podsumowanie
Ułatwienia dostępu to wysiłek zespołowy. Każdy ma do odegrania swoją rolę. W tym przewodniku omówiliśmy kilka kluczowych elementów, których każdy członek zespołu może używać, aby szybko zająć się tym tematem i poprawić ogólną wygodę korzystania z aplikacji.
Aby dowiedzieć się więcej o ułatwieniach dostępu, zapoznaj się z naszym bezpłatnym kursem Udacity i przejrzyj dokumentację na temat ułatwień dostępu dostępną na stronie web.dev.