ARIA (Accessible Rich Internet Applications) అనేది యాక్సెసిబిలిటీ సెమాంటిక్లను జోడించే లక్షణాల సమితి — వ్యూహాలు, స్థితులు మరియు లక్షణాలు — స్థానిక HTML వ్యక్తపరచలేనివి. కానీ అత్యంత ముఖ్యమైన ARIA నియమం: మొదట స్థానిక HTMLను ఇష్టపడండి.
Save
Save
స్థానిక మూలకాలు సరైన వ్యూహాలు, కీబోర్డ్ ప్రవర్తన మరియు ఫోకస్ ను ఉచితంగా పొందుతాయి. స్థానిక మూలకం పనిని చేయనప్పుడు మాత్రమే ARIA కి వెళ్లండి.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
ఇది నిజమైన ఉపయోగకరమైన ARIA: పేజీ రీలోడ్ లేకుండా మారే కంటెంట్ గురించి స్క్రీన్ రీడర్లకు తెలియజేయడం (శోధన ఫలితాలు, టోస్ట్లు, ధృవీకరణ లోపాలు).
భ్రమాత్మక ARIA ఏదీ లేనిది కంటే చెత్త — ఇది స్క్రీన్ రీడర్ వినియోగదారులకు తప్పుడు సమాచారం ఇస్తుంది. మరియు ARIA కేవలం సెమాంటిక్లను మారుస్తుంది, ఎప్పుడూ ప్రవర్తనను కాదు: <div> పై role="button" దానిని ఫోకస్ చేయదగినది లేదా క్లిక్చేయదగినది చేయదు; మీరు tabindex మరియు కీ హ్యాండ్లర్లను సరిగా జోడించాలి.
95% కేసుకు సెమాంటిక్ HTMLని ఉపయోగించండి; కస్టమ్ విడ్జెట్లు (ట్యాబ్లు, కాంబోబాక్లు, మెనూలు) కోసం మరియు లైవ్ రీజియన్ల ద్వారా డైనమిక్ అప్డేట్లను ప్రకటించడానికి ARIA ని ఉపయోగించండి.
నియమాలను అనుసరించండి — స్థానికమైనవాటిని ఇష్టపడండి, స్థానిక సెమాంటిక్లను అనవసరంగా మార్చవద్దు, స్థితులను సమకాలీకరణలో ఉంచండి మరియు మీరు పూర్తిగా అమలు చేయని పాత్ర కండతోకూడా ఉపయోగించవద్దు.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం