𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀

Fomu nyingi hufanya kazi vizuri kwa watumiaji wanaoweza kuona lakini hushindwa kwa watu wanaotumia teknolojia saidizi. Mtumiaji anayeweza kuona huona mpaka mwekundu na ujumbe wa kosa. Mtumiaji wa kifaa cha kusoma skrini (screen reader) mara nyingi hasikii chochote.

Unaweza kurekebisha hili kwa kutumia sifa (attributes) mbili za ARIA na eneo dogo la live region. Mabadiliko haya yanachukua chini ya mistari 50 ya kodi.

Hivi ndivyo unavyoweza kuunganisha makosa yako na sehemu za kuingiza data (inputs).

  1. Tumia aria-describedby Sehemu ya kuingiza data (input) inahitaji kuashiria elementi ya kosa. Ongeza aria-describedby kwenye input yako na uweke thamani yake kuwa ID ya div yako ya kosa.

Mfano:

  • Input ID: email-input
  • Error ID: email-error
  • Code: aria-describedby="email-error"

Hii inaiambia kifaa cha kusoma skrini kusoma ujumbe wa kosa mtumiaji anapozingatia (focus) kwenye input. Unaweza kuongeza ID nyingi ikiwa una maandishi ya msaada (help text) pia.

  1. Tumia aria-invalid Sifa hii inamwambia mtumiaji kuwa ingizo ni makosa. Weka aria-invalid kuwa true kosa linapotokea. Iweke kuwa false kosa linapotoweka.

Kosa la kawaida ni kupaka rangi nyekundu div inayozunguka (wrapper div) lakini kuweka aria-invalid kwenye input pekee. Hii husababisha kutolingana. Hakikisha mitindo yako ya kuonekana (visual styles) na sifa zako za ARIA zinalenga elementi moja.

  1. Ongeza live region Ikiwa kosa litatokea wakati mtumiaji bado anaandika, anaweza kulikosa. Tumia aria-live="polite" kwenye div yako ya kosa.
  • aria-live="polite" inaiambia kifaa cha kusoma skrini kutangaza kosa wakati wa mapumziko ya asili.
  • Usitumie "assertive" isipokuwa kama ni dharura. Makosa ya fomu si dharura.
  1. Shughulikia async validation Ikiwa unakagua jina la mtumiaji au anwani kwa nyuma (background), watumiaji wanahitaji kujua kuwa mfumo unafanya kazi.
  • Pattern A: Tumia aria-busy="true" kwenye input wakati ukaguzi unaendelea.
  • Pattern B: Tumia eneo la live region lililofichwa kutangaza sasisho za hali kama vile "Verifying username..."

Pattern B ni ya kuaminika zaidi kwenye vifaa mbalimbali vya kusoma skrini.

Upimaji ni lazima. Zana za kiotomatiki (automated tools) ni muhimu lakini haziwezi kuchukua nafasi ya upimaji wa mwongozo (manual testing). Tumia NVDA kwenye Windows au VoiceOver kwenye macOS.

Orodha yako ya upimaji:

  • Tumia Tab kuingia kwenye uwanja (field). Lebo inapaswa kutangazwa.
  • Ingiza thamani isiyo sahihi. Kosa linapaswa kutangazwa.
  • Tumia Tab kurudi kwenye uwanja. Lebo inapaswa kutangazwa pamoja na kosa.
  • Rekebisha kosa. Ujumbe wa kosa unapaswa kutoweka.

Chanzo: https://dev.to/137foundry/how-to-wire-aria-describedby-and-aria-invalid-on-form-errors-without-breaking-your-styles-4583