Dostepnosc dla projektantow: tworzenie inkluzywnego projektowania wizualnego i interakcji

Dostepna strona internetowa zaczyna sie od dostepnego projektu. Wiele najczestszych problemow z dostepnoscia — niewystarczajacy kontrast kolorow, niejasna nawigacja, mylace uklady, brakujace wskazniki fokusa — powstaje na etapie podejmowania decyzji projektowych. Zanim kod zostanie napisany, problemy te sa juz zakorzenione, a ich naprawienie wymaga przeprojektowania, a nie jedynie korekty kodu.

Jako projektant masz wiekszy wplyw na dostepnosc niz niemal kazda inna osoba w zespole. Twoje wybory dotyczace kolorow, typografii, odstepow, wzorcow nawigacji i modeli interakcji decyduja o tym, czy miliony uzytkownikow beda mogly skutecznie korzystac z Twojego produktu.

Kontrast kolorow

Niewystarczajacy kontrast kolorow jest jednym z najczestszych problemow dostepnosci w internecie. WCAG wymaga minimalnego wspolczynnika kontrastu 4,5:1 miedzy tekstem a jego tlem dla tekstu o normalnej wielkosci oraz 3:1 dla duzego tekstu (zdefiniowanego jako 18pt zwykly lub 14pt pogrubiony). Na poziomie AAA wymaganie wzrasta do 7:1 dla normalnego tekstu i 4,5:1 dla duzego tekstu.

Te wspolczynniki istnieja, poniewaz osoby slabowidzace, z oczami starzejaracymi sie lub z zaburzeniami widzenia barw potrzebuja wystarczajacego kontrastu, aby odroznic tekst od tla. Jasnoszary tekst na bialym tle moze wygladac elegancko w makiecie projektowej, ale staje sie nieczytelny dla znacznego odsetka uzytkownikow.

Elementy nietekstowe rowniez podlegaja wymogom kontrastu. Elementy interfejsu uzytkownika — przyciski, pola formularzy, ikony, wskazniki fokusa — oraz znaczace obiekty graficzne musza utrzymywac co najmniej wspolczynnik kontrastu 3:1 w stosunku do sasiadujacych kolorow. Zapewnia to, ze uzytkownicy moga identyfikowac elementy interaktywne i rozumiec grafiki informacyjne.

Uzywaj narzedzi do sprawdzania kontrastu przez caly proces projektowania, nie tylko na koncu. Narzedzia takie jak WebAIM Contrast Checker czy Colour Contrast Analyser pozwalaja weryfikowac wspolczynniki przed zatwierdzeniem palety kolorow.

Kolor jako informacja

Kolor nigdy nie moze byc jedynym wizualnym sposobem przekazywania informacji. Jesli uzywasz czerwonego do wskazywania bledow i zielonego do wskazywania sukcesu, uzytkownicy ze slepota barw moga nie byc w stanie rozroznic dwoch stanow. Zawsze uzupelniaj kolor dodatkowymi wskaznikami — ikonami, etykietami tekstowymi, wzorami lub podkresleniami.

Dotyczy to rowniez linkow. Jesli linki w bloku tekstu sa wyroznialne tylko kolorem, musza spelniace wspolczynnik kontrastu 3:1 w stosunku do otaczajacego tekstu lub byc uzupelnione innym wskaznikiem wizualnym, takim jak podkreslenie.

Typografia i rozmiar tekstu

Caly tekst na Twojej stronie musi moc byc powiekszony do 200% bez utraty tresci lub funkcjonalnosci. Oznacza to projektowanie z uzyciem elastycznych, wzglednych jednostek zamiast stalych rozmiarow w pikselach oraz zapewnienie, ze uklady dostosowuja sie plynnie przy powiekszaniu tekstu.

WCAG 2.2 obejmuje rowniez wymagania dotyczace odstepow tekstu. Uzytkownicy musza moc dostosowac wysokosc linii do co najmniej 1,5-krotnosci rozmiaru czcionki, odstepy miedzy akapitami do co najmniej 2-krotnosci rozmiaru czcionki, rozstaw liter do 0,12-krotnosci rozmiaru czcionki i rozstaw wyrazow do 0,16-krotnosci rozmiaru czcionki — bez utraty tresci lub funkcjonalnosci.

Projektowanie linkow

Linki musza byc wizualnie odroznialne od otaczajacego tekstu. Powinny byc opisowe i zwiezle, informujac uzytkownikow, co znajda po kliknieciu. Nigdy nie uzywaj "kliknij tutaj" lub "czytaj wiecej" jako tekstu linku bez dodatkowego kontekstu, poniewaz te frazy sa pozbawione znaczenia dla uzytkownikow czytnikow ekranu, ktorzy nawiguja po listach linkow.

