Dostopnost za oblikovalce: ustvarjanje vključujočega vizualnega in interakcijskega oblikovanja

Dostopno spletno mesto se začne z dostopnim oblikovanjem. Mnoge najpogostejše napake pri dostopnosti — nezadosten barvni kontrast, nejasna navigacija, zmedene postavitve, manjkajoči indikatorji fokusa — izvirajo iz odločitev, sprejetih v fazi oblikovanja. Ko je koda že napisana, so te težave vgrajene in za njihovo odpravo je potrebno preoblikovanje, ne le prilagoditev kode.

Kot oblikovalec imate večji vpliv na dostopnost kot skoraj kdor koli drug v ekipi. Vaše odločitve o barvah, tipografiji, razmiku, navigacijskih vzorcih in interakcijskih modelih določajo, ali lahko milijoni uporabnikov učinkovito komunicirajo z vašim izdelkom.

Barvni kontrast

Nezadosten barvni kontrast je ena najpogostejših težav z dostopnostjo na spletu. WCAG zahteva minimalno kontrastno razmerje 4,5:1 med besedilom in njegovim ozadjem za besedilo normalne velikosti ter 3:1 za veliko besedilo (definirano kot 18pt navadno ali 14pt krepko). Na ravni AAA se zahteva poveča na 7:1 za navadno besedilo in 4,5:1 za veliko besedilo.

Ta razmerja obstajajo, ker ljudje s slabim vidom, starajočimi se očmi ali pomanjkljivostmi barvnega vida potrebujejo zadosten kontrast, da ločijo besedilo od ozadja. Svetlo sivo besedilo na belem ozadju morda izgleda elegantno v oblikovalski zasnovi, vendar postane neberljivo za znaten odstotek uporabnikov.

Tudi nebesedilni elementi imajo zahteve glede kontrasta. Komponente uporabniškega vmesnika — gumbi, polja obrazcev, ikone, indikatorji fokusa — in smiselni grafični objekti morajo ohranjati vsaj 3:1 kontrastno razmerje proti sosednjim barvam. To zagotavlja, da uporabniki lahko prepoznajo interaktivne elemente in razumejo informacijske grafike.

Uporabljajte orodja za preverjanje kontrasta skozi celoten proces oblikovanja, ne le na koncu. Orodja, kot sta WebAIM Contrast Checker ali Colour Contrast Analyser, vam omogočajo preverjanje razmerij pred potrditvijo barvne palete.

Barva kot informacija

Barva ne sme nikoli biti edino vizualno sredstvo za posredovanje informacij. Če uporabljate rdečo za označevanje napak in zeleno za označevanje uspehov, uporabniki, ki so barvno slepi, morda ne morejo razlikovati med obema stanjema. Barvo vedno dopolnite z dodatnimi indikatorji — ikonami, besedilnimi oznakami, vzorci ali podčrtavanjem.

To velja tudi za povezave. Če se povezave znotraj bloka besedila razlikujejo le po barvi, morajo imeti 3:1 kontrastno razmerje proti okoliškemu besedilu ali biti dopolnjene z drugim vizualnim indikatorjem, kot je podčrtavanje.

Tipografija in velikost besedila

Vse besedilo na vašem spletnem mestu mora biti mogoče povečati do 200 % brez kakršne koli izgube vsebine ali funkcionalnosti. To pomeni oblikovanje s prožnimi, relativnimi enotami namesto fiksnih velikosti v pikslih ter zagotavljanje, da se vaše postavitve elegantno prilagodijo, ko je besedilo povečano.

WCAG 2.2 vključuje tudi zahteve za razmik besedila. Uporabniki morajo imeti možnost prilagoditi višino vrstice na vsaj 1,5-kratnik velikosti pisave, razmik odstavkov na vsaj 2-kratnik velikosti pisave, razmik črk na 0,12-kratnik velikosti pisave in razmik besed na 0,16-kratnik velikosti pisave — brez kakršne koli izgube vsebine ali funkcionalnosti.

Oblikovanje povezav

Povezave morajo biti vizualno razločne od okoliškega besedila. Morajo biti opisne in jedrnate ter uporabnikom povedati, kaj bodo našli, ko sledijo povezavi. Nikoli ne uporabljajte »kliknite tukaj« ali »preberite več« kot besedilo povezave brez dodatnega konteksta, saj sta ta izraza brez pomena za uporabnike bralnikov zaslona, ki navigirajo po seznamih povezav.

