Sida Website-kaaga Loo Yeelo Mid La Heli Karo: Hage Bilow WCAG 2.2

Si aad website-ka u yeelato mid la heli karo, u dhis si dadku ugu isticmaali karaan keyboard, screen reader, zoom ama qalab beddelka ah, iyo sidoo kale mouse-ka: isticmaal HTML-ka dhabta ah ee badhamada, linkiyada, madax-cinwaanka iyo labels-ka foomyada, u sii alt text macno leh sawirrada, ilaali isbarbardhigga qoraalka oo sare, oo ka dhig focus-ka oo muuqda. Heerka loo yaaqo waa WCAG 2.2 Level AA. Hubiyayaasha otomaatiga ahi qayb ka mid ah dhibaatada ayay qabtaan; tijaabo toban daqiiqo ah oo keyboard iyo screen reader ah ayaa qabta inta kale badi.

Waxa “la heli karo” ka dhigan yahay dhabta ah

Helitaanku wuxuu ku saabsan yahay dadka: qof indho la’aan oo screen reader isticmaala, qof gacmo gariiraya oo keyboard ku socda, qof aragtiisu hooseyso oo 200% ku zoomeeya, qof akhrinaya iftiinka qorraxda, qof gacanta jabsan oo ku meel gaar ah. Helitaanka wanaagsan wuxuu inta badan site-ka u wanaajiyaa dhammaan — qaab-dhismeed cad, qoraal la akhriyi karo, foomyo sharxa khaladaadkooda.

Tilmaamaha tixraaca waa Web Content Accessibility Guidelines (WCAG) ee W3C. Sida bisha Sebteembar 2026, nooca hadda jira waa WCAG 2.2 (la daabacay Oktoobar 2023, la cusboonaysiiyay Diseembar 2024); WCAG 3 waa qabyo hore. WCAG waxaa lagu habeeyay afar mabda’ — nuxurka waa inuu noqdaa la arki karo, la hawlgali karo, la fahmi karo iyo adkaysi leh — waxana leh saddex heer oo waafaqsanaan ah:

Sharciyo dhowr meelood ayaa tixraacaya WCAG — tusaale ahaan, European Accessibility Act, oo khuseeyay adeegyo dijitaal badan oo macaamiisha u ah EU tan iyo Juun 2025. Xeerarka kugu khuseeya waxay ku xidhan yihiin meesha aad ka shaqeyso iyo waxa aad iibinayso; ka la tashii talo-bixiye haddii aadan hubin. Hagahan wuxuu daboolayaa shaqada dhabta ah.

Ikhtiyaarada: sida loo gaaro

Site-yada yaryar inta badan labada habba hore ayaa ku filan: u sheeg AI-da inuu si helitaan leh u dhiso laga bilaabo bilowga, kadibna hubi ka hor inta aan la furin.

Hagaajinta ugu muhiimsan

Isticmaal elementiyada HTML ee saxda ah

Helitaanka badiba wuxuu ku yimaadaa HTML sax ah oo bilaash ah. <button> waa mid la xulan karo, waxay ku shaqeysaa Enter iyo Space, waxaana lagu dhawaaqaa badhan. <div> leh click handler waxba kuma lahan kuwaas oo dhan. Koodka AI-ga ah mararka qaarkood wuxuu isticmaalaa div qaabaysan wax kasta; codso elementiyo macno leh:

• <button> ficillada, <a href> navigation-ka
• Hal <h1> bog kasta, kadibna <h2>, <h3> isku xigxig ah — isticmaaleyaasha screen reader-ka waxay ku boodaan madax-cinwaanka
• Landmarks: <header>, <nav>, <main>, <footer>
• <label> la xiriiriyay meel kasta oo foom ah
• Luqadda bogga oo ku jirta <html lang="en">

Isticmaal ARIA attributes kaliya markii element dabiici ah aanu ku habboonayn — tusaale ahaan, tab set ama combobox gaar ah. ARIA qaldan way ka xun tahay midka aan lahayn.

Keyboard-ka iyo focus-ka oo muuqda

Wax kasta oo mouse-ka lagu sameeyo waa inay ku shaqeeyaan keyboard-ka keligiis (WCAG 2.1.1). Tab ku riix bogga: link kasta, badhan kasta iyo meel kasta oo foom ah waa inay gaari karaan habka macquulka ah, waana inaad had iyo jeer aragtaa focus-ka halka uu joogo (2.4.7 Focus Visible). WCAG 2.2 wuxuu ku daray in elementiga focus-ka leh uusan gabi ahaanba ku dhumin madax-cinwaanka joogtada ah ama banner-ka cookies-ka (2.4.11, Level AA).

