Pristupačnost za dizajnere: stvaranje inkluzivnog vizualnog i interakcijskog dizajna

Pristupačna web stranica počinje s pristupačnim dizajnom. Mnoge od najčešćih grešaka pristupačnosti — nedovoljan kontrast boja, nejasna navigacija, zbunjujući rasporedi, nedostatak indikatora fokusa — nastaju u odlukama donesenim tijekom faze dizajna. Do trenutka kada se kod napiše, ti su problemi već ugrađeni, a njihovo ispravljanje zahtijeva redizajn umjesto jednostavnog prilagođavanja koda.

Kao dizajner, imate veći utjecaj na pristupačnost od gotovo bilo koga drugog u timu. Odluke koje donosite o boji, tipografiji, razmacima, obrascima navigacije i modelima interakcije određuju mogu li milijuni korisnika učinkovito komunicirati s vašim proizvodom.

Kontrast boja

Nedovoljan kontrast boja jedna je od najraširenijih problema pristupačnosti na webu. WCAG zahtijeva minimalni omjer kontrasta od 4,5:1 između teksta i njegove pozadine za tekst normalne veličine, i 3:1 za veliki tekst (definiran kao 18pt regular ili 14pt bold). Na razini AAA, zahtjev se povećava na 7:1 za normalni tekst i 4,5:1 za veliki tekst.

Ovi omjeri postoje jer osobe sa slabim vidom, staračkim očima ili nedostacima u percepciji boja trebaju dovoljan kontrast za razlikovanje teksta od pozadine. Svijetlosivi tekst na bijeloj pozadini može izgledati elegantno u dizajn mockupu, ali postaje nečitljiv za značajan postotak korisnika.

Netekstualni elementi također imaju zahtjeve kontrasta. Komponente korisničkog sučelja — gumbi, polja obrazaca, ikone, indikatori fokusa — i smisleni grafički objekti moraju održavati omjer kontrasta od najmanje 3:1 u odnosu na susjedne boje. To osigurava da korisnici mogu prepoznati interaktivne elemente i razumjeti informativnu grafiku.

Koristite alate za provjeru kontrasta kroz cijeli svoj proces dizajna, a ne samo na kraju. Alati poput WebAIM Contrast Checkera ili Colour Contrast Analysera omogućuju provjeru omjera prije nego što se opredijelite za paletu boja.

Boja kao informacija

Boja nikada ne smije biti jedino vizualno sredstvo za prenošenje informacija. Ako koristite crvenu za označavanje grešaka i zelenu za označavanje uspjeha, korisnici koji su daltonisti možda neće moći razlikovati dva stanja. Uvijek nadopunite boju dodatnim indikatorima — ikonama, tekstualnim oznakama, uzorcima ili podcrtavanjem.

To se odnosi i na linkove. Ako se linkovi unutar bloka teksta razlikuju samo po boji, moraju imati omjer kontrasta od 3:1 u odnosu na okolni tekst ili biti nadopunjeni drugim vizualnim indikatorom poput podcrtavanja.

Tipografija i veličina teksta

Sav tekst na vašoj web stranici mora se moći povećati do 200% bez gubitka sadržaja ili funkcionalnosti. To znači dizajniranje s fleksibilnim, relativnim jedinicama umjesto fiksnih veličina u pikselima, i osiguravanje da se vaši rasporedi gracefuly prilagođavaju kada se tekst poveća.

WCAG 2.2 također uključuje zahtjeve za razmak teksta. Korisnici moraju moći prilagoditi visinu retka na najmanje 1,5 puta veličinu fonta, razmak odlomaka na najmanje 2 puta veličinu fonta, razmak slova na 0,12 puta veličinu fonta i razmak riječi na 0,16 puta veličinu fonta — bez gubitka sadržaja ili funkcionalnosti.

Dizajn linkova

Linkovi moraju biti vizualno razlikovni od okolnog teksta. Trebaju biti opisni i sažeti, govoreći korisnicima što će pronaći kada slijede link. Nikada ne koristite "kliknite ovdje" ili "pročitajte više" kao tekst linka bez dodatnog konteksta, jer su te fraze besmislene za korisnike čitača zaslona koji navigiraju popisima linkova.

Navigacija i dosljednost

