أدوار وسمات ARIA
طبّق أدوار المعالم ومناطق التحديث المباشر وسمات aria-* لتحسين المكوّنات عندما لا تكون HTML الأصلية كافية.
أدوار وسمات ARIA درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو ARIA؟
ARIA (تطبيقات الإنترنت الغنية والمتاحة) هي مجموعة من سمات HTML التي تصف دور العناصر وحالتها وخصائصها للتقنيات المساعدة. وهي الجسر الذي يتيح دعم الأدوات المخصّصة التي لا يمكن التعبير عنها باستخدام HTML الأصلي.
القاعدة الأولى لـ ARIA: لا تستخدم ARIA
إذا كان هناك عنصر أصلي ينفّذ ما تحتاج إليه، فاستخدمه. <button> أفضل من <div role="button">. إن إساءة استخدام ARIA أسوأ من عدم استخدامها — فهي توحي بإمكانية الوصول بينما تترك المستخدمين دون دعم فعلي.
فئات سمات ARIA
هناك ثلاث فئات: الأدوار (ماهيّة العنصر)، والخصائص (ثابتة نسبيًا — aria-label وaria-describedby)، والحالات (ديناميكية — aria-expanded وaria-pressed وaria-checked).
أدوار المعالم
حدّد المناطق الرئيسية في الصفحة. لمعظمها بدائل في HTML5، وينبغي أن تفضّل هذه البدائل.
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-label وaria-labelledby
aria-label: يوفّر اسمًا متاحًا باستخدام سلسلة نصية. aria-labelledby: يشير إلى نص عنصر آخر ليكون الاسم. استخدمهما عندما لا يوجد نص ظاهر أو عندما يكون النص الظاهر غير كافٍ.
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>aria-describedby للتلميحات
يربط aria-describedby عنصرًا بوصف أطول. وهو مفيد لتلميحات النماذج ورسائل الخطأ والتلميحات المنبثقة.
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>aria-expanded للإفصاح
ينبغي للأزرار التي تبدّل ظهور لوحة أن تكشف عن aria-expanded بقيمة true أو false.
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>aria-pressed لأزرار التبديل
تستخدم الأزرار التي لها حالة تشغيل/إيقاف (مثل كتم الصوت أو جعل النص عريضًا) السمة aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>المناطق الحية: aria-live
ينبغي وضع المحتوى الذي يتحدّث ديناميكيًا (مثل الإشعارات المنبثقة ونتائج البحث وملخصات الأخطاء) داخل منطقة حية كي تعلن قارئات الشاشة عن التغييرات. تنتظر polite فترة توقف، بينما تقاطع assertive المستخدم.
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>الصيغة المختصرة role="alert"
تُعد role="alert" صيغة مختصرة لمنطقة حية حازمة مع aria-atomic. استخدمها باعتدال — فكل تنبيه يقاطع المستخدم.
aria-hidden للمحتوى الزخرفي
تزيل aria-hidden="true" عنصرًا من شجرة إمكانية الوصول. استخدمها مع الأيقونات الزخرفية المجاورة لتسميات نصية — وإلا فسيعلن قارئ الشاشة عنها بشكل مكرر.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>اختبر باستخدام قارئ شاشة
الطريقة الوحيدة لمعرفة ما إذا كانت ARIA تعمل هي اختبارها. VoiceOver (على macOS وiOS، مجانًا)، وNVDA (على Windows، مجانًا)، وTalkBack (على Android، مجانًا). تكشف 10 دقائق مع VoiceOver أكثر مما تكشفه أي أداة تدقيق.
تحقق سريع
ما سمة ARIA التي ينبغي ضبطها على زر لا يحتوي إلا على أيقونة ولا يملك تسمية نصية ظاهرة؟
مراجعة: ARIA
تصف ARIA الدور والخصائص والحالة للتقنيات المساعدة. فضّل HTML الأصلي قبل اللجوء إلى ARIA. توفّر aria-label وaria-labelledby أسماء متاحة. وتُستخدم aria-describedby للتلميحات، وaria-expanded وaria-pressed لعناصر التبديل، وaria-live للإعلانات الديناميكية، وaria-hidden للمحتوى الزخرفي. اختبر دائمًا باستخدام قارئ شاشة حقيقي.
الأسئلة الشائعة
هل درس «أدوار وسمات ARIA» مجاني؟
نعم — نص درس «أدوار وسمات ARIA» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «أدوار وسمات ARIA»؟
طبّق أدوار المعالم ومناطق التحديث المباشر وسمات aria-* لتحسين المكوّنات عندما لا تكون HTML الأصلية كافية. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «أدوار وسمات ARIA»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.