𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀
చాలా ఫారమ్లు కంటితో చూసే వినియోగదారులకు (sighted users) బాగా పనిచేస్తాయి, కానీ సహాయక సాంకేతికతను (assistive technology) ఉపయోగించే వారికి విఫలమవుతాయి. కంటితో చూసే వినియోగదారుడు ఎరుపు రంగు బోర్డర్ మరియు ఎర్రర్ మెసేజ్ను చూడగలరు. కానీ స్క్రీన్ రీడర్ (screen reader) ఉపయోగించే వినియోగదారుడికి తరచుగా ఏమీ వినిపించదు.
రెండు ARIA ఆట్రిబ్యూట్లు (attributes) మరియు ఒక చిన్న లైవ్ రీజియన్ (live region) ద్వారా మీరు దీనిని పరిష్కరించవచ్చు. ఈ మార్పు చేయడానికి 50 లైన్ల కంటే తక్కువ కోడ్ సరిపోతుంది.
మీ ఎర్రర్లను మీ ఇన్పుట్లకు ఎలా అనుసంధానించాలో ఇక్కడ ఉంది.
- aria-describedby ఉపయోగించండి
ఇన్పుట్ తప్పనిసరిగా ఎర్రర్ ఎలిమెంట్ను సూచించాలి. మీ ఇన్పుట్కు
aria-describedbyని జోడించి, దాని విలువను మీ ఎర్రర్divయొక్క IDకి సెట్ చేయండి.
ఉదాహరణ:
- Input ID: email-input
- Error ID: email-error
- Code:
aria-describedby="email-error"
వినియోగదారుడు ఇన్పుట్పై ఫోకస్ చేసినప్పుడు ఎర్రర్ మెసేజ్ను చదవమని ఇది స్క్రీన్ రీడర్కు చెబుతుంది. మీకు హెల్ప్ టెక్స్ట్ (help text) కూడా ఉంటే, మీరు బహుళ IDలను జోడించవచ్చు.
- aria-invalid ఉపయోగించండి
ఈ ఆట్రిబ్యూట్ ఎంట్రీ తప్పు అని వినియోగదారునికి తెలియజేస్తుంది. ఎర్రర్ కనిపించినప్పుడు
aria-invalidనిtrueగా సెట్ చేయండి. ఎర్రర్ తొలగించినప్పుడు దానినిfalseగా సెట్ చేయండి.
ఒక సాధారణ తప్పు ఏమిటంటే, ఒక రాపర్ div (wrapper div)ను ఎరుపు రంగులోకి మార్చడం, కానీ aria-invalidని కేవలం ఇన్పుట్కు మాత్రమే ఇవ్వడం. ఇది అసమతుల్యతను (mismatch) కలిగిస్తుంది. మీ విజువల్ స్టైల్స్ మరియు మీ ARIA ఆట్రిబ్యూట్లు ఒకే ఎలిమెంట్ను లక్ష్యంగా చేసుకునేలా చూసుకోండి.
- లైవ్ రీజియన్ను (live region) జోడించండి
వినియోగదారుడు టైప్ చేస్తున్నప్పుడే ఎర్రర్ కనిపిస్తే, వారు దానిని గమనించకపోవచ్చు. మీ ఎర్రర్
divపైaria-live="polite"ని ఉపయోగించండి.
aria-live="polite"అనేది సహజమైన విరామం (natural pause) సమయంలో ఎర్రర్ను ప్రకటించమని స్క్రీన్ రీడర్కు చెబుతుంది.- అత్యవసర పరిస్థితి కానంత వరకు "assertive"ని ఉపయోగించకండి. ఫారమ్ ఎర్రర్లు అత్యవసర పరిస్థితులు కావు.
- Async వాలిడేషన్ను (async validation) హ్యాండిల్ చేయండి మీరు బ్యాక్గ్రౌండ్లో యూజర్ నేమ్ లేదా అడ్రస్ను తనిఖీ చేస్తున్నట్లయితే, సిస్టమ్ పని చేస్తోందని వినియోగదారులకు తెలియజేయాలి.
- Pattern A: తనిఖీ జరుగుతున్నంత సేపు ఇన్పుట్పై
aria-busy="true"ని ఉపయోగించండి. - Pattern B: "Verifying username..." వంటి స్టేటస్ అప్డేట్లను ప్రకటించడానికి ఒక హిడెన్ లైవ్ రీజియన్ను (hidden live region) ఉపయోగించండి.
వివిధ స్క్రీన్ రీడర్లలో Pattern B మరింత నమ్మదగినది.
టెస్టింగ్ (Testing) తప్పనిసరి. ఆటోమేటెడ్ టూల్స్ సహాయకారిగా ఉంటాయి కానీ అవి మాన్యువల్ టెస్టింగ్కు ప్రత్యామ్నాయం కాలేవు. Windowsలో NVDA లేదా macOSలో VoiceOver ఉపయోగించండి.
మీ టెస్ట్ చెక్లిస్ట్:
- ఫీల్డ్లోకి Tab చేయండి. లేబుల్ (label) ప్రకటించబడాలి.
- తప్పుడు విలువను ఎంటర్ చేయండి. ఎర్రర్ ప్రకటించబడాలి.
- తిరిగి ఫీల్డ్లోకి Tab చేయండి. ఎర్రర్తో పాటు లేబుల్ కూడా ప్రకటించబడాలి.
- ఎర్రర్ను సరిచేయండి. ఎర్రర్ మెసేజ్ తొలగించబడాలి.