Jinsi ya Kufanya Tovuti Yako Ipatikane kwa Wote: Mwongozo wa Kuanzia wa WCAG 2.2

Ili kufanya tovuti ipatikane, jenga kwa namna ambayo watu wanaweza kuitumia kwa kibodi, screen reader, zoom au kifaa cha kubadili, pamoja na kipanya: tumia vipengele halisi vya HTML kwa vitufe, viungo, vichwa na lebo za fomu; wape picha alt text yenye maana; weka utofautishaji wa maandishi kuwa wa juu; na hakikisha focus inaonekana. Kiwango cha kulenga ni WCAG 2.2 Level AA. Vikagua vya kiotomatiki hugundua sehemu ya tatizo; jaribio la dakika kumi kwa kibodi na screen reader hugundua sehemu kubwa iliyobaki.

"Kupatikana" kunamaanisha nini kwa vitendo

Ufikiaji unahusu watu: mtu asiyeona anayetumia screen reader, mtu mwenye mtetemo wa mkono anayesogeza kwa kibodi, mtu mwenye uoni hafifu anayekuza hadi 200%, mtu anayesoma kwenye jua kali, au mtu mwenye mkono uliovunjika kwa muda. Ufikiaji mzuri huelekea kuifanya tovuti kuwa bora kwa kila mtu: muundo wazi, maandishi yanayosomeka, fomu zinazoeleza makosa yake.

Kiwango cha marejeo ni Web Content Accessibility Guidelines (WCAG) za W3C. Kufikia Septemba 2026, toleo la sasa ni WCAG 2.2 (lilichapishwa Oktoba 2023, kisha kusasishwa Desemba 2024); WCAG 3 ni rasimu ya mapema. WCAG imepangwa kwa kanuni nne (maudhui lazima yawe yanayoonekana, yanayoendeshwa, yanayoeleweka na imara) na ina viwango vitatu vya kufuata:

Sheria katika maeneo kadhaa zinarejelea WCAG; kwa mfano European Accessibility Act, ambayo imekuwa ikitumika kwa huduma nyingi za kidijitali zinazowalenga watumiaji katika EU tangu Juni 2025. Ni kanuni zipi zinakuhusu inategemea mahali unapofanyia kazi na unachouza; wasiliana na mshauri ukiwa na shaka. Mwongozo huu unashughulikia kazi ya vitendo.

Chaguzi: jinsi ya kufika hapo

Kwa tovuti nyingi ndogo, mbinu mbili za kwanza zinatosha: mwambie AI ijenge kwa ufikiaji tangu mwanzo, kisha kagua kabla ya uzinduzi.

Marekebisho yenye umuhimu zaidi

Tumia vipengele sahihi vya HTML

Ufikiaji mwingi unapatikana bure kwa HTML sahihi. <button> inaweza kupata focus, inafanya kazi na Enter na Space, na inatangazwa kama kitufe. <div> yenye click handler si hayo yote. Code iliyotengenezwa na AI wakati mwingine hutumia div zilizopambwa kwa kila kitu; omba vipengele vya semantic:

• <button> kwa vitendo, <a href> kwa urambazaji
• <h1> moja kwa kila ukurasa, kisha <h2>, <h3> kwa mpangilio sahihi; watumiaji wa screen reader huruka kati ya vichwa
• Landmarks: <header>, <nav>, <main>, <footer>
• <label> iliyounganishwa na kila sehemu ya fomu
• Lugha ya ukurasa kwenye <html lang="en">

Tumia sifa za ARIA pale tu hakuna kipengele asili kinachofaa; kwa mfano kwa seti maalum ya tabs au combobox. ARIA iliyo mbaya ni mbaya kuliko kutokuwepo kabisa.

Ufikiaji wa kibodi na focus inayoonekana

