𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀
बहुतेक फॉर्म्स पाहणाऱ्या वापरकर्त्यांसाठी (sighted users) उत्तम काम करतात, परंतु सहाय्यक तंत्रज्ञान (assistive technology) वापरणाऱ्या लोकांसाठी ते अपयशी ठरतात. एक पाहणारा वापरकर्ता लाल बॉर्डर आणि एरर मेसेज पाहू शकतो. मात्र, स्क्रीन रीडर वापरणाऱ्या वापरकर्त्याला अनेकदा काहीही ऐकू येत नाही.
तुम्ही दोन ARIA ॲट्रिब्युट्स (attributes) आणि एका लहान live region च्या मदतीने हे सुधारू शकता. हा बदल ५० पेक्षा कमी ओळींच्या कोडमध्ये पूर्ण होतो.
तुमचे एरर्स तुमच्या इनपुट्सशी (inputs) कसे जोडायचे, ते खाली दिले आहे.
- aria-describedby वापरा
इनपुटने एरर एलिमेंटकडे निर्देश करणे आवश्यक आहे. तुमच्या इनपुटमध्ये
aria-describedbyजोडा आणि त्याचे मूल्य (value) तुमच्या एरर div च्या ID वर सेट करा.
उदाहरण:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
जेव्हा वापरकर्ता इनपुटवर लक्ष केंद्रित (focus) करतो, तेव्हा हे स्क्रीन रीडरला एरर मेसेज वाचण्यास सांगते. जर तुमच्याकडे हेल्प टेक्स्ट (help text) देखील असेल, तर तुम्ही एकापेक्षा जास्त IDs जोडू शकता.
- aria-invalid वापरा
हे ॲट्रिब्यूट वापरकर्त्याला सांगते की दिलेली माहिती चुकीची आहे. जेव्हा एरर येतो, तेव्हा
aria-invalid'true' वर सेट करा. जेव्हा एरर निघून जातो, तेव्हा ते 'false' वर सेट करा.
एक सामान्य चूक म्हणजे रॅपर div (wrapper div) लाल रंगाने स्टाईल करणे, परंतु aria-invalid फक्त इनपुटवर लावणे. यामुळे विसंगती निर्माण होते. तुमचे व्हिज्युअल स्टाईल्स आणि तुमचे ARIA ॲट्रिब्युट्स एकाच एलिमेंटला लक्ष्य करत असल्याची खात्री करा.
- Live region जोडा
जर वापरकर्ता टाईप करत असतानाच एरर आला, तर कदाचित त्यांच्याकडून तो सुटू शकतो. तुमच्या एरर div वर
aria-live="polite"वापरा.
aria-live="polite"स्क्रीन रीडरला नैसर्गिक विश्रांतीच्या (natural pause) दरम्यान एररची घोषणा करण्यास सांगते.- जोपर्यंत आपत्कालीन परिस्थिती नसेल तोपर्यंत "assertive" वापरू नका. फॉर्म एरर्स या आपत्कालीन गोष्टी नाहीत.
- Async validation हाताळा जर तुम्ही बॅकग्राउंडमध्ये युजरनेम किंवा पत्ता तपासत असाल, तर सिस्टम काम करत आहे हे वापरकर्त्यांना माहित असणे आवश्यक आहे.
- Pattern A: तपासणी सुरू असताना इनपुटवर
aria-busy="true"वापरा. - Pattern B: "Verifying username..." सारख्या स्टेटस अपडेट्सची घोषणा करण्यासाठी एक हिडन (hidden) live region वापरा.
विविध स्क्रीन रीडर्समध्ये Pattern B अधिक विश्वसनीय आहे.
टेस्टिंग करणे अनिवार्य आहे. ऑटोमेटेड टूल्स उपयुक्त आहेत, परंतु ते मॅन्युअल टेस्टिंगची जागा घेऊ शकत नाहीत. Windows वर NVDA किंवा macOS वर VoiceOver वापरा.
तुमची टेस्ट चेकलिस्ट:
- फील्डमध्ये Tab करा. लेबलची घोषणा झाली पाहिजे.
- चुकीची व्हॅल्यू टाका. एररची घोषणा झाली पाहिजे.
- पुन्हा फील्डमध्ये Tab करा. लेबलसोबत एररची देखील घोषणा झाली पाहिजे.
- एरर दुरुस्त करा. एरर मेसेज निघून गेला पाहिजे.