Fashilaadka caadiga ah: menus-ka oo kaliya hover-ka ku furmaya, modals-ka aan focus-ka xidhin ama aan Escape lagu xidhi karin, iyo outline: none CSS-ka oo aan wax lagu beddelin.

Qoraallada beddelka ah

Sawir kasta oo macno leh wuxuu u baahan yahay alt text oo sheegaya waxa uu tusayo macnaha ku jira xaaladda (“Kari oo barbaari menu-ga dhadhanka”, ma aha “image1.jpg”). Sawirrada qurxinta ah waxay helaan alt="" madhan si screen reader-ku u dhaafo. Badhamada astaamaha keliya leh waxay u baahan yihiin magac la heli karo (“Xir”, “Raadi”). Fiidiyowyada waxay u baahan yihiin captions; codka wuxuu u baahan yahay transcript.

Midabka iyo isbarbardhigga

WCAG 2.2 AA wuxuu rabaa isbarbardhig ugu yaraan 4.5:1 qoraalka caadiga ah iyo 3:1 qoraalka weyn (1.4.3), iyo 3:1 qaybaha interface-ka sida xuduudaha input-ka iyo astaamaha macnaha leh (1.4.11). Qoraalka placeholder-ka ee cawlan iyo badhamada kaala fudud ayaa ah fashilaadka caadiga ah. Sidoo kale, midab keliya ha ugu isticmaalin macno — xuduud cas oo ku yaal meel khaldan waa inuu leeyahay fariin khalad sidoo kale.

Cabbirka iyo dib-u-habeynta

Qoraalku wuxuu ku sii jiri karaa mid la isticmaali karo marka la zoomeeyo 200% (1.4.4), mana ka biyo-shubi karo 320 CSS pixel gudihiisa iyada oo aan dhinac loo scroll-garayn (1.4.10). Qaab-dhismeed jawaabeeya badanaa wuxuu xalliyaa intaas oo dhan.

Bartamaha, foomyada iyo khaladaadka

• Cabbirka bartamaha: WCAG 2.2 AA wuxuu rabaa bartamaha ugu yaraan 24 x 24 CSS pixel, ama masaafo ku filan oo ka yaraanba (2.5.8). Weyn waa mid kaalmaysa telefoonnada.
• Foomyada: labels la arki karo (ma aha placeholder keliya), tilmaamo cad, iyo fariimo khaladaad oo sheega waxa qaldan iyo sida loo hagaajiyo, meesha ku dhow goobta foomka.
• Login: ha ka dhigin dadka inay xalliyaan qaas ama ku qoraan koodka iyada oo aan kale lahayn; oggolow password managers iyo ku dhejinta (3.3.8 Accessible Authentication).

Prompts-ka shaqeeya

Dhis site-kan si uu u buuxiyo WCAG 2.2 Level AA: HTML landmarks oo macno leh, hal h1 bog kasta oo madax-cinwaanno isku xigxig ah, elementiyo button iyo link dhab ah, labels meel kasta oo foom ah, style-ka focus-ka oo muuqda, isbarbardhig qoraal ugu yaraan 4.5:1, alt text sawirrada macnaha leh iyo alt="" kuwa qurxinta ah, iyo html lang oo la dejiyay.

Hubi bogagga /signup iyo /checkout helitaanka. Hubi isticmaalka keyboard-ka oo keliya, focus order, focus-ka muuqda, labels, fariimaha khaladaadka, isbarbardhigga iyo magacyada screen reader-ka ee badhamada astaamaha. Liis dhibaato kasta oo leh tilmaanta WCAG, kadibna hagaaji iyada oo aan naqshadda aragga aad uga badin inta loo baahan yahay.

Menu-ga mobile-ka keyboard-ka lagama isticmaali karo. Ka dhig badhan leh aria-expanded, u dhaqaaq focus-ka menu-ga markii la furo, xir Escape, kadibna focus-ka ku celi badhanka.

Tallaabo tallaabo

