ഫോം പിശകുകൾക്കായി (Form Errors) ARIA എങ്ങനെ ക്രമീകരിക്കാം
മിക്ക ഫോമുകളും കാഴ്ചയുള്ള ഉപയോക്താക്കൾക്ക് നന്നായി പ്രവർത്തിക്കുന്നുണ്ടെങ്കിലും, സഹായ സാങ്കേതികവിദ്യകൾ (assistive technology) ഉപയോഗിക്കുന്നവർക്ക് അവ പ്രയാസമുണ്ടാക്കിയേക്കാം. കാഴ്ചയുള്ള ഒരാൾക്ക് ചുവന്ന ബോർഡറും ഒരു എറർ മെസ്സേജും കാണാൻ സാധിക്കും. എന്നാൽ ഒരു സ്ക്രീൻ റീഡർ ഉപയോഗിക്കുന്നയാൾക്ക് പലപ്പോഴും ഒന്നും കേൾക്കാൻ സാധിക്കില്ല.
രണ്ട് ARIA അറ്റ്രിബ്യൂട്ടുകളും (attributes) ഒരു ചെറിയ ലൈവ് റീജിയനും (live region) ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് പരിഹരിക്കാം. 50 വരിയിൽ താഴെ കോഡ് ഉപയോഗിച്ച് ഈ മാറ്റം വരുത്താം.
നിങ്ങളുടെ പിശകുകളെ (errors) ഇൻപുട്ടുകളുമായി (inputs) എങ്ങനെ ബന്ധിപ്പിക്കാം എന്ന് താഴെ നൽകുന്നു.
aria-describedbyഉപയോഗിക്കുക ഇൻപുട്ട് എറർ എലമെന്റിലേക്ക് (error element) സൂചിപ്പിക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ ഇൻപുട്ടിൽaria-describedbyചേർക്കുകയും അതിന്റെ വാല്യൂ (value) നിങ്ങളുടെ എറർ ഡിവിൻ്റെ (error div) ID ആയി നൽകുകയും ചെയ്യുക.
ഉദാഹരണം:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
ഉപയോക്താവ് ഇൻപുട്ടിൽ ഫോക്കസ് ചെയ്യുമ്പോൾ എറർ മെസ്സേജ് വായിക്കാൻ ഇത് സ്ക്രീൻ റീഡറിനോട് ആവശ്യപ്പെടുന്നു. നിങ്ങൾക്ക് ഹെൽപ്പ് ടെക്സ്റ്റ് (help text) ഉണ്ടെങ്കിൽ ഒന്നിലധികം ID-കൾ ചേർക്കാവുന്നതാണ്.
aria-invalidഉപയോഗിക്കുക നൽകിയ വിവരങ്ങൾ തെറ്റാണെന്ന് ഈ അറ്റ്രിബ്യൂട്ട് ഉപയോക്താവിനെ അറിയിക്കുന്നു. ഒരു പിശക് കാണപ്പെടുമ്പോൾaria-invalidഎന്നത്trueഎന്ന് സെറ്റ് ചെയ്യുക. പിശക് മാറുമ്പോൾ അത്falseഎന്ന് സെറ്റ് ചെയ്യുക.
ഒരു സാധാരണ തെറ്റ്, ഒരു റാപ്പർ ഡിവിനെ (wrapper div) ചുവപ്പ് നിറത്തിൽ സ്റ്റൈൽ ചെയ്യുകയും എന്നാൽ aria-invalid ഇൻപുട്ടിൽ മാത്രം നൽകുകയും ചെയ്യുന്നതാണ്. ഇത് ഒരു പൊരുത്തക്കേട് (mismatch) ഉണ്ടാക്കുന്നു. നിങ്ങളുടെ വിഷ്വൽ സ്റ്റൈലുകളും ARIA അറ്റ്രിബ്യൂട്ടുകളും ഒരേ എലമെന്റിനെയാണ് ലക്ഷ്യം വെക്കുന്നതെന്ന് ഉറപ്പാക്കുക.
- ഒരു ലൈവ് റീജിയൻ (live region) ചേർക്കുക
ഉപയോക്താവ് ടൈപ്പ് ചെയ്തുകൊണ്ടിരിക്കുമ്പോൾ ഒരു പിശക് പ്രത്യക്ഷപ്പെട്ടാൽ അവർ അത് ശ്രദ്ധിക്കാതെ പോയേക്കാം. നിങ്ങളുടെ എറർ ഡിവിൽ
aria-live="polite"ഉപയോഗിക്കുക.
aria-live="polite"എന്നത് ഒരു സ്വാഭാവിക ഇടവേളയിൽ (natural pause) എറർ അറിയിക്കാൻ സ്ക്രീൻ റീഡറിനോട് ആവശ്യപ്പെടുന്നു.- അടിയന്തര സാഹചര്യങ്ങളിൽ ഒഴികെ "assertive" ഉപയോഗിക്കരുത്. ഫോം പിശകുകൾ അടിയന്തര സാഹചര്യങ്ങളല്ല.
- അസിങ്ക് വാലിഡേഷൻ (async validation) കൈകാര്യം ചെയ്യുക നിങ്ങൾ ബാക്ക്ഗ്രൗണ്ടിൽ ഒരു യൂസർനെയിമോ അഡ്രസ്സോ പരിശോധിക്കുകയാണെങ്കിൽ, സിസ്റ്റം പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉപയോക്താക്കൾ അറിയേണ്ടതുണ്ട്.
- പാറ്റേൺ A: പരിശോധന നടക്കുമ്പോൾ ഇൻപുട്ടിൽ
aria-busy="true"ഉപയോഗിക്കുക. - പാറ്റേൺ B: "Verifying username..." പോലുള്ള സ്റ്റാറ്റസ് അപ്ഡേറ്റുകൾ അറിയിക്കാൻ ഒരു ഹിഡൻ ലൈവ് റീജിയൻ (hidden live region) ഉപയോഗിക്കുക.
വിവിധ സ്ക്രീൻ റീഡറുകളിൽ പാറ്റേൺ B ആണ് കൂടുതൽ വിശ്വസനീയമായത്.
ടെസ്റ്റിംഗ് നിർബന്ധമാണ്. ഓട്ടോമേറ്റഡ് ടൂളുകൾ സഹായകരമാണ്, എന്നാൽ അവയ്ക്ക് മാനുവൽ ടെസ്റ്റിംഗിന് പകരമാവില്ല. വിൻഡോസിൽ NVDA അല്ലെങ്കിൽ മാകോസിൽ (macOS) VoiceOver ഉപയോഗിക്കുക.
നിങ്ങളുടെ ടെസ്റ്റ് ചെക്ക്ലിസ്റ്റ്:
- ഫീൽഡിലേക്ക് ടാബ് (Tab) ചെയ്യുക. ലേബൽ (label) പ്രഖ്യാപിക്കണം.
- തെറ്റായ ഒരു വാല്യൂ നൽകുക. എറർ പ്രഖ്യാപിക്കണം.
- വീണ്ടും ഫീൽഡിലേക്ക് ടാബ് ചെയ്യുക. ലേബലിനൊപ്പം എററും പ്രഖ്യാപിക്കണം.
- പിശക് തിരുത്തുക. എറർ മെസ്സേജ് മാറണം.