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 का उपयोग करें और लाइव क्षेत्रों के माध्यम से गतिशील अपडेट की घोषणा करें।
नियमों का पालन करें — देशी को प्राथमिकता दें, देशी शब्दार्थ को अनावश्यक रूप से न बदलें, स्थितियों को सिंक रखें, और कभी भी ऐसी भूमिका लागू न करें जिसे आप पूरी तरह लागू नहीं करते।