Co nowego w WCAG 2.1

W skrócie

Cel

Urządzenia mogą być używane w dowolnej orientacji

Co zrobić

Nie ograniczaj prezentacji treści do orientacji pionowej lub poziomej.

Dlaczego to jest ważne

Użytkownicy wózków inwalidzkich i inne osoby mogą mieć urządzenia zamontowane w ustalonej orientacji.

Przykład persony — Komik z porażeniem mózgowym poruszający się na wózku inwalidzkim:

Problem

Nie mogę obrócić tabletu – jest przymocowany do wózka inwalidzkiego.

Poprawne działanie

Aplikacja działa niezależnie od tego, czy podłączę tablet poziomo, czy pionowo.

W skrócie

Cel

Wypełnianie formularzy jest łatwiejsze

Co robić

Użyj kodu, aby wskazać cel typowych danych wejściowych, jeśli pozwala na to technologia.

Dlaczego to jest ważne

Niektóre osoby z niepełnosprawnością poznawczą mogą nie rozumieć celu danych wejściowych na podstawie samej etykiety.

Przykład persony — Asystentka w supermarkecie z dysleksją i dyskalkulią:

Problem

Mój adres jest bardzo skomplikowany. Jest mnóstwo liczb i długich słów. Trudno to wszystko przepisać bez popełniania błędów.

Poprawne działanie

Uwielbiam strony internetowe, które mogą automatycznie wypełnić to wszystko za mnie. Wtedy nie muszę tak ciężko pracować, aby uzyskać poprawną pisownię i liczby.
Uwaga: to działa, ponieważ pola używają autouzupełniania.

W skrócie

Cel

Wypełnianie formularzy jest łatwiejsze

Co robić

Użyj kodu, aby wskazać cel typowych danych wejściowych, jeśli pozwala na to technologia.

Dlaczego to jest ważne

Niektóre osoby z niepełnosprawnością poznawczą mogą nie rozumieć celu danych wejściowych na podstawie samej etykiety.

Przykład persony — Gracz z zaburzeniami przetwarzania języka:

Problem

Mam oprogramowanie, które zamienia słowa w nawigacji na symbole. W przypadku niektórych stron internetowych w ogóle to nie działa.

Poprawne działanie

Z niektórymi stronami internetowymi działa całkiem nieźle.

W skrócie

Cel

Treść można powiększać bez zwiększania długości wiersza.

Co robić

Umożliwiaj ponowne wlewanie wierszy tekstu w rzutni.

Dlaczego jest to ważne

Osoby, które potrzebują większego tekstu, mają trudności z przewijaniem, aby przeczytać długie wiersze.

Przykład persony — Rodzic słabowidzący – 20/400:

Problem

Czytanie tekstu jest prawie niemożliwe, jeśli muszę przewijać w prawo i w lewo, aby przeczytać każdą linię. To dezorientujące i tracę orientację. Utrudnia to zrozumienie tego, co czytam.

Poprawne działanie

Zwiększyłem rozmiar tekstu o 400%, a tekst został ponownie wyświetlony w szerokości okna. Mogę go łatwo przeczytać bez przewijania w przód i w tył.

Objaśnienie KS Dopasowanie do ekranu

W skrócie

Cel

Ważne informacje wizualne spełniają ten sam minimalny kontrast wymagany dla większego tekstu.

Co robić

Zapewnij współczynnik kontrastu znaczących wskazówek wizualnych 3:1 w stosunku do tła.

Dlaczego jest to ważne

Niektórzy ludzie nie widzą elementów o niskim kontraście.

Przykład persony — Senior z małą wrażliwością na kontrast:

Problem

Nie mogłem użyć »Formularza zamówienia« — nie było pól tekstowych. Po długiej rozmowie z działem obsługi klienta dowiedziałem się, że obramowania pól tekstowych były zbyt jasne, bym mógł je zobaczyć.

Poprawne działanie

Łatwo jest mi zobaczyć wszystkie ikony, przyciski i wszystko — nawet w świetle słonecznym.

Objaśnienie KS Kontrast elementów nietekstowych

W skrócie

Cel

Użytkownicy mogą dostosować odstępy w tekście, aby ułatwić czytanie.

Zadanie twórcy

Upewnij się, że treść dostosowuje się do ustawień tekstu zdefiniowanych przez użytkownika

Dlaczego jest to ważne

Niektóre osoby potrzebują tekstu z innymi odstępami lub czcionkami.

Przykład persony — Student z dysleksją:
oraz Senior ze słabym wzrokiem:

Problem

Większość tekstu jest trudna do odczytania. Jest tak zaśmiecony, że nie mogę się skupić. Samo zwiększenie odstępów między wierszami robi różnicę. Kiedy jestem naprawdę zmęczony, zwiększam również odstępy między słowami. Jednak niektóre strony internetowe nie działają poprawnie — część tekstu zostaje ucięta, a nawet przyciski znikają.