Navigacija mora biti dosljedna na svim stranicama vašeg web mjesta. Korisnici koji se oslanjaju na navigaciju tipkovnicom ili čitače zaslona grade mentalni model strukture vašeg web mjesta, a neočekivane promjene remete taj model. WCAG zahtijeva da se navigacijski mehanizmi koji se pojavljuju na više stranica pojavljuju u istom relativnom redoslijedu svaki put, i da su komponente s istom funkcionalnošću dosljedno identificirane.

Indikatori fokusa

Kada korisnik navigira vašim web mjestom tipkovnicom, mora postojati vidljiv indikator koji pokazuje koji element trenutno ima fokus. Ovaj indikator fokusa mora biti jasno vidljiv — WCAG 2.2 zahtijeva da ga drugi sadržaj ne zaklanja (SC 2.4.11) i, na razini AAA, da cijeli indikator fokusa i fokusirana komponenta budu potpuno vidljivi (SC 2.4.12).

Osmislite indikatore fokusa namjerno. Zadani obrub preglednika često je nedovoljan ili je uklonjen CSS resetima. Dizajnirajte prilagođeni stil fokusa koji ima dovoljan kontrast i vizualno je istaknut.

Veličine dodirnih ciljeva

Interaktivni elementi moraju biti dovoljno veliki da ih se može aktivirati bez poteškoća. WCAG 2.2 zahtijeva da interaktivni ciljevi budu najmanje 24×24 CSS piksela (SC 2.5.8), uključujući sve razmake oko cilja. Na razini AAA, zahtjev se povećava na 44×44 piksela (SC 2.5.5). To koristi korisnicima s motoričkim invaliditetima, tremorima ili ograničenom spretnošću, kao i svima koji koriste mobilni uređaj u nesigurnom okruženju.

Dizajn obrazaca

Obrasci su jedno od najkritičnijih područja za pristupačan dizajn. Svaka kontrola obrasca treba jasno vidljivu oznaku koja govori korisniku koje informacije treba pružiti. Poruke o pogreškama moraju biti specifične, vidljive i pozicionirane blizu polja na koje se odnose. Pružite upute gdje je potrebno, i izbjegavajte oslanjanje isključivo na tekst rezerviranog mjesta kao oznaku — tekst rezerviranog mjesta nestaje kada korisnik počne upisivati i često ima nedovoljan kontrast.

Dizajnirajte za prevenciju pogrešaka. Omogućite korisnicima da pregledaju i isprave unos prije slanja, posebno za radnje sa značajnim posljedicama poput financijskih transakcija ili pravnih sporazuma. Kada se otkriju pogreške, pružite jasne prijedloge kako ih ispraviti.

Pokret i animacije

Neki korisnici doživljavaju napadaje, migrene ili vrtoglavicu od animiranog ili bljeskajućeg sadržaja. Ništa na vašoj web stranici ne smije bljeskati više od tri puta u sekundi. Osigurajte kontrole za pauziranje, zaustavljanje ili skrivanje bilo kojeg sadržaja koji se kreće, treperi ili pomiče duže od pet sekundi. Poštujte postavku operativnog sustava "prefers-reduced-motion" i pružite alternative sa smanjenim pokretom za animacije.

Slike teksta

Izbjegavajte korištenje slika teksta na svojoj web stranici. Stvarni tekst može se mijenjati veličinom, preoblikovati i čitati pomoćnim tehnologijama. Slike teksta ne mogu. Jedine iznimke su logotipi i situacije u kojima je određena vizualna prezentacija teksta ključna za informacije koje se prenose.

Kontrolna lista pristupačnosti za dizajnere

Prije predaje bilo kojeg dizajna u razvoj, provjerite: omjeri kontrasta zadovoljavaju zahtjeve za sav tekst i interaktivne elemente; boja nikada nije jedini indikator informacija; stanja fokusa dizajnirana su za sve interaktivne elemente; dodirni ciljevi zadovoljavaju minimalne zahtjeve veličine; navigacija je dosljedna na svim stranicama; stanja pogrešaka i poruke jasno su dizajnirani; tekst se može povećati bez narušavanja rasporeda; animacije poštuju korisničke preferencije; i sav netekstualni sadržaj ima planirane tekstualne alternative.