HTML ARIA रोल्स

ARIA रोल्स क्या हैं

एक ARIA role assistive technology को बताता है कि कोई element क्या करता है। उदाहरण के लिए role=navigation किसी screen reader को बताता है कि यह एक navigation area है, भले ही वह सिर्फ एक div हो।

जिन elements में पहले से सही native semantics हैं (जैसे किसी actual button tag पर role=button इस्तेमाल करना) उन पर roles का overuse करना अनावश्यक है और confusion भी पैदा कर सकता है।

उदाहरण: What are ARIA Roles

<div role="navigation">Site links here</div>

aria-label और aria-describedby

aria-label उन elements के लिए एक text description देता है जिनका कोई visible label नहीं है। aria-describedby किसी element को page पर कहीं और मौजूद एक लंबी description से जोड़ता है।

दोनों को साथ इस्तेमाल करना आम है: accessible name के लिए एक छोटा aria-label और अतिरिक्त supporting detail के लिए aria-describedby।

उदाहरण: aria-label and aria-describedby

<button aria-label="Close" aria-describedby="closeHint">X</button>
<span id="closeHint">Closes this dialog</span>

Toggles के लिए aria-expanded

aria-expanded assistive technology को बताता है कि dropdown menu या accordion panel जैसा कोई collapsible element फिलहाल open है या closed, और element की state बदलते ही इसकी value को JavaScript से dynamically update किया जाना चाहिए।

उदाहरण: aria-expanded for Toggles

<button aria-expanded="false" onclick="this.setAttribute('aria-expanded', 'true')">
  Show menu
</button>

Dynamic Content के लिए aria-live

aria-live page के उस region को मार्क करता है जो बिना full page reload के dynamically update होता है, और screen readers को बताता है कि नए content को अपने आप announce करें, बजाय इसके कि user मैन्युअल तरीके से वहाँ वापस navigate करे।

उदाहरण: aria-live for Dynamic Content

<div aria-live="polite" id="status">Loading...</div>

लैंडमार्क रोल्स

banner, main, complementary, और contentinfo जैसे landmark roles page के प्रमुख regions को मार्क करते हैं, जिससे screen reader users हर element को एक-एक करके tab करने के बजाय सीधे sections के बीच जंप कर सकते हैं।

उदाहरण: Landmark Roles

<div role="banner">Header</div>
<div role="main">Main content</div>
<div role="contentinfo">Footer</div>