Pieejamība dizaineriem: iekļaujoša vizuālā un mijiedarbības dizaina veidošana

Pieejama tīmekļa vietne sākas ar pieejamu dizainu. Daudzas no biežākajām pieejamības kļūmēm — nepietiekams krāsu kontrasts, neskaidra navigācija, mulsinoši izkārtojumi, trūkstošie fokusa indikatori — rodas lēmumos, kas pieņemti dizaina fāzē. Līdz brīdim, kad kods tiek uzrakstīts, šīs problēmas ir iebūvētas, un to labošanai ir nepieciešams pārdizainēt, nevis vienkārši pielāgot kodu.

Kā dizainerim jums ir lielāka ietekme uz pieejamību nekā gandrīz jebkuram citam komandas dalībniekam. Jūsu izvēles par krāsu, tipogrāfiju, atstarpi, navigācijas modeļiem un mijiedarbības modeļiem nosaka, vai miljoniem lietotāju var efektīvi mijiedarboties ar jūsu produktu.

Krāsu kontrasts

Nepietiekams krāsu kontrasts ir viena no izplatītākajām pieejamības problēmām tīmeklī. WCAG prasa minimālo kontrasta attiecību 4,5:1 starp tekstu un tā fonu normāla izmēra tekstam un 3:1 lielam tekstam (definēts kā 18pt parastais vai 14pt treknraksts). AAA līmenī prasība palielinās līdz 7:1 normālam tekstam un 4,5:1 lielam tekstam.

Šīs attiecības pastāv tāpēc, ka cilvēkiem ar vāju redzi, novecojošām acīm vai krāsu redzes traucējumiem ir nepieciešams pietiekams kontrasts, lai atšķirtu tekstu no tā fona. Gaiši pelēks teksts uz balta fona var izskatīties eleganti dizaina maketā, bet kļūst nolasāms ievērojamai lietotāju daļai.

Arī elementiem, kas nav teksts, ir kontrasta prasības. Lietotāja saskarnes komponenti — pogas, formu lauki, ikonas, fokusa indikatori — un nozīmīgi grafiski objekti ir jāuztur ar vismaz 3:1 kontrasta attiecību pret blakus esošajām krāsām. Tas nodrošina, ka lietotāji var identificēt interaktīvos elementus un saprast informatīvo grafiku.

Izmantojiet kontrasta pārbaudes rīkus visā dizaina procesā, nevis tikai beigās. Tādi rīki kā WebAIM Contrast Checker vai Colour Contrast Analyser ļauj jums pārbaudīt attiecības pirms krāsu paletes apstiprināšanas.

Krāsa kā informācija

Krāsa nekad nedrīkst būt vienīgais vizuālais līdzeklis informācijas nodošanai. Ja jūs izmantojat sarkanu, lai norādītu kļūdas, un zaļu, lai norādītu veiksmi, krāsu akli lietotāji var nespēt atšķirt abus stāvokļus. Vienmēr papildiniet krāsu ar papildu indikatoriem — ikonām, teksta etiķetēm, rakstiem vai pasvītrojumiem.

Tas attiecas arī uz saitēm. Ja saites teksta blokā tiek atšķirtas tikai ar krāsu, tām jāatbilst 3:1 kontrasta attiecībai pret apkārtējo tekstu vai jābūt papildinātām ar citu vizuālo indikatoru, piemēram, pasvītrojumu.

Tipogrāfija un teksta izmērs

Visam tekstam jūsu tīmekļa vietnē ir jāspēj mainīt izmēru līdz 200% bez satura vai funkcionalitātes zuduma. Tas nozīmē dizainēšanu ar elastīgām, relatīvām vienībām, nevis fiksētiem pikseļu izmēriem, un nodrošināt, ka jūsu izkārtojumi graciozi pielāgojas, kad teksts tiek palielināts.

WCAG 2.2 ietver arī prasības teksta atstarpēm. Lietotājiem jāspēj pielāgot rindstarpu līdz vismaz 1,5 reizēm fontu izmēram, rindkopu atstarpi līdz vismaz 2 reizēm fontu izmēram, burtu atstarpi līdz 0,12 reizēm fontu izmēram un vārdu atstarpi līdz 0,16 reizēm fontu izmēram — bez satura vai funkcionalitātes zuduma.

Saišu dizains

Saitēm jābūt vizuāli atšķirīgām no apkārtējā teksta. Tām jābūt aprakstošām un kodolīgām, norādot lietotājiem, ko viņi atradīs, sekojot saitei. Nekad neizmantojiet "noklikšķiniet šeit" vai "lasīt vairāk" kā saites tekstu bez papildu konteksta, jo šīs frāzes ir bezjēdzīgas ekrānlasītāja lietotājiem, kuri navigē pēc saišu sarakstiem.