Poprawne działanie

OK, wiem, że jestem trochę maniakiem, ale udoskonaliłem arkusz stylów użytkownika, aby odstępy w tekścir były dla mnie odpowiednie. To ulga, gdy strony internetowe dobrze współpracują z moim CSS.

W skrócie

Cel

Więcej użytkowników może dostrzec i odrzucić nietrwałe treści.

Co zrobić

Jeśli najechanie kursorem lub fokus powoduje zmiany treści, upewnij się, że interakcja jest przewidywalna.

Dlaczego jest to ważne

Nieprzewidywalna treść tymczasowa może być dla niektórych trudna do wykorzystania, a innym może przeszkadzać.

Przykład persony — Nauczyciel ze słabym wzrokiem korzystający z oprogramowania do powiększania ekranu:

Problem

Poruszałem myszką, aby śledzić, na co patrzę na stronie internetowej. Pomaga mi to utrzymać koncentrację. Wtedy - bum - pojawiło się to małe okienko. Zasłaniało to, co próbowałem przeczytać i nie mogłem go usunąć.

Poprawne działanie

Najechałem kursorem na słowo i wyskoczyło okienko z definicją, ale przy moim powiększeniu było ono w większości poza ekranem. Przesunąłem wskaźnik myszy na pole definicji i przewinąłem powiększony obszar do pola definicji, które pozostało wyświetlone i mogłem je przeczytać.

W skrócie

Cel

Ogranicz przypadkową aktywację jednoznakowych skrótów klawiaturowych.

Co zrobić

Zapewnij możliwość wyłączenia lub modyfikacji jednoznakowych skrótów klawiaturowych.

Dlaczego to jest ważne

Jednoznakowe skróty klawiaturowe można łatwo przypadkowo uruchomić, szczególnie podczas wprowadzania mowy.

Przykład persony — Reporter z powtarzającymi się urazami stresowymi, który korzysta z oprogramowania do rozpoznawania mowy:

Problem

Kiedy korzystałem z aplikacji poczty za pomocą poleceń głosowych, ciągle usuwała ona wiadomości zamiast je otwierać.
Uwaga: Istniał klawisz skrótu do usuwania, który był wyzwalany przez coś, o czym mówił dziennikarz, i nie było możliwości wyłączenia skrótów klawiszowych.

Poprawne działanie

W mojej aplikacji arkusza kalkulacyjnego istnieje ustawienie umożliwiające wyłączenie lub modyfikację skrótów klawiszowych.

W skrócie

Cel

Użytkownicy nie tracą danych z powodu nieznanych limitów czasu.

Co zrobić

Poinformuj użytkowników, jak długo ich sesja może być nieaktywna, zanim utracą informacje.

Dlaczego to jest ważne

Osoby z niepełnosprawnością mogą potrzebować więcej czasu na wykonanie działań.

Przykład persony — Pomocnik na placu szkolnym z niepełnosprawnością intelektualną:

Problem

Wybierałem świadczenia pracownicze i porównywałem różne plany. Kiedy wróciłem, aby wybrać plan zdrowotny, upłynął limit czasu i utraciłem wszystkie informacje, które już wprowadziłem.

Poprawne działanie

Kiedy uruchomiłem aplikację Employee Benefits, aplikacja poinformowała mnie, ile minut zostało mi na wypełnienie formularzy.

W skrócie

Cel

Ruch nie przeszkadza ani nie rozprasza użytkowników.

Co zrobić

Obsługuj preferencje użytkownika dotyczące ruchu i eliminuj niepotrzebne efekty ruchu.

Dlaczego to jest ważne

Ludzie mogą cierpieć na chorobę ruchu.

Przykład persony — Artysta z zaburzeniami przedsionkowymi:

Problem

W aplikacji podatkowej online, gdy poruszam myszką lub przechodzę do różnych pól, podąża za mną po ekranie mały dymek z aktualnym saldem. Przyprawia mnie to o zawroty głowy i mdłości.

Poprawne działanie

Bardzo się ucieszyłem, że istnieje możliwość wyłączenia animacji.

W skrócie

Cel

Użytkownicy mogą obsługiwać ekrany dotykowe jednym palcem i ograniczyć liczbę gestów.

Co zrobić

Zapewnij jednopunktową obsługę wszystkich funkcji.

Dlaczego to jest ważne

Nie każdy może wykonywać złożone i wielodotykowe gesty.

Przykład persony — Komik z porażeniem mózgowym, który ma ograniczenia ruchu w palcach :

Problem

Nie mogę poruszać palcami w ten sposób. Potrzebuję innego sposobu na powiększenie mapy.

Poprawne działanie

Dobrze, że są przyciski do powiększania i pomniejszania.

W skrócie

Cel

Ograniczenie przypadkowego aktywowania kontrolek myszą lub dotykiem.

Co zrobić

Spraw, aby anulowanie wskazania było przewidywalne i spójne.

