Aċċessibilità għad-Designers: Oħloq Disinn Viżwali u ta' Interazzjoni Inklużiv

Website aċċessibbli tibda b'disinn aċċessibbli. Ħafna mill-fallimenti l-iktar komuni tal-aċċessibilità — kuntrast insuffiċjenti tal-kuluri, navigazzjoni mhux ċara, layouts konfużi, indikaturi tal-fokus nieqsa — joriġinaw f'deċiżjonijiet li jittieħdu waqt il-fażi tad-disinn. Fiż-żmien li l-kodiċi jinkteb, dawn il-kwistjonijiet ikunu diġà integrati, u biex tiffissahom teħtieġ tiddisinja mill-ġdid minflok sempliċement taġġusta l-kodiċi.

Bħala designer, għandek iktar influwenza fuq l-aċċessibilità minn kważi kulħadd ieħor fit-tim. L-għażliet li tagħmel dwar il-kulur, it-tipografija, l-ispazjatura, il-mudelli tan-navigazzjoni u l-mudelli ta' interazzjoni jiddeterminaw jekk miljuni ta' utenti jistgħux jinteraġixxu b'mod effettiv mal-prodott tiegħek.

Kuntrast tal-Kuluri

Kuntrast insuffiċjenti tal-kuluri huwa wieħed mill-iktar kwistjonijiet komuni ta' aċċessibilità fuq il-web. Il-WCAG jitlob proporzjon minimu ta' kuntrast ta' 4.5:1 bejn it-test u l-isfond tiegħu għat-test ta' daqs normali, u 3:1 għat-test kbir (iddefinit bħala 18pt regular jew 14pt bold). Fil-Livell AAA, ir-rekwiżit jiżdied għal 7:1 għat-test normali u 4.5:1 għat-test kbir.

Dawn il-proporzjonijiet jeżistu minħabba li persuni b'viżjoni baxxa, għajnejn li qed jixjieħu, jew defiċjenzi fil-viżjoni tal-kuluri jeħtieġu kuntrast biżżejjed biex jiddistingwu t-test mill-isfond tiegħu. Test griż ċar fuq sfond abjad jista' jidher eleganti f'mockup tad-disinn iżda jsir illegġibbli għal perċentwal sinifikanti tal-utenti.

Elementi mhux test ukoll għandhom rekwiżiti ta' kuntrast. Komponenti tal-interface tal-utent — buttuni, oqsma tal-formoli, ikoni, indikaturi tal-fokus — u oġġetti grafiċi sinifikanti jridu jżommu mill-inqas proporzjon ta' kuntrast ta' 3:1 kontra kuluri adjaċenti. Dan jiżgura li l-utenti jistgħu jidentifikaw elementi interattivi u jifhmu grafiċi informattivi.

Uża għodod ta' verifika tal-kuntrast matul-proċess kollu tad-disinn tiegħek, mhux biss fl-aħħar. Għodod bħall-WebAIM Contrast Checker jew il-Colour Contrast Analyser jħalluk tivverifika l-proporzjonijiet qabel ma tikkommetti ruħek għal paletta ta' kuluri.

Il-Kulur bħala Informazzjoni

Il-kulur m'għandu qatt ikun l-uniku mezz viżwali biex tikkomunika informazzjoni. Jekk tuża l-aħmar biex tindika żbalji u l-aħdar biex tindika suċċess, utenti li huma daltonici jistgħu ma jkunux jistgħu jiddistingwu bejn iż-żewġ stati. Dejjem issupplimenta l-kulur b'indikaturi addizzjonali — ikoni, tikketti tat-test, mudelli, jew underlines.

Dan japplika wkoll għal-links. Jekk links fi ħdan blokka ta' test huma distinti biss bil-kulur, iridu jilħqu proporzjon ta' kuntrast ta' 3:1 kontra t-test tal-madwar jew ikunu ssupplimentati b'indikatur viżwali ieħor bħal underline.

Tipografija u Daqs tat-Test

It-test kollu fuq il-website tiegħek irid ikun jista' jiġi ridimensjonat sa 200% mingħajr telf ta' kontenut jew funzjonalità. Dan ifisser li tiddisinja b'unitajiet flessibbli u relattivi minflok daqsijiet fissi ta' pixels, u tiżgura li l-layouts tiegħek jadattaw b'mod graċċjuż meta t-test jiġi mkabbar.

Il-WCAG 2.2 jinkludi wkoll rekwiżiti għall-ispazjatura tat-test. L-utenti jridu jkunu jistgħu jaġġustaw l-għoli tal-linja għal mill-inqas 1.5 darbiet id-daqs tal-font, l-ispazjatura tal-paragrafu għal mill-inqas darbtejn id-daqs tal-font, l-ispazjatura tal-ittri għal 0.12 darbiet id-daqs tal-font, u l-ispazjatura tal-kliem għal 0.16 darbiet id-daqs tal-font — mingħajr telf ta' kontenut jew funzjonalità.

Disinn tal-Links

Il-links iridu jkunu viżwalment distinti mit-test tal-madwar. Għandhom ikunu deskrittivi u konċiżi, jgħidu lill-utenti x'se jsibu meta jsegwu l-link. Qatt tuża "ikklikkja hawn" jew "aqra iktar" bħala link text mingħajr kuntest addizzjonali, peress li dawn il-frażijiet huma mingħajr tifsira għall-utenti ta' screen readers li jinnavigaw permezz ta' listi ta' links.