Kila kitu unachoweza kufanya kwa kipanya lazima kifanye kazi kwa kibodi pekee (WCAG 2.1.1). Bonyeza Tab kupitia ukurasa: kila kiungo, kitufe na sehemu vinapaswa kufikiwa kwa mpangilio wa kimantiki, na unapaswa kuona focus iko wapi kila wakati (2.4.7 Focus Visible). WCAG 2.2 iliongeza kwamba kipengele kilichofocus lazima kisifichwe kabisa nyuma ya vichwa vinavyoshikamana au mabango ya vidakuzi (2.4.11, Level AA).

Makosa ya kawaida: menyu zinazofunguka kwa hover pekee, modal zisizoshikilia focus au zisizoweza kufungwa kwa Escape, na outline: none kwenye CSS bila kitu cha kuchukua nafasi yake.

Maelezo mbadala ya maudhui

Kila picha yenye maana inahitaji alt text inayoeleza inaonyesha nini kwa muktadha ("Mpishi akipanga menyu ya kuonja", si "image1.jpg"). Picha za mapambo zipate alt="" tupu ili screen readers ziziruke. Vitufe vya aikoni pekee vinahitaji jina linaloweza kufikiwa ("Funga", "Tafuta"). Video zinahitaji captions; audio inahitaji transcript.

Rangi na utofautishaji

WCAG 2.2 AA inahitaji uwiano wa utofautishaji wa angalau 4.5:1 kwa maandishi ya kawaida na 3:1 kwa maandishi makubwa (1.4.3), na 3:1 kwa sehemu za kiolesura kama mipaka ya ingizo na aikoni zenye maana (1.4.11). Maandishi ya kijivu hafifu ya placeholder na vitufe vya rangi iliyofifia ndivyo vinavyoshindwa mara nyingi. Pia, usitumie rangi peke yake kubeba maana; mpaka mwekundu kwenye sehemu batili pia unahitaji ujumbe wa kosa.

Kubadilisha ukubwa na mpangilio

Maandishi lazima yabaki yanatumika yakikuzwa hadi 200% (1.4.4), na maudhui lazima yafanye kazi kwa upana wa pikseli 320 za CSS bila kusogea kando (1.4.10). Mpangilio unaojibu ukubwa unashughulikia sehemu kubwa ya hili.

Malengo, fomu na makosa

• Ukubwa wa lengo: WCAG 2.2 AA inataka malengo ya kipanya angalau pikseli 24 kwa 24 za CSS, au nafasi ya kutosha kuzunguka madogo (2.5.8). Kubwa ni rahisi zaidi kwenye simu.
• Fomu: lebo zinazoonekana (si placeholder pekee), maelekezo wazi, na ujumbe wa makosa unaoeleza kilicho kibaya na jinsi ya kukirekebisha, karibu na sehemu husika.
• Kuingia: usiwafanye watu kutatua fumbo au kunakili msimbo bila njia mbadala; ruhusu wasimamizi wa nenosiri na kubandika (3.3.8 Accessible Authentication).

Maombi yanayofanya kazi

Jenga tovuti hii ikidhi WCAG 2.2 Level AA: landmarks za HTML za semantic, h1 moja kwa kila ukurasa na vichwa kwa mpangilio, vipengele halisi vya button na link, lebo kwenye kila sehemu ya fomu, mitindo ya focus inayoonekana, utofautishaji wa maandishi wa angalau 4.5:1, alt text kwenye picha zenye maana na alt="" kwenye za mapambo, na html lang iwekwe.

Kagua kurasa za /signup na /checkout kwa ufikiaji. Angalia matumizi ya kibodi pekee, mpangilio wa focus, focus inayoonekana, lebo, ujumbe wa makosa, utofautishaji na majina ya screen reader kwa vitufe vya aikoni. Orodhesha kila tatizo pamoja na kigezo cha WCAG, kisha yarekebishe bila kubadilisha muundo wa kuona zaidi ya inavyohitajika.

Menyu ya simu haiwezi kutumiwa kwa kibodi. Ifanye kuwa kitufe chenye aria-expanded, hamisha focus ndani ya menyu inapofunguka, ifunge kwa Escape na urudishe focus kwenye kitufe.

Hatua kwa hatua

