ARIA (Accessible Rich Internet Applications) هي مجموعة من السمات التي تضيف دلالات إمكانية الوصول — الأدوار والحالات والخصائص — التي لا يمكن للـ HTML الأصلي التعبير عنها. لكن أهم قاعدة ARIA هي: فضّل HTML الأصلي أولاً.
Save
Save
تأتي العناصر الأصلية مع الأدوار الصحيحة وسلوك لوحة المفاتيح والتركيز بشكل مجاني. استخدم ARIA فقط عندما لا يقوم أي عنصر أصلي بالعمل.
<!-- 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 مفيد بحق: إخبار قارئات الشاشة عن المحتوى الذي يتغير بدون إعادة تحميل الصفحة (نتائج البحث، الرسائل المنبثقة، أخطاء التحقق).
ـ ARIA غير الصحيح أسوأ من عدمه — فهو يعطي مستخدمي قارئات الشاشة معلومات خاطئة. و ARIA يغير فقط الدلالات، وليس السلوك: role="button" على <div> لا يجعله قابلاً للتركيز أو قابلاً للنقر؛ يجب عليك إضافة tabindex وأدوات معالجة المفاتيح بنفسك.
استخدم HTML الدلالي في حالة 95%؛ استخدم ARIA لملء الفجوات للأدوات المخصصة (الألسنة، والصناديق المركبة، والقوائم) والإعلان عن التحديثات الديناميكية عبر المناطق الحية.
اتبع القواعد — فضّل الأصلي، لا تغيّر دلالات HTML الأصلية دون داع، احتفظ بالحالات متزامنة، ولا تطبق أبداً دوراً لا تنفذه بالكامل.