पाठ 4 / 25

ARIA roles

जब HTML अकेले पर्याप्त न हो तो roles, properties, और states जोड़ें।

ARIA क्या है?

ARIA (Accessible Rich Internet Applications) कस्टम घटकों में मेटाडेटा जोड़ता है ताकि स्क्रीन रीडर और सहायक तकनीकें उन्हें समझें। यह HTML के ऊपर एक परत है—पहले semantic HTML का उपयोग करें। ARIA नियम: 'No ARIA is better than bad ARIA.'।

Roles, properties, states

Role कहता है कि तत्व क्या है। Properties इसे वर्णित करते हैं। States बदलते हैं। हमेशा जब संभव हो semantic HTML का उपयोग करें।

<!-- Custom switch: role says it's a switch -->
<div 
  role="switch" 
  aria-checked="false" 
  aria-label="Dark mode"
  tabindex="0"
  @click="toggle"
></div>

<!-- Live region: aria-live announces changes -->
<div aria-live="polite" aria-label="Status">
  <p>2 items added to cart</p>
</div>

<!-- Button with expanded state -->
<button 
  aria-expanded="false" 
  aria-controls="menu"
  @click="open = !open"
>
  Menu
</button>
<ul id="menu" v-show="open">...</ul>

सामान्य roles

button, link, menuitem, tab, tabpanel, dialog, alert, status, tooltip, tree, combobox, listbox, grid।

ARIA के न करें

बुरे HTML को ठीक करने के लिए ARIA का उपयोग न करें। Visible elements को aria-hidden से hide न करें। Semantic elements में unnecessarily ARIA add न करें। अपने ARIA implementation को real screen readers के साथ test करें।