ARIA (Accessible Rich Internet Applications) خصوصیات کا ایک مجموعہ ہے جو رسائی کی معنویات — کردار، حالات، اور خصوصیات — شامل کرتا ہے جو native HTML اظہار نہیں کر سکتا۔ لیکن سب سے اہم ARIA قاعدہ یہ ہے: پہلے native HTML کو ترجیح دیں۔
Save
Save
Native عناصر صحیح کردار، keyboard رویہ، اور focus مفت فراہم کرتے ہیں۔ ARIA تک صرف اسی وقت رسائی حاصل کریں جب کوئی native عنصر کام نہ کرے۔
<!-- 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 کو اس مواد کے بارے میں بتانا جو صفحہ کو دوبارہ لوڈ کیے بغیر بدلتا ہے (تلاش کے نتائج، toasts، توثیق کی خرابیاں)۔
غلط ARIA کوئی سے بھی بدتر ہے — یہ screen reader صارفین کو غلط معلومات دیتا ہے۔ اور ARIA صرف معنویات میں تبدیلی کرتا ہے، رویے میں نہیں: <div> پر role="button" اسے focusable یا clickable نہیں بناتا؛ آپ کو خود tabindex اور key handlers شامل کرنا ہوگا۔
95% کے معاملے کے لیے semantic HTML استعمال کریں؛ custom widgets (tabs، comboboxes، menus) کے لیے خلاء کو بھرنے کے لیے اور live regions کے ذریعے متحرک اپڈیٹس کا اعلان کرنے کے لیے ARIA استعمال کریں۔
قواعد کی پیروی کریں — native کو ترجیح دیں، native معنویات کو بے وجہ تبدیل نہ کریں، حالات کو ہم آہنگ رکھیں، اور کوئی بھی role تفویض نہ کریں جو آپ مکمل طور پر نافذ نہیں کرتے۔