1. Endesha ukaguzi wa kiotomatiki. Sehemu ya Accessibility ya Lighthouse kwenye Chrome DevTools, au kiendelezi cha axe kwenye kivinjari, kwenye kila ukurasa mkuu. Rekebisha kila kitu kinachoripotiwa.
2. Toa kipanya. Pitia kila ukurasa kwa Tab na ukamilishe kila kazi kuu: kujisajili, kutafuta, kulipa. Andika chochote usichoweza kufikia, usichoona focus yake, au usichoweza kutoka nacho.
3. Kuza hadi 200% na nyemba dirisha hadi upana wa simu. Hakuna kitu kinachopaswa kukatika au kuhitaji kusogea kando.
4. Jaribu screen reader kwa dakika kumi: VoiceOver kwenye Mac na iPhone, TalkBack kwenye Android, au NVDA kwenye Windows (ni bure). Sikiliza vichwa, viungo na sehemu za fomu. "Button" bila jina, au "link, click here", maana yake ni kazi ya kufanya.
5. Kagua utofautishaji wa maandishi, vitufe na ingizo kwa kikagua cha utofautishaji.
6. Rekebisha, kisha jaribu tena kazi zilezile.
7. Chapisha taarifa ya ufikiaji inayoeleza kiwango unachokilenga na jinsi ya kuripoti matatizo, kisha jibu ripoti hizo.

Makosa ya kawaida

• Kutegemea widget ya overlay badala ya kurekebisha code.
• Kuondoa mistari ya focus kwa sababu inaonekana haipendezi, bila mbadala.
• Maandishi ya placeholder kama lebo pekee. Yanatoweka mtu anapoanza kuandika na mara nyingi yana utofautishaji hafifu.
• Viungo vya "Click here" na "Read more". Nje ya muktadha, watumiaji wa screen reader husikia orodha ya viungo vinavyofanana.
• Alt text iliyojaa maneno muhimu. Alt text ni kwa watu; eleza picha.
• Kupima mara moja tu. Kila kipengele kipya kinaweza kuvunja ufikiaji wa kibodi. Ongeza pitio la kibodi kwenye majaribio yako kabla ya uzinduzi.

Orodha ya kukagua ufikiaji

• Ukaguzi wa kiotomatiki (Lighthouse au axe) safi kwenye kurasa kuu
• Kila kazi inaweza kukamilika kwa kibodi pekee
• Focus daima inaonekana na haifichwi nyuma ya vipengele vinavyoshikamana
• Vichwa vya semantic, landmarks, vitufe na viungo; lang imewekwa
• Alt text yenye maana; picha za mapambo alt=""; captions kwenye video
• Utofautishaji wa maandishi ≥ 4.5:1 (maandishi makubwa ≥ 3:1); sehemu za UI ≥ 3:1
• Inafanya kazi kwa zoom ya 200% na upana wa 320 px
• Kila sehemu ya fomu ina lebo inayoonekana na ujumbe wazi wa makosa
• Taarifa ya ufikiaji yenye njia ya kuripoti matatizo

Kwa dhana zilizo nyuma ya haya, soma ufikiaji wa wavuti ni nini. Muundo unaopatikana na muundo mzuri unaingiliana sana; jinsi ya kubuni app nzuri kwa kuona kwa AI inashughulikia upande wa kuona.

Ufikiaji kwenye Mythex

Mythex hujenga kwa kiwango chochote unachoomba, kwa hiyo weka "WCAG 2.2 AA" kwenye ombi lako la kwanza na kwenye maombi yanayofuata. Unaweza kutumia fremu ya ukubwa wa simu ya Preview kukagua skrini ndogo (Preview and Code), lakini majaribio ya kibodi, zoom na screen reader hufanya kazi vizuri zaidi kwenye URL iliyochapishwa au preview iliyofunguliwa kwenye kichupo chake. Muombe agent akague ukurasa, arekebishe alichopata, kisha ujaribu marekebisho mwenyewe; ukaguzi wa kiotomatiki ni mwanzo, si kibali cha mwisho.

Maswali