Prieinamumas dizaineriams: įtraukiančio vizualinio ir sąveikos dizaino kūrimas

Prieinama svetainė prasideda nuo prieinamo dizaino. Daugelis dažniausių prieinamumo problemų — nepakankamas spalvų kontrastas, neaiški navigacija, painūs maketai, trūkstami fokuso indikatoriai — kyla iš sprendimų, priimtų dizaino etape. Kai kodas jau parašytas, šios problemos yra įsitvirtinusios, ir jų taisymas reikalauja perdizainavimo, o ne tiesiog kodo koregavimo.

Kaip dizaineris, jūs turite daugiau įtakos prieinamumui nei beveik bet kas kitas komandoje. Jūsų pasirinkimai dėl spalvų, tipografijos, tarpų, navigacijos modelių ir sąveikos modelių lemia, ar milijonai naudotojų galės efektyviai sąveikauti su jūsų produktu.

Spalvų kontrastas

Nepakankamas spalvų kontrastas yra viena iš labiausiai paplitusių prieinamumo problemų žiniatinklyje. WCAG reikalauja minimalaus kontrasto santykio 4,5:1 tarp teksto ir jo fono normalaus dydžio tekstui ir 3:1 dideliam tekstui (apibrėžiamam kaip 18pt normalus arba 14pt pusjuodis). AAA lygiui reikalavimas didėja iki 7:1 normaliam tekstui ir 4,5:1 dideliam tekstui.

Šie santykiai egzistuoja todėl, kad žmonėms su silpnu regėjimu, senstančiomis akimis ar spalvinio regėjimo trūkumais reikia pakankamo kontrasto, kad atskirtų tekstą nuo fono. Šviesiai pilkas tekstas ant balto fono gali atrodyti elegantiškai dizaino makete, bet tampa neįskaitomas reikšmingai procentui naudotojų.

Ne tekstiniai elementai taip pat turi kontrasto reikalavimus. Naudotojo sąsajos komponentai — mygtukai, formos laukai, piktogramos, fokuso indikatoriai — ir prasmingi grafiniai objektai turi palaikyti bent 3:1 kontrasto santykį su gretimomis spalvomis. Tai užtikrina, kad naudotojai galėtų identifikuoti interaktyvius elementus ir suprasti informacinę grafiką.

Naudokite kontrasto tikrinimo įrankius per visą dizaino procesą, ne tik pabaigoje. Tokie įrankiai kaip WebAIM Contrast Checker ar Colour Contrast Analyser leidžia patikrinti santykius prieš pasirenkant spalvų paletę.

Spalva kaip informacija

Spalva niekada neturi būti vienintelė vizualinė priemonė informacijai perduoti. Jei naudojate raudoną klaidoms nurodyti ir žalią sėkmei, spalvų neatskiriantys naudotojai gali negalėti atskirti šių dviejų būsenų. Visada papildykite spalvą papildomais indikatoriais — piktogramomis, teksto etiketėmis, raštais ar pabraukimais.

Tai taikoma ir nuorodoms. Jei nuorodos teksto bloke atskirtos tik spalva, jos turi atitikti 3:1 kontrasto santykį su aplinkiniu tekstu arba būti papildytos kitu vizualiniu indikatoriumi, pvz., pabraukimu.

Tipografija ir teksto dydis

Visas tekstas jūsų svetainėje turi galėti būti padidintas iki 200 % be turinio ar funkcionalumo praradimo. Tai reiškia dizainavimą su lanksčiais, santykiniais vienetais, o ne fiksuotais pikselių dydžiais, ir užtikrinimą, kad maketai grakščiai prisitaiko, kai tekstas padidinamas.

WCAG 2.2 taip pat apima reikalavimus teksto tarpams. Naudotojai turi galėti koreguoti eilučių aukštį iki 1,5 karto šrifto dydžio, pastraipos tarpą iki 2 kartų šrifto dydžio, raidžių tarpą iki 0,12 karto šrifto dydžio ir žodžių tarpą iki 0,16 karto šrifto dydžio — be turinio ar funkcionalumo praradimo.

Nuorodų dizainas

Nuorodos turi būti vizualiai atskirtos nuo aplinkiniu teksto. Jos turi būti aprašomosios ir glaustos, informuojančios naudotojus, ką jie ras sekdami nuorodą. Niekada nenaudokite „spauskite čia" ar „skaityti daugiau" kaip nuorodos teksto be papildomo konteksto, nes šios frazės yra beprasmės ekrano skaitytuvo naudotojams, naršantiems per nuorodų sąrašus.

Navigacija ir nuoseklumas

