ARIA (Accessible Rich Internet Applications) एक सेट of attributes हो जसले accessibility semantics — roles, states, र properties — थप गर्दछ जुन native HTML ले व्यक्त गर्न सक्दैन। तर सबैभन्दा महत्त्वपूर्ण ARIA नियम हो: पहिले native HTML लाई प्राथमिकता दिनुहोस्।
Save
Save
Native elements सही roles, keyboard behavior, र focus को साथ स्वतः आउँछन्। ARIA को लागि सधैं जब native element ले काम गरेन तब मात्र पुग्नुहोस्।
<!-- 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 हो: screen readers लाई content को बारेमा जो पृष्ठ reload बिना परिवर्तन हुन्छ (search results, toasts, validation errors) भन्न।
अनुचित ARIA कुनै पनि भन्दा नराम्रो हो — यसले screen reader users लाई गलत जानकारी दिन्छ। र ARIA ले केवल semantics परिवर्तन गर्दछ, व्यवहार कहिले पनि नगर्दछ: <div> मा role="button" ले यसलाई focusable वा clickable बनाउँदैन; तपाईंले आफैं tabindex र key handlers थप्नुपर्छ।
95% को मामलामा semantic HTML प्रयोग गर्नुहोस्; custom widgets (tabs, comboboxes, menus) को लागि अन्तर भर्न र dynamic updates लाई live regions मार्फत घोषणा गर्न ARIA प्रयोग गर्नुहोस्।
नियमहरु पालन गर्नुहोस् — native लाई प्राथमिकता दिनुहोस्, native semantics लाई अनावश्यक रूपमा परिवर्तन नगर्नुहोस्, states लाई synchronized राख्नुहोस्, र कहिले पनि कुनै role लागु नगर्नुहोस् जुन तपाईंले पूर्ण रूपमा लागू गर्नुहुन्न।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्