Nawigacja i spojnosc

Nawigacja musi byc spojna na wszystkich stronach Twojej witryny. Uzytkownicy polegajacy na nawigacji klawiatura lub czytnikach ekranu buduja mentalny model struktury witryny, a nieoczekiwane zmiany zaburzaja ten model. WCAG wymaga, aby mechanizmy nawigacji pojawiajace sie na wielu stronach wystepowaly w tej samej wzglednej kolejnosci za kazdym razem, a elementy o tej samej funkcjonalnosci byly identyfikowane w sposob spojny.

Wskazniki fokusa

Gdy uzytkownik nawiguje po Twojej stronie za pomoca klawiatury, musi byc widoczny wskaznik pokazujacy, ktory element ma aktualnie fokus. Ten wskaznik fokusa musi byc wyraznie widoczny — WCAG 2.2 wymaga, aby nie byl zasloniety przez inne tresci (SC 2.4.11), a na poziomie AAA, aby caly wskaznik fokusa i sfokusowany element byly w pelni widoczne (SC 2.4.12).

Projektuj wskazniki fokusa swiadomie. Domyslna ramka przegladarki czesto jest niewystarczajaca lub jest usuwana przez resety CSS. Zaprojektuj wlasny styl fokusa, ktory ma wystarczajacy kontrast i jest wizualnie wyrazisty.

Rozmiary celow dotykowych

Elementy interaktywne musza byc wystarczajaco duze, aby mozna je bylo aktywowac bez trudnosci. WCAG 2.2 wymaga, aby cele interaktywne mialy co najmniej 24x24 piksele CSS (SC 2.5.8), wliczajac biala przestrzen otaczajaca cel. Na poziomie AAA wymaganie wzrasta do 44x44 pikseli (SC 2.5.5). Jest to korzystne dla uzytkownikow z niepelnosprawnosciami ruchowymi, drzeniami lub ograniczona zrecznoscia, a takze dla kazdego korzystajacego z urzadzenia mobilnego w niestabilnym otoczeniu.

Projektowanie formularzy

Formularze sa jednym z najwazniejszych obszarow dostepnego projektowania. Kazda kontrolka formularza potrzebuje wyraznie widocznej etykiety informujacej uzytkownika, jakie informacje nalezy podac. Komunikaty o bledach musza byc konkretne, widoczne i umieszczone w poblizu pola, ktorego dotycza. Podawaj instrukcje tam, gdzie to konieczne, i unikaj polegania wylacznie na tekscie zastepczym (placeholder) jako etykiecie — tekst zastepczy znika, gdy uzytkownik zaczyna pisac, i czesto ma niewystarczajacy kontrast.

Projektuj z mysla o zapobieganiu bledom. Pozwol uzytkownikom przegladac i poprawiac dane przed wyslaniem, szczegolnie w przypadku czynnosci o znaczacych konsekwencjach, takich jak transakcje finansowe lub umowy prawne. Gdy bledy zostana wykryte, podawaj jasne sugestie, jak je naprawic.

Ruch i animacja

Niektorzy uzytkownicy doswiadczaja napadow padaczkowych, migren lub zawrotow glowy od animowanych lub migajacych tresci. Nic na Twojej stronie nie powinno migac czesciej niz trzy razy na sekunde. Zapewnij kontrolki do wstrzymywania, zatrzymywania lub ukrywania wszelkich tresci, ktore sie poruszaja, migaja lub przewijaja przez wiecej niz piec sekund. Respektuj ustawienie systemu operacyjnego "prefers-reduced-motion" i zapewnij alternatywy ze zredukowanym ruchem dla animacji.

Obrazy tekstu

Unikaj uzywania obrazow tekstu na swojej stronie internetowej. Prawdziwy tekst moze byc zmieniony rozmiarem, przeformatowany i odczytany przez technologie wspomagajace. Obrazy tekstu nie moga. Jedynymi wyjatkami sa logotypy i sytuacje, w ktorych konkretna wizualna prezentacja tekstu jest istotna dla przekazywanej informacji.

Lista kontrolna projektanta dla dostepnosci

Przed przekazaniem jakiegokolwiek projektu do realizacji zweryfikuj: wspolczynniki kontrastu spelniaja wymagania dla calego tekstu i elementow interaktywnych; kolor nigdy nie jest jedynym wskaznikiem informacji; stany fokusa sa zaprojektowane dla wszystkich elementow interaktywnych; cele dotykowe spelniaja minimalne wymagania rozmiaru; nawigacja jest spojna na wszystkich stronach; stany bledow i komunikaty sa jasno zaprojektowane; tekst moze byc powiekszony bez psucia ukladow; animacje respektuja preferencje uzytkownikow; a dla wszystkich tresci nietekstowych zaplanowano alternatywy tekstowe.