Aðgengi fyrir hönnuði: Hönnun inngildandi sjónrænnar og samskiptahönnunar

Aðgengileg vefsíða byrjar með aðgengilegri hönnun. Margar af algengustu aðgengisbilunum — ónóg litaskerpa, óljós leiðsögn, ruglandi skipulag, vísir um fókus sem vantar — eiga uppruna sinn í ákvörðunum sem teknar eru á hönnunarstigi. Þegar kóðinn er skrifaður eru þessi mál innbyggð og lagfæring þeirra krefst endurhönnunar frekar en einfaldra kóðaleiðréttinga.

Sem hönnuður hefur þú meiri áhrif á aðgengi en næstum allir aðrir í teyminu. Valið sem þú tekur um liti, leturgerðir, bil, leiðsagnarmynstur og samskiptalíkön ákvarðar hvort milljónir notenda geti haft skilvirk samskipti við vöruna þína.

Litaskerpa

Ónóg litaskerpa er eitt algengasta aðgengisvandamálið á vefnum. WCAG krefst lágmarks skerpuhlutfalls 4,5:1 milli texta og bakgrunns fyrir venjulega stærð texta, og 3:1 fyrir stóran texta (skilgreindur sem 18pt venjulegur eða 14pt feitletur). Á stigi AAA hækka kröfurnar í 7:1 fyrir venjulegan texta og 4,5:1 fyrir stóran texta.

Þessar tölur eru til vegna þess að fólk með skerta sjón, eldrandi augu eða litblinduskerðingar þarfnast nægjanlegrar skerpu til að greina texta frá bakgrunni hans. Ljósgrátt letur á hvítum bakgrunni kann að líta flott út í hönnunarsýnishorni en verður ólesanlegt fyrir verulegan hluta notenda.

Efni sem ekki er texti hefur einnig skerpukröfur. Notendaviðmótsþættir — hnappar, eyðublaðareitir, tákn, fókusvísar — og merkingarbærir grafískir hlutir verða að viðhalda að minnsta kosti 3:1 skerpuhlutfalli við aðliggjandi liti. Þetta tryggir að notendur geti auðkennt gagnvirka þætti og skilið upplýsingagrafík.

Notaðu skerpuprófunarverkfæri í gegnum allt hönnunarferlið, ekki aðeins í lokin. Verkfæri eins og WebAIM Contrast Checker eða Colour Contrast Analyser leyfa þér að staðfesta hlutföll áður en þú skuldbindur þig við litapallettu.

Litur sem upplýsingar

Litur má aldrei vera eina sjónræna leiðin til að miðla upplýsingum. Ef þú notar rautt til að tákna villur og grænt til að tákna árangur geta litblindir notendur ekki greint á milli þessara tveggja ástanda. Bættu alltaf við viðbótarvísum — táknum, textamerkjum, mynstrum eða undirstrikun.

Þetta á einnig við um hlekki. Ef hlekkir innan textablokkar eru aðgreindir aðeins með lit verða þeir að uppfylla 3:1 skerpuhlutfall við umhverfistexta eða vera bætt við sjónrænum vísi eins og undirstrikun.

Leturgerðir og textastærð

Allur texti á vefsíðunni þinni verður að vera stækkanlegar upp í 200% án þess að neitt efni eða virkni tapist. Þetta þýðir að hönnuðu með sveigjanlegum, afstæðum einingum frekar en föstum pixlastærðum, og tryggðu að skipulagið lagi sig vel þegar texti er stækkaður.

WCAG 2.2 inniheldur einnig kröfur um textabil. Notendur verða að geta breytt línuhæð í að minnsta kosti 1,5 sinnum leturstærðina, málsgreinarbil í minnst 2 sinnum leturstærðina, stafabil í 0,12 sinnum leturstærðina og orðabil í 0,16 sinnum leturstærðina — án þess að neitt efni eða virkni tapist.

Hönnun hlekkja

Hlekkir verða að vera sjónrænt aðgreindir frá umhverfistexta. Þeir ættu að vera lýsandi og hnitmiðaðir og segja notendum hvað þeir munu finna þegar þeir fylgja hlekknum. Notaðu aldrei „smelltu hér" eða „lesa meira" sem hlekkjatexta án viðbótarsamhengis, þar sem þessar orðasambönd eru merkingarlausar fyrir skjálesaranotendur sem leiðsögn eftir hlekklista.

Leiðsögn og samkvæmni

