شرح صفوف ومحتوى الفقرة
تقدم مواصفة WAI-ARIA حزمة من الخصائص المتخصصة المصممة لدعم دلالات لغة HTML عندما تعجز الوسوم الأصيلة بمفردها عن التعبير عن الحالات الديناميكية المعقدة. وتعمل كجسر رقمي يربط مكونات الواجهة التفاعلية بشجرة إتاحة المتصفح لترجمتها بدقة لقارئات الشاشة.
يوضح الجدول المرجعي التالي أهم خصائص ARIA الأساسية ودورها الهندسي في تعزيز إتاحة عناصر الواجهة لقارئات الشاشة:
| خاصية ARIA | مثال الصيغة | نوع القيمة | الدور الهندسي الأساسي |
|---|---|---|---|
aria-label | aria-label="إغلاق النافذة" | نص وصفي مباشر | منح اسم مقروء للأزرار الأيقونية التي تخلو من نص مرئي |
aria-labelledby | aria-labelledby="title-id" | معرّف عنصر (ID) | ربط اسم القسم أو النافذة بعنوان مرئي موجود مسبقاً بالصفحة |
aria-describedby | aria-describedby="hint-id" | معرّف عنصر (ID) | إرفاق سطر إرشادي أو رسالة خطأ تفصيلية بحقل الإدخال |
aria-hidden | aria-hidden="true" | true أو false | إخفاء الزخارف والأيقونات التجميلية عن شجرة قارئ الشاشة |
aria-live | aria-live="polite" | polite أو assertive | نطق الإشعارات والتحديثات اللحظية تلقائياً دون نقل التركيز |
role | role="alert" | اسم دور معياري | تحديد الدور الوظيفي الصريح للمكونات الديناميكية المخصصة |
HTML
<!-- Invisible accessible name for icon-only button -->
<button aria-label="Close modal dialog">
<svg aria-hidden="true" width="16" height="16">
<path d="M2 2L14 14M14 2L2 14" stroke="#fff"/>
</svg>
</button>
<!-- Form description association -->
<input type="password" aria-describedby="pwd-rules">
<p id="pwd-rules">Must be at least 12 characters.</p>من أهم التطبيقات العملية لخصائص ARIA استخدام
aria-hidden="true" لإخفاء الأيقونات التزيينية ورسوم SVG التجميلية عن برمجيات قراءة الشاشة؛ حيث يمنع ذلك التشويش الصوتي غير الضروري، ويتيح للمستخدم التركيز على المحتوى الفعلي والمعلومات الأساسية.