فارم کی غلطیوں (Form Errors) کے لیے ARIA کو کیسے جوڑیں
زیادہ تر فارمز دیکھنے والے صارفین (sighted users) کے لیے تو بہتر کام کرتے ہیں لیکن معاون ٹیکنالوجی (assistive technology) استعمال کرنے والے افراد کے لیے ناکام رہتے ہیں۔ ایک دیکھنے والا صارف سرخ بارڈر اور غلطی کا پیغام دیکھ لیتا ہے، جبکہ اسکرین ریڈر استعمال کرنے والے صارف کو اکثر کچھ سنائی نہیں دیتا۔
آپ اسے دو ARIA ایٹریبیوٹس (attributes) اور ایک چھوٹے سے لائیو ریجن (live region) کے ذریعے ٹھیک کر سکتے ہیں۔ یہ تبدیلی 50 لائنوں سے بھی کم کوڈ میں ہو جاتی ہے۔
یہاں طریقہ بتایا گیا ہے کہ آپ اپنی غلطیوں (errors) کو اپنے ان پٹس (inputs) کے ساتھ کیسے جوڑ سکتے ہیں۔
1. 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) بھی ہے، تو آپ ایک سے زیادہ IDs بھی شامل کر سکتے ہیں۔
2. aria-invalid کا استعمال کریں
یہ ایٹریبیوٹ صارف کو بتاتا ہے کہ درج کی گئی معلومات غلط ہیں۔ جب غلطی ظاہر ہو تو aria-invalid کو true پر سیٹ کریں۔ جب غلطی ختم ہو جائے تو اسے false پر سیٹ کریں۔
ایک عام غلطی یہ ہے کہ ایک ریپر ڈِو (wrapper div) کو سرخ رنگ دے دیا جاتا ہے لیکن aria-invalid صرف ان پٹ پر لگایا جاتا ہے۔ اس سے تضاد پیدا ہوتا ہے۔ اس بات کو یقینی بنائیں کہ آپ کے بصری اسٹائلز (visual styles) اور آپ کے ARIA ایٹریبیوٹس ایک ہی ایلیمنٹ کو نشانہ بنا رہے ہوں۔
3. ایک لائیو ریجن (live region) شامل کریں
اگر صارف کے ٹائپ کرتے ہوئے کوئی غلطی ظاہر ہوتی ہے، تو ہو سکتا ہے کہ وہ اسے نظر انداز کر دے۔ اپنے error div پر aria-live="polite" استعمال کریں۔
aria-live="polite"اسکرین ریڈر کو بتاتا ہے کہ وہ وقفے کے دوران غلطی کا اعلان کرے۔- "assertive" کا استعمال تب تک نہ کریں جب تک کہ کوئی ہنگامی صورتحال نہ ہو۔ فارم کی غلطیاں ہنگامی صورتحال نہیں ہوتیں۔
4. Async validation کو ہینڈل کریں
اگر آپ بیک گراؤنڈ میں یوزر نیم یا ایڈریس چیک کر رہے ہیں، تو صارفین کو معلوم ہونا چاہیے کہ سسٹم کام کر رہا ہے۔
- پیٹرن A: جب چیک چل رہا ہو تو ان پٹ پر
aria-busy="true"استعمال کریں۔ - پیٹرن B: اسٹیٹس اپ ڈیٹس جیسے کہ "Verifying username..." کا اعلان کرنے کے لیے ایک چھپا ہوا (hidden) لائیو ریجن استعمال کریں۔
مختلف اسکرین ریڈرز پر پیٹرن B زیادہ قابل اعتماد ہے۔
ٹیسٹنگ لازمی ہے۔ خودکار ٹولز (automated tools) مددگار تو ہوتے ہیں لیکن وہ دستی ٹیسٹنگ (manual testing) کا نعم البدل نہیں ہو سکتے۔ Windows پر NVDA یا macOS پر VoiceOver استعمال کریں۔
آپ کی ٹیسٹ چیک لسٹ:
- فیلڈ میں Tab کریں۔ لیبل کا اعلان ہونا چاہیے۔
- ایک غلط ویلیو درج کریں۔ غلطی کا اعلان ہونا چاہیے۔
- دوبارہ فیلڈ پر Tab کریں۔ لیبل کے ساتھ غلطی کا بھی اعلان ہونا چاہیے۔
- غلطی درست کریں۔ غلطی کا پیغام ختم ہو جانا چاہیے۔