Juurdepaasetavus disaineritele: kaasava visuaalse ja interaktsioonidisaini loomine

Juurdepaasetav veebisait algab juurdepaasetavast disainist. Paljud levinumad juurdepaasetavuse probleemid — ebapiisav varvikontrast, ebaselge navigeerimine, segadusse ajavad paigutused, puuduvad fookuse indikaatorid — saavad alguse disainifaasis tehtud otsustest. Selleks ajaks, kui kood on kirjutatud, on need probleemid sisse ehitatud ja nende parandamine nouab umberkujundamist, mitte lihtsalt koodi kohandamist.

Disainerina on sul juurdepaasetavusele suurem moju kui peaaegu kellelgi teisel meeskonnas. Valikud, mida teed varvi, tuupograafia, vahede, navigeerimismustrite ja interaktsioonimudelite osas, maaravad, kas miljonid kasutajad saavad sinu tootega tousalt suhelda.

Varvikontrast

Ebapiisav varvikontrast on uks levinumaid juurdepaasetavuse probleeme veebis. WCAG nouab minimaalset kontrastisuhet 4,5:1 teksti ja selle tausta vahel normaalse suurusega teksti puhul ning 3:1 suure teksti puhul (maaratud kui 18pt tavaline voi 14pt paks kiri). Tasemel AAA touseb noue 7:1-le normaalse teksti ja 4,5:1-le suure teksti puhul.

Need suhted eksisteerivad, sest vahenaagemise, vananevate silmade voi varvitajuhairetega inimesed vajavad piisavat kontrasti, et eristada teksti taustast. Helehall tekst valgel taustal voib disainimaketis elegantselt valja naaeha, kuid muutub loetamatuks maerkimisvaaersele protsendile kasutajatest.

Mittetekstilised elemendid omavad samuti kontrastinoudeid. Kasutajaliidese komponendid — nupud, vormivaeljad, ikoonid, fookuse indikaatorid — ja tahendusrikkad graafilised objektid peavad saeileitama vahemalt 3:1 kontrastisuhte naabervarvide suhtes. See tagab, et kasutajad saavad tuvastada interaktiivseid elemente ja moista informatiivset graaefikat.

Kasuta kontrasti kontrollimise tooriistade oma disainiprotsessis laebivalt, mitte ainult lopus. Tooristad nagu WebAIM Contrast Checker voi Colour Contrast Analyser lasevad sul suhteid kontrollida enne varvipalesile poleeerdumist.

Varv kui teave

Varv ei tohi kunagi olla ainus visuaalne vahend teabe edastamiseks. Kui kasutad punast vigade ja rohelist edu naeytamiseks, ei pruugi varipimedusega kasutajad kahe oleku vahel vahet teha. Taeienda varvi alati lisakuvandite — ikoonid, tekstimasrgised, mustrid voi allajoonimised.

See kehtib ka linkide kohta. Kui lingid tekstiplokis on eristatud ainult varvi jargi, peavad need taeitma 3:1 kontrastisuhte umberitseva teksti suhtes voi olema taeiendatud muu visuaalse indikaatoriga nagu allajoon.

Tuupograafia ja teksti suurus

Koik tekst sinu veebisaidil peab olema suurendatav kuni 200% ilma sisu voi funktsionaalsuse kaotuseta. See tahendab paindlike, suhteliste uhikutega disainimist, mitte fikseeritud pikslisuurustega, ja tagamist, et su paigutused kohanduvad graatsiliselt teksti suurendamisel.

WCAG 2.2 holmab ka teksti vahede noudeid. Kasutajad peavad saama kohandada rea koorgust vahemalt 1,5-kordseks kirjasuurusest, loeiguvahed vahemalt 2-kordseks kirjasuurusest, tahevahed vahemalt 0,12-kordseks kirjasuurusest ja sonavahed vahemalt 0,16-kordseks kirjasuurusest — ilma sisu voi funktsionaalsuse kaotuseta.

Linkide disain

Lingid peavad olema visuaalselt eristatavad umberitsevast tekstist. Need peaksid olema kirjeldavad ja luhidaed, oeldes kasutajatele, mida nad lingi jargimisel leiavad. Ara kunagi kasuta lingitekstina "kliki siia" voi "loe edasi" ilma lisakontekstita, kuna need fraasid on moeottetuud ekraanilugeja kasutajatele, kes navigeerivad lingiloendite kaudu.