Navigacija turi būti nuosekli visuose svetainės puslapiuose. Naudotojai, kurie pasikliauja klaviatūros navigacija ar ekrano skaitytuvais, kuria mentalinį svetainės struktūros modelį, ir netikėti pakeitimai sutrikdo tą modelį. WCAG reikalauja, kad navigacijos mechanizmai, pasikartojantys keliuose puslapiuose, pasirodytų ta pačia santykine tvarka kiekvieną kartą, ir kad komponentai su ta pačia funkcija būtų identifikuojami nuosekliai.

Fokuso indikatoriai

Kai naudotojas naršo jūsų svetainę klaviatūra, turi būti matomas indikatorius, rodantis, kuris elementas šiuo metu turi fokusą. Šis fokuso indikatorius turi būti aiškiai matomas — WCAG 2.2 reikalauja, kad jis nebūtų uždengtas kitu turiniu (SC 2.4.11), o AAA lygyje, kad visas fokuso indikatorius ir fokusuotas komponentas būtų visiškai matomi (SC 2.4.12).

Projektuokite fokuso indikatorius sąmoningai. Numatytasis naršyklės kontūras dažnai yra nepakankamas arba pašalinamas CSS atstatymais. Suprojektuokite pasirinktinį fokuso stilių, turintį pakankamą kontrastą ir vizualiai ryškų.

Jutiklinių taikinių dydžiai

Interaktyvūs elementai turi būti pakankamai dideli, kad būtų aktyvuojami be sunkumų. WCAG 2.2 reikalauja, kad interaktyvūs taikiniai būtų bent 24x24 CSS pikselių (SC 2.5.8), įskaitant bet kokią baltą erdvę aplink taikinį. AAA lygyje reikalavimas didėja iki 44x44 pikselių (SC 2.5.5). Tai naudinga naudotojams su motoriniais sutrikimais, tremoru ar ribotu vikrumu, taip pat visiems, naudojantiems mobilųjį įrenginį judančioje aplinkoje.

Formų dizainas

Formos yra viena svarbiausių sričių prieinamam dizainui. Kiekvienam formos valdikliui reikia aiškiai matomos etiketės, nurodančios naudotojui, kokią informaciją pateikti. Klaidų pranešimai turi būti konkretūs, matomi ir padėti šalia lauko, kurį jie nurodo. Pateikite instrukcijas, kur reikia, ir nepasikliaukite vien vietos žymeklio tekstu kaip etikete — vietos žymeklio tekstas dingsta, kai naudotojas pradeda rašyti, ir dažnai turi nepakankamą kontrastą.

Projektuokite klaidų prevencijai. Leiskite naudotojams peržiūrėti ir pataisyti įvestį prieš pateikiant, ypač veiksmams su reikšmingomis pasekmėmis, tokiais kaip finansinės operacijos ar teisinės sutartys. Kai aptinkamos klaidos, pateikite aiškius pasiūlymus, kaip jas ištaisyti.

Judėjimas ir animacija

Kai kurie naudotojai patiria priepuolius, migrenas ar galvos svaigimą nuo animuoto ar mirksinio turinio. Niekas jūsų svetainėje neturi mirksėti daugiau nei tris kartus per sekundę. Pateikite valdiklius pristabdyti, sustabdyti ar paslėpti bet kokį turinį, kuris juda, mirksi ar slenka ilgiau nei penkias sekundes. Gerbkite operacinės sistemos „prefers-reduced-motion" nustatymą ir pateikite sumažinto judėjimo alternatyvas animacijoms.

Teksto vaizdai

Venkite naudoti teksto vaizdus savo svetainėje. Tikrą tekstą galima padidinti, performatuoti ir perskaityti pagalbinėmis technologijomis. Teksto vaizdų — ne. Vienintelės išimtys yra logotipai ir situacijos, kai konkretus vizualinis teksto pateikimas yra būtinas perduodamai informacijai.

Dizainerio prieinamumo kontrolinis sąrašas

Prieš perduodant bet kokį dizainą kūrimui, patikrinkite: kontrasto santykiai atitinka reikalavimus visam tekstui ir interaktyviems elementams; spalva niekada nėra vienintelis informacijos indikatorius; fokuso būsenos suprojektuotos visiems interaktyviems elementams; jutikliniai taikiniai atitinka minimalaus dydžio reikalavimus; navigacija nuosekli visuose puslapiuose; klaidų būsenos ir pranešimai aiškiai suprojektuoti; tekstas gali būti padidintas nepažeidžiant maketų; animacijos gerbia naudotojo nuostatas; ir visam ne tekstiniam turiniui suplanuotos tekstinės alternatyvos.