Navigazzjoni u Konsistenza

In-navigazzjoni trid tkun konsistenti fil-paġni kollha tas-sit tiegħek. Utenti li joqogħdu fuq navigazzjoni bil-keyboard jew screen readers jibnu mudell mentali tal-istruttura tas-sit tiegħek, u bidliet mhux mistennija jfixklu dak il-mudell. Il-WCAG jitlob li mekkaniżmi ta' navigazzjoni li jidhru fuq diversi paġni jseħħu fl-istess ordni relattiv kull darba, u li komponenti bl-istess funzjonalità jiġu identifikati b'mod konsistenti.

Indikaturi tal-Fokus

Meta utent jinnnaviga s-sit tiegħek bil-keyboard, irid ikun hemm indikatur viżibbli li juri liema element bħalissa għandu l-fokus. Dan l-indikatur tal-fokus irid ikun viżibbli b'mod ċar — il-WCAG 2.2 jitlob li ma jkunx moħbi minn kontenut ieħor (SC 2.4.11) u, fil-Livell AAA, li l-indikatur tal-fokus kollu u l-komponent iffokat ikunu kompletament viżibbli (SC 2.4.12).

Iddisinja l-indikaturi tal-fokus intenzjonalment. L-outline default tal-browser ħafna drabi mhux biżżejjed jew jitneħħa minn CSS resets. Iddisinja stil ta' fokus personalizzat li għandu kuntrast biżżejjed u jkun viżwalment prominenti.

Daqsijiet tat-Touch Target

Elementi interattivi jridu jkunu kbar biżżejjed biex jiġu attivati mingħajr diffikultà. Il-WCAG 2.2 jitlob li targets interattivi jkunu mill-inqas 24×24 CSS pixels (SC 2.5.8), inkluż kwalunkwe spazju abjad madwar it-target. Fil-Livell AAA, ir-rekwiżit jiżdied għal 44×44 pixels (SC 2.5.5). Dan jibbenefika lill-utenti b'diżabilitajiet motoriċi, rogħda, jew desterità limitata, kif ukoll lil kulħadd li juża apparat mobbajl f'ambjent imqalleb.

Disinn tal-Formoli

Il-formoli huma waħda mill-oqsma l-iktar kritiċi għad-disinn aċċessibbli. Kull kontroll tal-formola jeħtieġ tikketta viżibbli b'mod ċar li tgħid lill-utent liema informazzjoni għandu jipprovdi. Il-messaġġi tal-iżbalji jridu jkunu speċifiċi, viżibbli, u pożizzjonati qrib il-qasam li jirreferu għalih. Ipprovdi istruzzjonijiet fejn meħtieġ, u evita li toqgħod biss fuq placeholder text bħala tikketta — il-placeholder text jgħib meta l-utent jibda jittajpja u ħafna drabi għandu kuntrast insuffiċjenti.

Iddisinja għall-prevenzjoni tal-iżbalji. Ħalli l-utenti jirrivedjaw u jikkoreġu l-input qabel is-sottomissjoni, speċjalment għal azzjonijiet b'konsegwenzi sinifikanti bħal tranżazzjonijiet finanzjarji jew ftehimiet legali. Meta jiġu identifikati żbalji, ipprovdi suġġerimenti ċari dwar kif tiffissahom.

Moviment u Animazzjoni

Xi utenti jesperjenzaw aċċessjonijiet, uġigħ ta' ras sever, jew sturdament minn kontenut animat jew li jleħħ. Xejn fuq il-website tiegħek m'għandu jleħħ iktar minn tliet darbiet fis-sekonda. Ipprovdi kontrolli biex twaqqaf, tieqaf, jew taħbi kwalunkwe kontenut li jiċċaqlaq, jleħħ, jew jiskrollja għal iktar minn ħames sekondi. Irrispetta s-setting "prefers-reduced-motion" tas-sistema operattiva u pprovdi alternattivi b'moviment ridott għall-animazzjonijiet.

Immaġini tat-Test

Evita li tuża immaġini tat-test fuq il-website tiegħek. Test reali jista' jiġi ridimensjonat, iffurmatjat mill-ġdid, u moqri minn teknoloġiji assistivi. Immaġini tat-test le. L-uniċi eċċezzjonijiet huma logos u sitwazzjonijiet fejn preżentazzjoni viżwali partikolari tat-test hija essenzjali għall-informazzjoni li qed tiġi kkomunikata.

Ċecklist tal-Aċċessibilità għad-Designers

Qabel ma tgħaddi kwalunkwe disinn għall-iżvilupp, ivverifika: il-proporzjonijiet ta' kuntrast jilħqu r-rekwiżiti għat-test kollu u l-elementi interattivi; il-kulur qatt mhu l-uniku indikatur ta' informazzjoni; l-istati tal-fokus huma ddisinjati għall-elementi interattivi kollha; it-touch targets jilħqu r-rekwiżiti ta' daqs minimu; in-navigazzjoni hija konsistenti fil-paġni kollha; l-istati ta' żball u l-messaġġi huma ddisinjati b'mod ċar; it-test jista' jiġi ridimensjonat mingħajr ma jikser il-layouts; l-animazzjonijiet jirrispettaw il-preferenzi tal-utent; u l-kontenut kollu mhux test għandu alternattivi tat-test ippjanati.