ARIA (Accessible Rich Internet Applications) 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 ਨੂੰ ਸਮੱਗਰੀ ਬਾਰੇ ਦੱਸਣਾ ਜੋ ਪੰਨਾ ਦੁਬਾਰਾ ਲੋਡ ਕੀਤੇ ਬਿਨਾ ਬਦਲਦਾ ਹੈ (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) ਦੇ ਲਈ ਮੋਰੀਆਂ ਭਰਨ ਅਤੇ live regions ਰਾਹੀਂ ਗਤੀਸ਼ੀਲ ਅਪਡੇਟ ਦੀ ਘੋਸ਼ਣਾ ਕਰਨ ਲਈ ARIA ਵਰਤੋ।
ਨਿਯਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ — native ਨੂੰ ਤਰਜੀਹ ਦਿਓ, native semantics ਨੂੰ ਬੇਲਾ ਬਦਲੋ ਨਾ, states ਨੂੰ ਸਮਕਾਲੀ ਰੱਖੋ, ਅਤੇ ਕਦੇ ਵੀ ਕਿਸੇ role ਨੂੰ ਲਾਗੂ ਨਾ ਕਰੋ ਜੋ ਤੁਸੀਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲਾਗੂ ਨਹੀਂ ਕਰਦੇ।