Wstęp
Dostępność cyfrowa zaczyna się już na etapie projektowania. To właśnie wtedy podejmowane są decyzje, które mają ogromny wpływ na to, czy strona będzie intuicyjna i zrozumiała dla wszystkich użytkowników. Również tych z niepełnosprawnościami. Choć finalna dostępność stron to efekt współpracy wielu osób, to projektant UX/UI często jako pierwszy nadaje kierunek temu, jak dostępna (lub niedostępna) będzie strona . W tym artykule przyjrzymy się praktycznym aspektom projektowania dostępnych stron z perspektywy UX/UI designera i pokażemy, że dobre decyzje projektowe mogą realnie zwiększyć inkluzywność bez zwiększania kosztów.
Z tego artykułu dowiesz się:
- jak zadbać o kontrast, żeby był dostępny
- jak zadbać o czytelność
- elementy ruchome na stronie, co zrobić, żeby były dostępne
- fokus, czy musi być widoczny
Zadbaj o kontrast kolorów
Najważniejsze kryteria, jakie należy mieć na względzie, wybierając kolory do naszego projektu to: kryterium sukcesu 1.4.3 – Kontrast (minimum) i 1.4.11 – Kontrast elementów nietekstowych (np. przyciski, pola formularzy). Obydwa te kryteria znajdują się na poziomie AA.
Kryterium sukcesu 1.4.3 – Kontrast (minimum), mówi, że:
Minimalny kontrast tekstu do tła powinien wynosić 4.5:1 dla tekstu standardowego, czyli poniżej 18 pt. / 24 px.
Natomiast dla tekstu dużego, czyli powyżej 18 pt. normalny lub 14 pt. pogrubiony 3:1.
Dotyczy to tekstów i obrazów zawierających tekst, ale nie dotyczy elementów czysto dekoracyjnych, nieaktywnych stanów interfejsu, ani logo.
W przypadku elementów nietekstowych powinniśmy kierować się kryterium 1.4.11 – Kontrast elementów nietekstowych (np. przyciski, pola formularzy), które mówi, że:
Minimalny kontrast pomiędzy elementem a jego otoczeniem to 3:1, dotyczy to m.in. ramek, ikon, przycisków, zaznaczeń, focusa itd.
Jeśli chcesz osiągnąć poziom AAA dostępności to jest jeszcze jedno kryterium, które warto znać. Kryterium 1.4.6 – Kontrast (ulepszony), według którego standardowy tekst: 7:1 a duży tekst: 4.5:1.
Podczas projektowania dostępnych stron możesz posłużyć się różnym narzędziami. W wybieraniu palety barw pomocna będzie np wtyczka Figmy.
Czytelność tekstu ma znaczenie
W wypadku tekstu powinniśmy zadbać o odstępy. Według kryterium 1.4.12 – Odstępy w tekście (Text Spacing) użytkownik powinien móc zmienić parametry tekstu bez utraty czytelności lub funkcjonalności strony. Minimalne wartości powinny być następujące:
- Interlinia (line-height): co najmniej 1.5x rozmiaru czcionki
- Odstęp między akapitami: co najmniej 2x rozmiar czcionki
- Odstęp między literami: co najmniej 0.12x rozmiaru czcionki
- Odstęp między wyrazami: co najmniej 0.16x rozmiaru czcionki
- Tekst nie powinien być wyjustowany
Nie powinniśmy również zapominać o tym, że użytkownik musi mieć możliwość powiększenia tekstu do 200% bez utraty funkcji lub treści strony. Projektant musi więc unikać sztywnych jednostek (np. px) i nadawać style w sposób elastyczny (em, rem, %), aby strona była zgodna z kryterium 1.4.4 – Zmiana rozmiaru tekstu.
Warto również pomyśleć o wyborze czcionki, w przypadku projektowania interfejsu bezszeryfowa czcionka będzie bezpieczniejszym wyborem.
Zatrzymaj ruch, jeśli użytkownik tego chce
W przypadku projektowania dostępnych stron ważne jest, to aby na stronie użytkownicy mieli możliwość zatrzymania, wstrzymania lub wyłączenia elementów ruchomych. Nie używaj automatycznych animacji, które zmieniają się w krótkich odstępach czasu bez możliwości zatrzymania przez użytkownika. Projektując stronę, nie zapominajmy o zaprojektowaniu odpowiednich przycisków tak, aby np: przy automatycznych slajdach mieć możliwość zatrzymania lub ustawienia tempa przejść.
Zgodnie z kryterium 2.3.1 – Migotanie migoczące elementy (np. animacje, które migają lub zmieniają się z dużą częstotliwością) nie powinny migotać więcej niż 3 razy na sekundę. To dotyczy takich elementów jak:
- Animacje
- Reklamy
- Przemieszczające się lub migoczące teksty/ikony
Nie zapomnij o widocznym fokusie
Użytkownicy klawiatury muszą wiedzieć, który element jest aktualnie aktywny – projektant powinien zadbać o widoczne i estetyczne style „focus”.
Wszystkie elementy interaktywne (np. linki, przyciski, pola formularzy) muszą mieć widoczny fokus, ponieważ użytkownik nawigujący za pomocą klawiatury lub innego urządzenia musi wiedzieć gdzie się znajduje. Fokus powinien być wyraźnie zaznaczony, na przykład za pomocą obramowania, zmiany koloru tła lub innych wyróżników, które są dobrze widoczne na tle innych elementów. O tym wszystkim mówi nam kryterium dostępności 2.4.7 – Widoczny fokus.
Kolejność fokusa powinna być logiczna i zgodna z porządkiem wizualnym strony. Co to oznacza?
Np, jeśli mamy formularz rejestracji to użytkownik musi przechodzić po polach w logicznej kolejności np. imię → nazwisko → adres e-mail → hasło → przycisk „Zarejestruj się”. Każdy z tych kroków powinien zawierać widoczny fokus. Jeśli tak będzie, spełnione zostanie kryterium dostępności na poziomie A 2.4.3 – Sekwencja nawigacji.
Podsumowanie
To tylko kilka podpowiedzi i wskazówek, na jakie powinniśmy zwrócić uwagę, projektując dostępne strony. Zachęcamy do zajrzenia Accessibility Ally, gdzie znajdziecie jeszcze więcej informacji w zakresie projektowania dostępnych stron. W praktyce wiele z opisanych problemów ujawnia się dopiero podczas profesjonalnego audytu dostępności strony internetowej, który pozwala zweryfikować projekt pod kątem zgodności z WCAG.
Jeśli chcesz sprawdzić jakimi zasadami powinien kierować się edytor sprawdź artykuł Dostępność cyfrowa z perspektywy edytora stron. Więcej na temat dostępności z perspektywy dewelopera piszemy w artykule Dostępność cyfrowa z perspektywy dewelopera.