Leiðsögn verður að vera samkvæm á öllum síðum vefsins þíns. Notendur sem reiða sig á lyklaborðsleiðsögn eða skjálesara byggja upp hugrænt líkan af uppbyggingu vefsíðunnar og óvæntar breytingar trufl það líkan. WCAG krefst þess að leiðsagnarkerfi sem birtast á mörgum síðum komi fram í sömu hlutfallslegri röð hvert sinn, og að þættir með sömu virkni séu auðkenndir á samkvæman hátt.

Fókusvísar

Þegar notandi leiðir sér leið um síðuna þína með lyklaborði verður sjónrænn vísir að vera til staðar sem sýnir hvaða þáttur er með fókus. Þessi fókusvísir verður að vera greinilega sýnilegur — WCAG 2.2 krefst þess að hann sé ekki falinn af öðru efni (SC 2.4.11) og á stigi AAA að allur fókusvísirinn og fókusþátturinn séu fullkomlega sýnilegir (SC 2.4.12).

Hannaðu fókusvísa af ásettu ráði. Sjálfgefin úlínurammi vafrans er oft ónóg eða er fjarlægð með CSS endurstillingum. Hannaðu sérsniðinn fókusstíl sem hefur nægjanlega litaskerpu og er sjónrænt áberandi.

Snertimarkstærðir

Gagnvirkir þættir verða að vera nógu stórir til að hægt sé að virkja þá án erfiðleika. WCAG 2.2 krefst þess að gagnvirk smellsvæði séu að minnsta kosti 24x24 CSS pixlar (SC 2.5.8), að meðtöldu hvítu rými í kringum markið. Á stigi AAA hækkar krafan í 44x44 pixla (SC 2.5.5). Þetta kemur notendum með hreyfihamlanir, skjálfta eða takmarkaða fingurfærni til góða, sem og hverjum sem notar farsíma á hráum vegi.

Eyðublaðshönnun

Eyðublöð eru eitt mikilvægasta svæðið fyrir aðgengilega hönnun. Sérhver eyðublaðsstýring þarf greinilega sýnilegt merki sem segir notandanum hvaða upplýsingar á að gefa. Villuboð verða að vera sértæk, sýnileg og staðsett nálægt reitnum sem þau vísa til. Gefðu leiðbeiningar þar sem þörf er á og reiddu þig ekki eingöngu á staðfyllingartexta sem merki — staðfyllingartexti hverfur þegar notandinn byrjar að slá inn og hefur oft ónóga litaskerpu.

Hannaðu til að koma í veg fyrir villur. Leyfðu notendum að fara yfir og leiðrétta innslætti áður en eyðublað er sent, sérstaklega fyrir aðgerðir með verulegum afleiðingum eins og fjármálaviðskipti eða lagalega samninga. Þegar villur finnast skaltu gefa skýrar tillögur um hvernig á að lagfæra þær.

Hreyfing og hreyfimyndir

Sumir notendur upplifa flog, mígreni eða svima af hreyfimynd eða flikkrandi efni. Ekkert á vefsíðunni þinni ætti að flikkra oftar en þrisvar sinnum á sekúndu. Gefðu stýringar til að stöðva, stoppa eða fela efni sem hreyfist, blikkar eða skrollar í meira en fimm sekúndur. Virðaðu „prefers-reduced-motion" stillingu stýrikerfisins og bjóddu upp á valkosti með minni hreyfingu fyrir hreyfimyndir.

Myndir af texta

Forðastu að nota myndir af texta á vefsíðunni þinni. Raunverulegur texti er stækkanlegar, endurmótunarlegur og lesanlegur af hjálpartækni. Myndir af texta eru það ekki. Einu undantekningarnar eru merki og aðstæður þar sem sérstök sjónræn framsetning texta er nauðsynleg fyrir upplýsingarnar sem verið er að miðla.

Aðgengisgátlisti hönnuðar

Áður en þú afhendir hönnun til þróunar skaltu staðfesta: skerpuhlutföll uppfylla kröfur fyrir allan texta og gagnvirka þætti; litur er aldrei eini vísir upplýsinga; fókusástöður eru hannaðar fyrir alla gagnvirka þætti; snertimarkmið uppfylla lágmarksstærðarkröfur; leiðsögn er samkvæm á öllum síðum; villustöður og skilaboð eru skýrt hönnuð; texti getur stækkað án þess að brjóta skipulag; hreyfimyndir virða óskir notenda; og allt efni sem ekki er texti hefur áætlaða textavalkosti.