ARIA وإمكانية الوصول: label وrole وaria-*
اربط التسميات بعناصر التحكم، وطبّق أدوار ARIA عند الحاجة، واستخدم aria-label وaria-describedby لدعم قارئات الشاشة.
ARIA وإمكانية الوصول: label وrole وaria-* درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
لماذا ARIA؟
ARIA، أي Accessible Rich Internet Applications، هي مجموعة من سمات HTML التي توضح الغرض من مكونات واجهة المستخدم وحالتها وخصائصها للتقنيات المساعدة مثل قارئات الشاشة، لا سيما في الأدوات المخصصة التي لا يوفّر HTML الأصلي ما يعادلها.
القاعدة الأولى في ARIA
لا تستخدم ARIA إذا كان بإمكان عنصر أو سمة أصلية في HTML أداء المهمة. فالعنصر <button> أفضل دائمًا من <div role="button">. يوفّر HTML الأصلي إمكانية وصول مدمجة مجانًا.
أدوار المعالم
تتيح أدوار معالم ARIA لمستخدمي قارئات الشاشة الانتقال مباشرة إلى أقسام الصفحة. وتُستدل معظم هذه الأدوار من HTML الدلالي: <main> → role=main، و<nav> → role=navigation. أضف الأدوار الصريحة فقط عند عدم استخدام عنصر دلالي.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
توفر aria-label اسمًا متاحًا غير مرئي للعنصر. استخدمها عندما لا توجد تسمية نصية مرئية يمكن الإشارة إليها. وهي شائعة في أزرار الأيقونات.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
تشير aria-labelledby إلى نص عنصر آخر بوصفه التسمية، باستخدام مرجع ID. ويُفضّل استخدامها على aria-label عند وجود تسمية مرئية بالفعل.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
تشير aria-describedby إلى نص وصفي إضافي، مثل رسالة خطأ أو تلميح، يكمل التسمية. يقرأ قارئ الشاشة التسمية أولًا، ثم الوصف.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded وaria-haspopup
تحتاج الأدوات الديناميكية إلى سمات للحالة. توضح aria-expanded ما إذا كانت أداة الكشف، مثل الأكورديون أو القائمة المنسدلة، مفتوحة أو مغلقة. حدّثها في JavaScript عند تغير الحالة.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
تزيل aria-hidden="true" العنصر وجميع عناصره الفرعية من شجرة إمكانية الوصول. استخدمها للعناصر الزخرفية مثل أيقونات SVG التي تحمل تسمية مرئية بالفعل.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>المناطق الحية: aria-live
تخبر aria-live قارئات الشاشة بالإعلان عن التغييرات التي تطرأ على هذه المنطقة. تنتظر polite حتى ينتهي المستخدم من الإجراء الحالي. أما assertive فتقاطع المستخدم فورًا، لذا استخدمها باعتدال.
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
يمثل role="alert" ضمنيًا aria-live=assertive. أدرج رسائل الخطأ أو الإشعارات المهمة داخل عنصر يحمل هذا الدور، وسيعلن قارئ الشاشة عنها فورًا.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyأخطاء النماذج المتاحة
عند وجود خطأ في حقل: استخدم aria-invalid="true"، واربط رسالة الخطأ باستخدام aria-describedby، وحدّث محتوى role="alert". يضمن هذا النهج المكوّن من ثلاثة أجزاء أن ينقل قارئ الشاشة جميع المعلومات الضرورية.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>فحص سريع
ما سمة ARIA التي توفر الاسم المتاح للعنصر عند عدم وجود تسمية نصية مرئية؟
مراجعة: أساسيات ARIA
فضّل HTML الأصلي على ARIA. استخدم aria-label لأزرار الأيقونات. واستخدم aria-labelledby للإشارة إلى التسميات المرئية. واستخدم aria-describedby للتلميحات والأخطاء. واستخدم aria-expanded لأدوات الكشف. واستخدم aria-hidden للمحتوى الزخرفي. واستخدم aria-live لتحديثات الحالة الديناميكية. واستخدم aria-invalid مع role=alert لأخطاء النماذج.
الأسئلة الشائعة
هل درس «ARIA وإمكانية الوصول: label وrole وaria-*» مجاني؟
نعم — نص درس «ARIA وإمكانية الوصول: label وrole وaria-*» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «ARIA وإمكانية الوصول: label وrole وaria-*»؟
اربط التسميات بعناصر التحكم، وطبّق أدوار ARIA عند الحاجة، واستخدم aria-label وaria-describedby لدعم قارئات الشاشة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «ARIA وإمكانية الوصول: label وrole وaria-*»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- عناصر التحكم في النماذج: أنواع input وselect وtextarea
- ARIA وإمكانية الوصول: label وrole وaria-*
- HTML5 الدلالي: العناصر الدلالية مقابل حساء div
- سمات التحقق من صحة النماذج