Navigācija un konsekvence

Navigācijai jābūt konsekventai visās jūsu vietnes lapās. Lietotāji, kuri paļaujas uz tastatūras navigāciju vai ekrānlasītājiem, veido savas vietnes struktūras mentālo modeli, un negaidītas izmaiņas izjauc šo modeli. WCAG prasa, lai navigācijas mehānismi, kas parādās vairākās lapās, katru reizi būtu tādā pašā relatīvā secībā un ka komponenti ar vienādu funkcionalitāti tiktu identificēti konsekventi.

Fokusa indikatori

Kad lietotājs navigē jūsu vietnē ar tastatūru, jābūt redzamam indikatoram, kas rāda, kuram elementam pašlaik ir fokuss. Šim fokusa indikatoram jābūt skaidri redzamam — WCAG 2.2 prasa, lai tas netiktu aizsegts ar citu saturu (SC 2.4.11), un AAA līmenī, lai viss fokusa indikators un fokusētais komponents būtu pilnībā redzams (SC 2.4.12).

Dizainējiet fokusa indikatorus apzināti. Noklusējuma pārlūka kontūra bieži ir nepietiekama vai tiek noņemta ar CSS atiestatēm. Dizainējiet pielāgotu fokusa stilu, kam ir pietiekams kontrasts un kas ir vizuāli izteikts.

Pieskāriena mērķu izmēri

Interaktīvajiem elementiem jābūt pietiekami lieliem, lai tos varētu aktivizēt bez grūtībām. WCAG 2.2 prasa, lai interaktīvie mērķi būtu vismaz 24×24 CSS pikseļi (SC 2.5.8), ieskaitot jebkādu balto telpu ap mērķi. AAA līmenī prasība palielinās līdz 44×44 pikseļiem (SC 2.5.5). Tas nāk par labu lietotājiem ar motoriskiem traucējumiem, trīci vai ierobežotu veiklību, kā arī ikvienam, kas izmanto mobilo ierīci nestabilā vidē.

Formu dizains

Formas ir viena no kritiski svarīgākajām jomām pieejamā dizainā. Katrai formas vadīklai nepieciešama skaidri redzama etiķete, kas norāda lietotājam, kādu informāciju sniegt. Kļūdu ziņojumiem jābūt konkrētiem, redzamiem un novietotiem tuvu laukam, uz kuru tie attiecas. Sniedziet instrukcijas, kur nepieciešams, un neatkarieties tikai no vietturu teksta kā etiķetes — vietturu teksts pazūd, kad lietotājs sāk rakstīt, un bieži tam ir nepietiekams kontrasts.

Dizainējiet kļūdu novēršanai. Ļaujiet lietotājiem pārskatīt un labot ievadi pirms iesniegšanas, jo īpaši darbībām ar nozīmīgām sekām, piemēram, finanšu darījumiem vai juridiskiem līgumiem. Kad kļūdas tiek konstatētas, sniedziet skaidrus ieteikumus to labošanai.

Kustība un animācija

Daži lietotāji piedzīvo lēkmes, migrēnas vai reiboni no animēta vai mirgojošā satura. Nekas jūsu tīmekļa vietnē nedrīkst mirgot vairāk nekā trīs reizes sekundē. Nodrošiniet vadīklas, lai apturētu vai paslēptu jebkuru saturu, kas pārvietojas, mirgo vai ritinās ilgāk par piecām sekundēm. Ievērojiet operētājsistēmas iestatījumu "prefers-reduced-motion" un nodrošiniet samazinātas kustības alternatīvas animācijām.

Teksta attēli

Izvairieties no teksta attēlu izmantošanas savā tīmekļa vietnē. Reālu tekstu var mainīt izmēru, pārformatēt un nolasīt ar palīgtehnoloģijām. Teksta attēlus nevar. Vienīgie izņēmumi ir logotipi un situācijas, kurās konkrēta teksta vizuālā prezentācija ir būtiska nodotajai informācijai.

Dizainera pieejamības kontrolsaraksts

Pirms jebkura dizaina nodošanas izstrādei pārbaudiet: kontrasta attiecības atbilst prasībām visam tekstam un interaktīvajiem elementiem; krāsa nekad nav vienīgais informācijas indikators; fokusa stāvokļi ir izstrādāti visiem interaktīvajiem elementiem; pieskāriena mērķi atbilst minimālā izmēra prasībām; navigācija ir konsekventa visās lapās; kļūdu stāvokļi un ziņojumi ir skaidri izstrādāti; teksts var mainīt izmēru, nesalaužot izkārtojumus; animācijas ievēro lietotāju preferences; un visam saturam, kas nav teksts, ir plānoti teksta alternatīvi.