फॉर्म एरर्स के लिए ARIA को कैसे जोड़ें
अधिकांश फॉर्म दिखने वाले (sighted) उपयोगकर्ताओं के लिए तो अच्छे से काम करते हैं, लेकिन सहायक तकनीक (assistive technology) का उपयोग करने वाले लोगों के लिए विफल हो जाते हैं। एक दिखने वाला उपयोगकर्ता लाल बॉर्डर और एरर मैसेज देख सकता है। एक स्क्रीन रीडर उपयोगकर्ता को अक्सर कुछ सुनाई नहीं देता।
आप इसे दो ARIA एट्रिब्यूट्स और एक छोटे लाइव रीजन (live region) के साथ ठीक कर सकते हैं। यह बदलाव 50 लाइनों से भी कम कोड में हो जाता है।
यहाँ बताया गया है कि आप अपने एरर्स को अपने इनपुट्स से कैसे जोड़ सकते हैं।
- aria-describedby का उपयोग करें
इनपुट को एरर एलिमेंट की ओर इशारा करना चाहिए। अपने इनपुट में
aria-describedbyजोड़ें और इसके मान (value) को अपने एरर div की ID पर सेट करें।
उदाहरण:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
यह स्क्रीन रीडर को बताता है कि जब उपयोगकर्ता इनपुट पर फोकस करे, तो एरर मैसेज पढ़ा जाए। यदि आपके पास हेल्प टेक्स्ट भी है, तो आप कई ID जोड़ सकते हैं।
- aria-invalid का उपयोग करें
यह एट्रिब्यूट उपयोगकर्ता को बताता है कि प्रविष्टि (entry) गलत है। जब एरर दिखाई दे, तो
aria-invalidकोtrueपर सेट करें। जब एरर हट जाए, तो इसेfalseपर सेट करें।
एक आम गलती यह है कि रैपर div को लाल रंग में स्टाइल कर दिया जाता है, लेकिन aria-invalid केवल इनपुट पर लगाया जाता है। इससे विसंगति (mismatch) पैदा होती है। सुनिश्चित करें कि आपके विजुअल स्टाइल और आपके ARIA एट्रिब्यूट्स एक ही एलिमेंट को टारगेट करें।
- एक लाइव रीजन जोड़ें
यदि उपयोगकर्ता के टाइप करते समय कोई एरर आता है, तो हो सकता है कि वे उसे मिस कर दें। अपने एरर div पर
aria-live="polite"का उपयोग करें।
aria-live="polite"स्क्रीन रीडर को बताता है कि किसी स्वाभाविक ठहराव (natural pause) के दौरान एरर की घोषणा की जाए।- "assertive" का उपयोग तब तक न करें जब तक कि कोई आपात स्थिति (emergency) न हो। फॉर्म एरर्स आपात स्थिति नहीं होते हैं।
- एसिंक वैलिडेशन (async validation) को हैंडल करें यदि आप बैकग्राउंड में यूजरनेम या एड्रेस चेक कर रहे हैं, तो उपयोगकर्ताओं को पता होना चाहिए कि सिस्टम काम कर रहा है।
- पैटर्न A: जब तक चेक चल रहा हो, इनपुट पर
aria-busy="true"का उपयोग करें। - पैटर्न B: स्टेटस अपडेट जैसे "Verifying username..." की घोषणा करने के लिए एक छिपे हुए (hidden) लाइव रीजन का उपयोग करें।
पैटर्न B विभिन्न स्क्रीन रीडर्स पर अधिक विश्वसनीय है।
टेस्टिंग अनिवार्य है। ऑटोमेटेड टूल्स मददगार होते हैं लेकिन वे मैनुअल टेस्टिंग की जगह नहीं ले सकते। Windows पर NVDA या macOS पर VoiceOver का उपयोग करें।
आपकी टेस्ट चेकलिस्ट:
- फील्ड में टैब करें। लेबल की घोषणा होनी चाहिए।
- एक अमान्य (invalid) वैल्यू दर्ज करें। एरर की घोषणा होनी चाहिए।
- वापस फील्ड में टैब करें। लेबल के साथ एरर की भी घोषणा होनी चाहिए।
- एरर ठीक करें। एरर मैसेज हट जाना चाहिए।