Navigacija in doslednost

Navigacija mora biti dosledna na vseh straneh vašega spletnega mesta. Uporabniki, ki se zanašajo na tipkovnično navigacijo ali bralnike zaslona, si gradijo miselni model strukture vašega spletnega mesta in nepričakovane spremembe ta model porušijo. WCAG zahteva, da se navigacijski mehanizmi, ki se pojavljajo na več straneh, vsakič pojavijo v enakem relativnem vrstnem redu ter da so komponente z enako funkcionalnostjo dosledno identificirane.

Indikatorji fokusa

Ko uporabnik navigira po vašem spletnem mestu s tipkovnico, mora biti viden indikator, ki kaže, kateri element ima trenutno fokus. Ta indikator fokusa mora biti jasno viden — WCAG 2.2 zahteva, da ga ne zakriva druga vsebina (SC 2.4.11), na ravni AAA pa, da sta celoten indikator fokusa in fokusirani element v celoti vidna (SC 2.4.12).

Indikatorje fokusa oblikujte namensko. Privzeti obris brskalnika je pogosto nezadosten ali ga ponastavitve CSS odstranijo. Oblikujte prilagojen slog fokusa, ki ima zadosten kontrast in je vizualno izrazit.

Velikosti dotikalnih ciljev

Interaktivni elementi morajo biti dovolj veliki, da jih je mogoče aktivirati brez težav. WCAG 2.2 zahteva, da so interaktivni cilji vsaj 24×24 CSS pikslov (SC 2.5.8), vključno z morebitnim belim prostorom okoli cilja. Na ravni AAA se zahteva poveča na 44×44 pikslov (SC 2.5.5). To koristi uporabnikom z gibalnimi invalidnostmi, tremorjem ali omejeno spretnostjo ter vsakomur, ki uporablja mobilno napravo v surovem okolju.

Oblikovanje obrazcev

Obrazci so eno najbolj kritičnih področij za dostopno oblikovanje. Vsak kontrolni element obrazca potrebuje jasno vidno oznako, ki uporabniku pove, katere informacije naj zagotovi. Sporočila o napakah morajo biti specifična, vidna in nameščena blizu polja, na katerega se nanašajo. Zagotovite navodila, kjer so potrebna, in se izogibajte zanašanju izključno na nadomestno besedilo (placeholder) kot oznako — nadomestno besedilo izgine, ko uporabnik začne tipkati, in ima pogosto nezadosten kontrast.

Oblikujte za preprečevanje napak. Omogočite uporabnikom, da pregledajo in popravijo vnos pred oddajo, zlasti pri dejanjih z znatnimi posledicami, kot so finančne transakcije ali pravni dogovori. Ko so zaznane napake, zagotovite jasne predloge za njihovo odpravo.

Gibanje in animacija

Nekateri uporabniki doživljajo napade, migrene ali vrtoglavico zaradi animirane ali utripajoče vsebine. Nič na vašem spletnem mestu se ne sme utripati več kot trikrat na sekundo. Zagotovite kontrole za premor, ustavitev ali skrivanje katere koli vsebine, ki se premika, utripa ali pomika več kot pet sekund. Spoštujte nastavitev operacijskega sistema »prefers-reduced-motion« in zagotovite alternative z zmanjšanim gibanjem za animacije.

Slike besedila

Izogibajte se uporabi slik besedila na vašem spletnem mestu. Pravo besedilo je mogoče povečati, preoblikovati in ga berejo pomožne tehnologije. Slik besedila ni mogoče. Edine izjeme so logotipi in primeri, ko je določena vizualna predstavitev besedila bistvena za posredovano informacijo.

Kontrolni seznam za oblikovalce

Preden katerokoli zasnovo predate v razvoj, preverite: kontrastna razmerja izpolnjujejo zahteve za vso besedilo in interaktivne elemente; barva ni nikoli edini indikator informacij; stanja fokusa so oblikovana za vse interaktivne elemente; dotikalni cilji izpolnjujejo minimalne zahteve glede velikosti; navigacija je dosledna na vseh straneh; stanja napak in sporočila so jasno oblikovana; besedilo se lahko poveča brez porušitve postavitev; animacije spoštujejo uporabnikove preference; in za vse nebesedilne vsebine so načrtovane besedilne alternative.