Dlaczego to jest ważne

Ułatw każdemu powrót do stanu poprzedniego po czymś, czego nie chciał zrobić.

Przykład persony — Polityk z niepełnosprawnością ruchową i słabym wzrokiem:

Problem

Chciałem nacisnąć przycisk « »Wycisz» i przypadkowo zamiast tego przycisku dotknąłem «Zakończ połączenie». Połączenie natychmiast się rozłączyło.

Poprawne działanie

W innej aplikacji do konferencji internetowych, jeśli przypadkowo dotknę przycisku «Zakończ połączenie», mogę po prostu zsunąć palec z przycisku «Zakończ połączenie» i połączenie nie zostanie zakończone.

W skrócie

Cel

Widoczne etykiety kontrolek są wyzwalaczem aktywacji mowy.

Co zrobić

Tam, gdzie jest to możliwe, należy dopasować etykietę tekstową i nazwę kontrolki.

Dlaczego to jest ważne

Osoby posługujące się interakcją głosową używają widocznych etykiet w swoich poleceniach

Przykład persony — Reporter z powtarzającym się urazem stresowym, który używa oprogramowania do rozpoznawania głosu:

Problem

Rozumiał większość moich poleceń głosowych, dopóki nie dotarłem do przycisku «Wyślij». Powtarzałem «Wyślij» i nie działało.
Uwaga: Wizualnie było to oznaczone jako «Wyślij», ale «nazwa» w kodzie brzmiała «Prześlij».

Poprawne działanie

Działałoby, gdyby «nazwa» w kodzie zaczynała się od «Prześlij».

W skrócie

Cel

Treść nie jest zależna od możliwości poruszania urządzeniem przez użytkownika.

Co robić

Nie polegaj wyłącznie na ruchu urządzenia, aby kontrolować treść strony.

Dlaczego to jest ważne

Niektóre osoby nie mogą stabilnie trzymać ani przesuwać urządzenia.

Przykład persony — Komik z porażeniem mózgowym poruszający się na wózku inwalidzkim:

Problem

Nie mogę potrząsnąć telefonem; jest podłączony do mojego wózka inwalidzkiego. Musi więc istnieć inny sposób aktywacji tej funkcji, na przykład przycisk

Mam trzęsące się ręce, więc muszę wyłączyć aktywację ruchem — a następnie móc robić rzeczy bez aktywacji ruchem.

Poprawne działanie

Moja przyjaciółka ma taką fajną aplikację, która wygląda jak fizyczna blokada obrotu. Obraca telefonem, by wybrać kombinację. Mogę użyć tej samej aplikacji, wpisując numery bezpośrednio.

W skrócie

Cel

Sterowanie jest łatwiejsze, zwłaszcza na ekranach dotykowych.

Co zrobić

Ustaw niestandardowe cele o wymiarach co najmniej 44 na 44 piksele.

Dlaczego to jest ważne

Niektórzy ludzie nie mogą dotykać małych obiektów.

Przykład persony — Senior z drżeniem rąk (i dużymi palcami):

Problem

Wtedy muszę zacząć wszystko od nowa.Przyciski są tak blisko, że wybierając «Prześlij», klikam «Anuluj». Wtedy muszę zacząć wszystko od nowa.

Poprawne działanie

Pomiędzy przyciskami jest więcej miejsca, więc nie nacisnę niewłaściwego przycisku, nawet gdy jadę autobusem po wyboistej drodze.

W skrócie

Cel

Użytkownicy mogą wybierać różne sposoby wprowadzania treści.

Co zrobić

Nie uniemożliwiaj użytkownikom przełączania trybu wprowadzania danych.

Dlaczego to jest ważne

Ludzie mogą nie być w stanie pracować przy użyciu tylko jednej metody wprowadzania.

Przykład persony — Reporter z powtarzającymi się urazami stresowymi, który korzysta z oprogramowania do rozpoznawania mowy:

Problem

Kiedy dopada mnie RSI, często przełączam się między klawiaturą, myszą, rysikiem i głosem. Ta aplikacja nie pozwala mi używać rysika, gdy mam podłączoną klawiaturę.

Poprawne działanie

Aplikacja działa poprawnie, gdy korzystam zarówno z klawiatury, jak i myszy, rysika lub wydaję polecenia głosowe.

W skrócie

Cel

Informowanie użytkowników o ważnych zmianach w treści

Co zrobić

Umożliwiaj technologii wspomagającej powiadamianie użytkowników o zmianach stanu, które nie wymagają fokusu.

Dlaczego to jest ważne

Osoby, które nie widzą powiadomień, muszą być o nich informowane.

Przykład persony — Księgowy, który nie widzi i korzysta z czytnika ekranu:

Problem

Wybrałem zajęcia na konferencję, ale nie wiem, czy zostały dodane do mojego harmonogramu.

Poprawne działanie

Gdy dodam spotkanie do kalendarza, słyszę potwierdzenie.