1. Samee hubin otomaatig ah. Qaybta Accessibility ee Lighthouse ee Chrome DevTools, ama extension-ka axe ee browser-ka, bog kasta oo muhiim ah. Hagaaji wixii uu sheego oo dhan.
2. Mouse-ka ka saar. Tab ku riix bog kasta oo dhammaystir hawl kasta oo muhiim ah — diiwaan geli, raadi, bixi. Qor wax kasta oo aanad gaari karin, focus aanad ku arki karin, ama aanad ka bixi karin.
3. Zoom 200% oo daaqada ku yaree ballac telefoon. Waxba ma gooynayo ama u baahan in dhinac loo scroll-gareeyo.
4. Isku day screen reader toban daqiiqo: VoiceOver Mac iyo iPhone, TalkBack Android, ama NVDA Windows (bilaash). Dhegayso headings, links iyo foomyada. “Button” oo aan magac lahayn, ama “link, click here”, waa shaqo la sameeyo.
5. Hubi isbarbardhigga qoraalka, badhamada iyo inputs-ka adigoo isticmaalaya hubiye isbarbardhig.
6. Hagaaji, kadibna mar kale tijaabi isla hawlaha.
7. Daabac bayaan helitaan oo sheegaya heerka aad ku doonayso iyo sida loo soo sheegi karo dhibaatooyinka — kadibna jawaab dhibaatooyinkaas.

Khaladaadka caadiga ah

• Widget overlay ku tiirsanaanta halkii aad koodka hagaajin lahayd.
• Focus outlines-ka oo la tirtiro sababtoo ah waxay u muuqdaan kuwo aan nadiifnayn, iyada oo aan wax lagu beddelin.
• Qoraalka placeholder-ka oo kaliya label ahaan. Wuu baaba’aa markii qof bilaabo qorista, inta badan isbarbardhigiisuna hooseeyaa.
• Link-yada “Riix halkan” iyo “Akhri wax dheeraad ah”. Meel ka soo baxsan xaaladda, isticmaaleyaasha screen reader-ka waxay maqlaan liis link-yo isku mid ah.
• Alt text oo ereyo furaha lagu buuxiyay. Alt text waa dadka loogu talagalay; sharax sawirka.
• Mar keliya tijaabinta. Muuqaal cusub kasta wuxuu burburin karaa gelitaanka keyboard-ka. Ku dar marin keyboard ah tijaabinta ka hor furitaanka.

Liiska helitaanka

• Hubinta otomaatiga ah (Lighthouse ama axe) nadiif ku ah bogagga muhiimka ah
• Hawl kasta waa in lagu dhammaystiri karaa keyboard-ka keligiis
• Focus waa had iyo jeer la arki karaa oo lagama dhuumanayo elementiyo joogto ah
• Madax-cinwaanno macno leh, landmarks, badhamo iyo link-yo; lang la dejiyay
• Alt text macno leh; sawirrada qurxinta alt=""; captions fiidiyowga
• Isbarbardhig qoraal ≥ 4.5:1 (qoraal weyn ≥ 3:1); qaybaha UI ≥ 3:1
• Waxay shaqeysaa zoom 200% iyo ballac 320 px
• Foom kasta wuxuu leeyahay label la arki karo iyo fariimo khaladaad cad
• Bayaan helitaan oo leh hab lagu soo sheegi karo dhibaatooyinka

Si aad fikradaha gadaashooda u akhrido, akhri waa maxay helitaanka websaydhka. Naqshadda la heli karo iyo naqshadda wanaagsan way is dhex galaan; sida app wanaagsan u naqshadeyso AI-da wuxuu daboolaa dhinaca muuqaalka.

Helitaanka Mythex dhexdiisa

Mythex wuxuu dhisaa heerka aad codsato, sidaas darteed “WCAG 2.2 AA” ku qor prompt-kaaga koowaad iyo talooyinka dambe. Waxaad isticmaali kartaa frame-ka cabbirka telefoonka ee Preview si aad u hubiso shaashadaha yaryar (Preview and Code), laakiin tijaabooyinka keyboard-ka, zoom-ka iyo screen reader-ka waxay ugu fiican yihiin URL-ka la daabacay ama preview la furay tab gaar ah. Wakiilka codso inuu bog hubiyo, wuu hagaajiyo wixii uu helo, kadibna adigu hagaajinta tijaabi — hubin otomaatig ah waa bilow, ma aha ogolaansho dhammaystiran.

Su'aalaha