Jak uwzględnić ułatwienia dostępu w procesie zespołu.
Zwiększanie dostępności witryny może być trudnym zadaniem. Jeśli dopiero zaczynasz zajmować się dostępnością, możesz mieć problem z ustaleniem, od czego zacząć. W końcu dostosowanie się do potrzeb osób z różnymi niepełnosprawnościami oznacza, że trzeba wziąć pod uwagę wiele różnych kwestii.
Pamiętaj, że ułatwianie dostępu to praca zespołowa. Każdy ma swoją rolę do odegrania. W tym artykule opisano kryteria dla poszczególnych głównych dziedzin (zarządzanie projektem, projektowanie UX i programowanie), aby umożliwić im stosowanie sprawdzonych metod ułatwiania dostępu w ramach ich pracy.
Menedżer projektu
Najważniejszym celem każdego kierownika projektu jest uwzględnienie prac nad dostępnością w ramach każdego etapu, a także zapewnienie, aby stanowiły one priorytet na równi z innymi tematami, takimi jak wydajność czy komfort użytkownika. Poniżej znajdziesz kilka elementów listy kontrolnej, o których warto pamiętać podczas wykonywania poszczególnych czynności.
- Udostępnij zespołowi szkolenie dotyczące ułatwień dostępu.
- Określ kluczowe ścieżki użytkowników w witrynie lub aplikacji.
- Spróbuj włączyć do procesu zespołowego listę kontrolną ułatwień dostępu.
- W miarę możliwości przeprowadź badania opinii użytkowników dotyczące witryny lub aplikacji.
Szkolenie dotyczące ułatwień dostępu
Dostępnych jest wiele bezpłatnych materiałów, które pomogą Ci poznać ułatwienia dostępu w internecie. Wyznaczenie czasu na zapoznanie się z tematem może ułatwić uwzględnienie ułatwień dostępu na wczesnym etapie procesu.
Google udostępnia m.in. te zasoby:
Web Accessibility by Google (Web Accessibility by Google) – kilkutygodniowy interaktywny kurs szkoleniowy.
Podstawy ułatwień dostępu – napisane przewodniki i sprawdzone metody dotyczące ułatwień dostępu.
Wskazówki dotyczące Material Design: ułatwienia dostępu – zestaw sprawdzonych metod dotyczących projektowania z uwzględnieniem wszystkich użytkowników.
Identyfikowanie najważniejszych ścieżek użytkownika
Każda aplikacja ma jakieś podstawowe działanie, które użytkownik musi wykonać. Jeśli na przykład tworzysz aplikację e-commerce, każdy użytkownik musi mieć możliwość dodania produktu do koszyka.
Niektóre działania mogą być mniej ważne i być wykonywane tylko sporadycznie. Zmiana zdjęcia awatara to przydatna funkcja, ale nie zawsze jest niezbędna.
Określenie działań głównych i dodatkowych w aplikacji pomoże Ci ustalić priorytety w zakresie dostępności. Później możesz połączyć te działania z listą kontrolną ułatwień dostępu, aby śledzić postępy i uniknąć regresji.
Włączanie listy kontrolnej ułatwień dostępu
Temat dostępności jest dość szeroki, więc posiadanie listy kontrolnej ważnych kwestii może pomóc Ci upewnić się, że uwzględniasz wszystkie aspekty.
Dostępnych jest wiele list kontrolnych ułatwień dostępu. Oto kilka przykładów:
WebAIM WCAG Checklist Wytyczne dotyczące dostępności Vox
Dzięki tej liście możesz przejrzeć działania główne i dodatkowe, aby określić, co jeszcze wymaga zrobienia. Możesz podejść do tego procesu bardzo taktycznie i nawet utworzyć matrycę działań głównych i dodatkowych oraz określić na każdym etapie tych procesów, czy brakuje w nich elementów ułatwień dostępu.
Ocena za pomocą badań opinii użytkowników
Nic nie zastąpi możliwości obserwowania rzeczywistych użytkowników podczas korzystania z aplikacji. Jeśli wprowadzasz ulepszenia dostępności w już istniejącej aplikacji, ten proces pomoże Ci szybko zidentyfikować obszary wymagające poprawy. Jeśli rozpoczynasz nowy projekt, wczesne badania użytkowników mogą pomóc Ci uniknąć poświęcania zbyt wiele czasu na tworzenie funkcji, która jest trudna w użyciu.
Staraj się uwzględniać opinie jak największej liczby użytkowników. Weź pod uwagę użytkowników, którzy głównie korzystają z klawiatury lub technologii wspomagających, takich jak czytniki ekranu czy powiększacze ekranu.
projektant UX
Ludzie mają tendencję do projektowania z uwzględnieniem własnych uprzedzeń, więc jeśli nie masz niepełnosprawności i nie masz współpracowników z niepełnosprawnością, możesz nieumyślnie projektować tylko dla niektórych użytkowników. Podczas pracy zastanów się, jakie typy użytkowników mogą korzystać z tego projektu. Oto kilka technik, które możesz wykorzystać, aby proces był bardziej inkluzywny.
- Treści mają wystarczający kontrast kolorów.
- zdefiniowana jest kolejność kart;
- Elementy sterujące mają etykiety dostępne dla czytników ekranu.
- Interakcję z interfejsem można prowadzić na wiele sposobów.
Treści mają dobry kontrast kolorów.
Głównym celem większości witryn jest przekazanie użytkownikowi pewnych informacji za pomocą tekstu lub obrazów. Jeśli jednak te treści mają niski kontrast, niektórzy użytkownicy (zwłaszcza osoby z uszkodzeniem wzroku) mogą mieć trudności z ich odczytaniem. Może to negatywnie wpłynąć na wygodę użytkowników. Aby rozwiązać ten problem, zadbaj o odpowiednie kontrasty kolorów tekstu i obrazów.
Kontrast jest mierzony przez porównanie luminacji koloru pierwszego planu i tła. W przypadku mniejszego tekstu (poniżej 18 punktów w przypadku zwykłego lub 14 punktów w przypadku pogrubionego) zalecany jest minimalny współczynnik 4,5:1. W przypadku większego tekstu ten współczynnik można dostosować do 3:1.
Na obrazku poniżej tekst po lewej stronie spełnia te minimalne wymagania kontrastu, a tekst po prawej stronie ma niski kontrast.
Do pomiaru kontrastu kolorów można użyć różnych narzędzi, takich jak Material Color Tool Google, aplikacja Contrast Ratio Lea Verou i aXe firmy Deque.
Zdefiniowano kolejność kart
Kolejność elementów to kolejność, w jakiej elementy otrzymują fokus, gdy użytkownik naciska klawisz Tab. W przypadku użytkowników, którzy poruszają się głównie za pomocą klawiatury, klawisz tabulacji jest głównym sposobem na dotarcie do wszystkich elementów na ekranie. Możesz to traktować jak kursor myszy.
W idealnej sytuacji kolejność kart powinna odpowiadać kolejności czytania i przemieszczania się po stronie od góry do dołu, a bardziej istotne elementy powinny znajdować się wyżej. Dzięki temu użytkownicy, którzy korzystają z klawiatury, mogą szybciej dotrzeć do tych elementów.
W tym mockupie interfejsu numery wskazują kolejność kart. Możesz utworzyć taki mockup, aby określić planowaną kolejność kart. Następnie możesz udostępnić go programistom i testerom QA, aby upewnić się, że został prawidłowo wdrożony i przetestowany.
elementy sterujące mają etykiety dostępne dla czytników ekranu;
Użytkownicy technologii wspomagających, takich jak czytniki ekranu, mogą dzięki etykietom uzyskać informacje, które w innej sytuacji byłyby dostępne tylko wizualnie. Na przykład przycisk wyszukiwania, który ma tylko ikonę lupy, może mieć etykietę ułatwiającą dostępność „Szukaj”, aby uzupełnić brakujące wizualne atrybuty.
Oto kilka prostych sugestii dotyczących projektowania etykiet ułatwiających dostępność:
- Bądź zwięzły – długie opisy mogą być nudne.
- Nie dołączaj typu ani stanu elementu sterującego. Jeśli element jest prawidłowo zakodowany, czytnik ekranu automatycznie go ogłosi.
- Skup się na czasownikach wskazujących działanie – używaj słowa „wyszukiwanie”, a nie „lupa”.
Możesz rozważyć utworzenie makiety ze wszystkimi oznaczonymi elementami sterującymi. Możesz udostępnić je zespołowi programistów i zespołowi ds. kontroli jakości na potrzeby implementacji i testowania.
Wiele sposobów na interakcję z interfejsem i jego zrozumienie
Łatwo założyć, że wszyscy użytkownicy korzystają z strony głównie za pomocą myszy. Podczas projektowania zastanów się, jak użytkownik będzie mógł wchodzić w interakcję z elementem sterującym za pomocą klawiatury.
Planuj stany skupienia Oznacza to określenie, jak element sterujący będzie wyglądał, gdy użytkownik przejdzie na niego kursorem lub naciśnie klawisze strzałek. Warto wcześniej zaplanować te stany, zamiast próbować wcisnąć je w projekt później.
Na koniec sprawdź, czy w przypadku każdego punktu interakcji użytkownik ma kilka sposobów na zrozumienie treści. Nie używaj kolorów jako jedynego sposobu przekazywania informacji, ponieważ subtelne wskazówki mogą umknąć użytkownikom z zaburzeniami rozpoznawania barw. Klasycznym przykładem jest nieprawidłowe pole tekstowe. Zamiast czerwonego podkreślenia, które oznacza problem, możesz też dodać tekst pomocniczy. W ten sposób zwiększysz prawdopodobieństwo, że użytkownik zauważy problem.
Deweloper
Rola dewelopera polega na połączeniu zarządzania punktem skupienia i semantyzacji w celu zapewnienia użytkownikom niezawodnego działania. Oto kilka kwestii, o których powinni pamiętać programiści podczas tworzenia witryny lub aplikacji:
- Kolejność kart jest logiczna.
- ostrość jest odpowiednio zarządzana i widoczna;
- Elementy interaktywne obsługują klawiaturę.
- Role i atrybuty ARIA są stosowane w razie potrzeby.
- Elementy są odpowiednio opisane.
- Testowanie jest zautomatyzowane.
Logiczny porządek kart
Elementy natywne, takie jak input, button i select, są bezpłatnie dodawane do kolejności kart i automatycznie skupiane za pomocą klawiatury. Nie wszystkie elementy działają jednak w ten sam sposób. W szczególności elementy ogólne, takie jak div i span, nie są uwzględniane w kolejności kart. Oznacza to, że jeśli użyjesz elementu div do utworzenia elementu sterującego, musisz dodatkowo zadbać o to, aby był on dostępny z klawiatury.
Dostępne są 2 opcje:
- Nadaj elementowi sterującemu nazwę
tabindex="0". Dzięki temu będzie można ją zaznaczyć, ale prawdopodobnie będzie trzeba wykonać dodatkowe czynności, aby dodać obsługę naciśnięć klawiszy. - W miarę możliwości używaj tagu
buttonzamiastdivlubspanw przypadku elementów sterujących podobnych do przycisków. Element natywnybuttonjest bardzo łatwy do sformatowania i obsługuje bezpłatnie klawiaturę.
Zarządzanie ostrością
Gdy zmieniasz zawartość strony, ważne jest, aby zwrócić uwagę użytkownika przez przeniesienie punktu skupienia. Klasycznym przykładem zastosowania tej techniki jest otwieranie okna modalnego. Jeśli użytkownik korzystający z klawiatury naciśnie przycisk, aby otworzyć okno dialogowe, a punkt skupienia nie zostanie przeniesione do elementu okna dialogowego, jedyną możliwością będzie przewijanie całej witryny za pomocą klawisza tabulacji, aż znajdzie nowy element sterujący. Przeniesienie punktu skupienia na nowych treściach, gdy tylko się pojawią, może zwiększyć efektywność wrażeń użytkowników.
Obsługa klawiatury w przypadku elementów interaktywnych
Jeśli tworzysz element sterujący niestandardowy, np. karuzel lub menu, musisz wykonać dodatkowe czynności, aby dodać obsługę klawiatury. Przewodnik po praktykach dotyczących tworzenia treści ARIA to przydatne źródło informacji, które zawiera różne wzorce interfejsu użytkownika oraz rodzaje działań na klawiaturze, które powinny być obsługiwane.
Więcej informacji o dodawaniu obsługi klawiatury do elementu znajdziesz w sekcji przemieszczający się indeks tablicy w dokumentach Google o podstawach ułatwień dostępu.
Role i atrybuty ARIA są stosowane w razie potrzeby
Elementy sterujące niestandardowe wymagają nie tylko odpowiedniego wsparcia klawiatury, ale też odpowiedniej semantyki. W końcu div to semantycznie tylko ogólny kontener grupowania. Jeśli używasz elementu div jako podstawy menu rozwijanego, musisz polegać na ARIA, aby dodać dodatkową semantykę, która umożliwi przekazanie typu kontrolera do technologii wspomagających. W tym przypadku pomocny może być przewodnik po praktykach autorskich ARIA, który wskazuje, których ról, stanów i właściwości należy używać.
Dodatkowo wiele wyjaśnień w przewodniku ARIA zawiera też przykładowy kod.
Oznaczanie elementów etykietami
Do oznaczania danych natywnych możesz użyć wbudowanego elementu <label>, jak opisano na stronie MDN. Pozwoli Ci to nie tylko utworzyć wizualne ułatwienie na ekranie, ale też nadać nazwę, która będzie dostępna w drzewie ułatwień. Ta nazwa jest następnie rozpoznawana przez technologię wspomagającą (np. czytnik ekranu) i ogłaszana użytkownikowi.
Niestety <label> nie obsługuje nadawania nazwy dostępnej dla osób z ograniczonymi możliwościami percepcji dla elementów niestandardowych (takich jak elementy utworzone za pomocą elementów niestandardowych lub za pomocą prostych elementów div i span). W przypadku tego rodzaju ustawień musisz użyć atrybutów aria-label i aria-labelledby.
Testowanie automatyczne
Lenistwo może być dobre, zwłaszcza jeśli chodzi o testowanie. W miarę możliwości automatyzuj testy ułatwień dostępu, aby nie trzeba było wykonywać wszystkich czynności ręcznie. Obecnie istnieje wiele świetnych narzędzi testowych, które ułatwiają i przyspieszają sprawdzanie typowych problemów z dostępnością:
Narzędzie aXe, opracowane przez Deque systems, jest dostępne jako rozszerzenie Chrome i moduł Node (dobrze sprawdza się w środowiskach ciągłej integracji). Ten krótki podcast A11ycast wyjaśnia, jak w kilka różnych sposobów uwzględnić aXe w procesie tworzenia.
Lighthouse to projekt Google typu open source służący do przeprowadzania audytów wydajności progresywnych aplikacji internetowych. Lighthouse sprawdza, czy PWA obsługuje m.in. Service Worker i plik manifestu aplikacji internetowej. Przeprowadza też serię testów sprawdzających przestrzeganie sprawdzonych metod, w tym testy problemów z ułatwieniami dostępu.
Podsumowanie
Ułatwienia dostępu to praca zespołowa. Każdy ma swoją rolę do odegrania. W tym przewodniku znajdziesz kilka kluczowych informacji, które każdy członek zespołu może wykorzystać, aby szybko poznać ten temat i poprawić ogólne wrażenia z aplikacji.
Aby dowiedzieć się więcej o ułatwieniach dostępu, obejrzyj naszą bezpłatną lekcję na Udacity i zapoznaj się z dokumentacją na temat ułatwień dostępu dostępną na stronie web.dev.