Navigeerimine ja jaarjepidevus

Navigeerimine peab olema jaarjepidev koigil sinu saidi lehtedel. Kasutajad, kes toetuvad klaviatuurinavigeerimisele voi ekraanilugejatele, ehitavad oma saidi struktuurist vaimse mudeli ja ootamatud muutused haeirivad seda mudelit. WCAG nouab, et navigeerimismehhanismid, mis ilmuvad mitmel lehel, esineksid iga kord samas suhtelises jaerjekorras ja et sama funktsionaalsusega komponente tuvastaksin jaarjepidevalt.

Fookuse indikaatorid

Kui kasutaja navigeerib sinu saidil klaviatuuriga, peab olema naehtav indikaator, mis naeytab, millisel elemendil on hetkel fookus. See fookuse indikaator peab olema selgelt naehtav — WCAG 2.2 nouab, et seda ei kataks muu sisu (SC 2.4.11) ja tasemel AAA, et kogu fookuse indikaator ja fookustatud komponent oleksid taielikkult naehtavad (SC 2.4.12).

Kujunda fookuse indikaatorid teadlikult. Brauseri vaikimisi kontuur on sageli ebapiisav voi on CSS-lahtestuste poolt eemaldatud. Kujunda kohandatud fookuse stiil, millel on piisav kontrast ja mis on visuaalselt silmapaistev.

Puutesihikute suurused

Interaktiivsed elemendid peavad olema piisavalt suured, et neid saaks raskusteta aktiveerida. WCAG 2.2 nouab, et interaktiivsed sihikud oleksid vahemalt 24x24 CSS pikslit (SC 2.5.8), kaasa arvatud sihiku umberitsev tuuhruum. Tasemel AAA touseb noue 44x44 pikslile (SC 2.5.5). See on kasulik kasutajatele motoorsete puuete, varinaga voi piiratud osavusega, samuti koigile, kes kasutavad mobiilseadet raputavas keskkonnas.

Vormide disain

Vormid on uks olulisemaid valdkondi juurdepaasetava disaini jaoks. Igal vormi juhtelemendil peab olema selgelt naehtav silt, mis utleb kasutajale, millist teavet esitada. Veateated peavad olema konkreetsed, naehtavad ja paigutatud selle valja lahedusse, millele need viitavad. Paku juhiseid seal, kus vaja, ja valti toetumist ainult kohataietaja tekstile sildina — kohataietaja tekst kaob, kui kasutaja hakkab tippima, ja sellel on sageli ebapiisav kontrast.

Kujunda vigade valtimiseks. Luba kasutajatel sisestust enne esitamist labbi vaadata ja parandada, eriti oluliste tagajaergedega toimingute puhul nagu finantstehingud voi oiguslikud lepingud. Kui tuvastatakse vigu, paku selgeid soovitusi nende parandamiseks.

Liikumine ja animatsioon

Moned kasutajad kogevad krampe, migreene voi pearinglust animeeritud voi vilkuvast sisust. Mitte miski sinu veebisaidil ei tohi vilkuda rohkem kui kolm korda sekundis. Paku juhtelemente mis tahes sisu peatamiseks, peaetamiseks voi peitmiseks, mis liigub, vilgub voi kerib rohkem kui viis sekundit. Austa operatsioonisusteemi "prefers-reduced-motion" seadet ja paku vaehendatud liikumise alternatiive animatsioonidele.

Tekstipildid

Valti tekstipiltide kasutamist oma veebisaidil. Toeellist teksti saab suurendada, umemberformeerida ja abistavate tehnoloogiatega lugeda. Tekstipilte mitte. Ainsad erandid on logod ja olukorrad, kus teksti konkreetne visuaalne esitlus on edastatava teabe jaoks oluline.

Disaineri juurdepaasetavuse kontrollnimekiri

Enne mis tahes disaini arendusele uleandmist kontrolli: kontrastisuhted vastavad koigi teksti ja interaktiivsete elementide nouetele; varv ei ole kunagi ainus teabe indikaator; fookuse olekud on kujundatud koigi interaktiivsete elementide jaoks; puutesihikud vastavad minimaalsele suuruse noudele; navigeerimine on jaarjepidev koigil lehtedel; vigade olekud ja teated on selgelt kujundatud; teksti saab suurendada paigutusi lohkumata; animatsioonid austavad kasutaja eelistusi; ja koigil mittetekstilisel sisul on kavandatud tekstialternatiivid.