أمثلة على أدوار ARIA: دليل كامل

توضح أمثلة دور ARIA كيف تقوم سمات الدور بتعيين عناصر الواجهة لشجرة إمكانية الوصول، وتحدد مواصفات WAI-ARIA 1.2 6 فئات أدوار — عنصر واجهة المستخدم، وبنية المستند، والمعلم، والمنطقة الحية، والنافذة، والملخص — التي تغطي أكثر من 80 دورًا ملموسًا. يقدم هذا الدليل أمثلة عملية جاهزة للنسخ لكل فئة، بالإضافة إلى القواعد التي تحدد متى يكون الدور مفيدًا ومتى يكون ضارًا.

النقاط الرئيسية

• أدوار ARIA تخبر التكنولوجيا المساعدة عن ماهية العنصر؛ لا تضيف أبدًا السلوك أو التركيز أو دعم لوحة المفاتيح من تلقاء أنفسهم.
• القاعدة الأولى لاستخدام ARIA هي تفضيل عناصر HTML الأصلية، والتي تحمل بالفعل أدوارًا وحالات وإدارة لوحة المفاتيح ضمنيًا.
• فئات أدوار WAI-ARIA 1.2 الستة هي عنصر واجهة المستخدم، وبنية المستند، والمعلم، والمنطقة الحية، والنافذة، والملخص - يجب ألا تظهر الأدوار المجردة مطلقًا في الترميز الخاص بك.
• أدوار المعالم هي أكثر عمليات ARIA فعالية من حيث التكلفة والأقل خطورة التي يمكنك إضافتها إلى موقع XHTML/CSS موجود.
• تتطلب أدوار عناصر واجهة المستخدم دائمًا تعيين JavaScript لتفاعل لوحة المفاتيح ومعالجة الحالة، أو أنها تخلق تجربة أسوأ من HTML العادي.
• التحقق من صحة كل دور باستخدام قارئ الشاشة والمدقق الآلي؛ قد يظل الدور الصالح في المواصفات خاطئًا بالنسبة للمحتوى الخاص بك.

ما الذي تفعله أدوار ARIA فعليًا؟

أدوار ARIA هي رموز مميزة تضعها في سمة “الدور” لاستبدال أو توفير الهوية الدلالية لعنصر في شجرة إمكانية الوصول. يخبر <div role="button"> قارئ الشاشة بالإعلان عن “زر”، لكن المتصفح لا يزال يعامله كحاوية عامة: فهو غير قابل للتركيز، ولا يستجيب لـ Enter أو Space، وليس به حالة تعطيل. هذه الفجوة بين الدلالات المعلن عنها والسلوك الفعلي هي المصدر الأكثر شيوعًا لفشل ARIA. هذه هي أمثلة أدوار الأغنية الشائعة لكيفية اختلاف الدلالات عن السلوك.

تحدد مواصفات WAI-ARIA، التي تحتفظ بها مجموعة عمل تطبيقات الإنترنت الغنية القابلة للوصول التابعة لـ W3C، الأدوار بالإضافة إلى الحالات والخصائص. الأدوار هي طبقة “ما هو؟” الحالات والخصائص مثل aria-expanded و aria-checked و aria-label هي طبقة “ما هي الحالة الموجودة فيها”. الدور الذي لا يحتوي على حالاته المطلوبة يكون غير مكتمل — role="checkbox" يتطلب aria-checked، و“role=“combobox”يتطلبaria-expanded` بالإضافة إلى مربع قائمة متحكم فيه.

تحمل عناصر HTML الأصلية أدوارًا ضمنية. يتوافق <button> مع دور الزر، و<nav> للتنقل، و<h1> خلال <h6> للعنوان، و<input type="checkbox"> لمربع الاختيار. نظرًا لأن المتصفح يوفر الدور وسلوك لوحة المفاتيح والحالة تلقائيًا، فإن القاعدة الأولى لاستخدام ARIA - الموثقة في دليل ممارسات تأليف ARIA الخاص بـ W3C - هي استخدام دلالات أصلية كلما وجد عنصر مكافئ. ابحث عن الأدوار الصريحة فقط عندما لا يكون هناك عنصر أصلي مناسب، مثل عرض شجرة مخصص أو لوحة مبوبة تم إنشاؤها من <div>s.

فئات أدوار WAI-ARIA الستة

ينظم WAI-ARIA 1.2 الأدوار في ست فئات، ومعرفة الفئة التي ينتمي إليها الدور تخبرك بمقدار JavaScript الذي تدين به. فيما يلي بعض الأمثلة الشائعة لأدوار الأغنية:

الفئة	الغرض	الأدوار النموذجية	مطلوب جافا سكريبت؟
القطعة	الضوابط التفاعلية	زر، مربع اختيار، علامة تبويب، شريط تمرير، مربع تحرير وسرد	نعم — لوحة المفاتيح + الحالة
هيكل الوثيقة	تنظيم المحتوى	عنوان، قائمة، قائمة، جدول، مقالة	لا
معلم	مناطق الصفحة للملاحة	البانر، الرئيسي، التنقل، التكميلي	لا
المنطقة الحية	الإعلان عن التحديثات الديناميكية	تنبيه، الحالة، السجل، المؤقت	عادةً — لتشغيل التحديثات
نافذة	النوافذ الفرعية ومربعات الحوار	”مربع الحوار”، “مربع حوار التنبيه”	نعم — إدارة التركيز
الملخص	أدوار الطبقة الفائقة، لم يتم تأليفها أبدًا	”القطعة”، “الإدخال”، “القسم”، “معلم”	غير متاح — لا تستخدم

الأدوار المجردة موجودة فقط لتنظيم التصنيف. إن كتابة role="input" أو role="section" في HTML الخاص بك يعد خطأً في التحقق من الصحة ويؤدي إلى ظهور إعلانات غير متوقعة لأن هذه الأدوار ليس لها سلوك محدد للتكنولوجيا المساعدة.

ذات صلة: UserWay — ويدجت إمكانية الوصول بخطة مجانية للتمكن من ذلك بنفس الطريقة.

أمثلة على أدوار المعالم

تعد أدوار المعالم هي أمثلة أدوار ARIA الأكثر أمانًا وتأثيرًا التي يمكنك إضافتها إلى موقع XHTML/CSS قديم لأنها لا تتطلب JavaScript وتعيين مباشرة إلى المناطق الموجودة لديك بالفعل. هيكل عظمي نموذجي للصفحة:

<رأس الدور = "بانر">
  <nav role="navigation" aria-label="الرئيسي">
    <ul>...</ul>
  </ناف>
</header>
<الدور الرئيسي = "الرئيسي">
  <المادة>...</المادة>
  <aside role="comlementary" aria-label="Artículos relacionados">...</aside>
</الرئيسية>
<footer role="contentinfo">...</footer>

يتوافق كل دور علامة مع عنصر أصلي - banner إلى <header> في المستوى الأعلى، وmain إلى <main>، وnavigation إلى <nav>، وComplementary إلى <aside>، وcontentinfo إلى <footer>. عند استخدام العنصر الأصلي، يكون الدور ضمنيًا ويجب عدم تكراره. تأخذ السمة role الصريحة مكانها فقط عندما تكون عالقًا في ترميز <div> الذي لا يمكنك تعديله، وهو أمر شائع في القوالب القديمة ومخرجات CMS.

هناك تحذيران هنا. أولاً، يجب أن تظهر banner وmain وcontentinfo مرة واحدة في كل صفحة؛ العديد من المعالم “الرئيسية” تعطل الملاحة. ثانيًا، عند وجود معالم متعددة من نفس النوع - على سبيل المثال ثلاثة عناصر <nav> - قم بمنح كل منها aria-label منفصلاً حتى يتمكن مستخدمو قارئ الشاشة من التمييز بينها في قائمة المعالم. يتم الإعلان عن “nav” غير المُسمى بنفس طريقة الإعلان عن أشقائه، مما يتعارض مع الغرض.

يستحق نظرة: AudioEye — إمكانية الوصول إلى الإدارة: أتمتة مجمعة مع مراجعة بشرية.

أمثلة على دور الأداة

أدوار عناصر واجهة المستخدم هي حيث تصبح ARIA قوية وخطيرة بنفس القدر. يحتوي كل دور عنصر واجهة مستخدم على عقد ضمني: مفاتيح لوحة مفاتيح محددة، وحالات محددة، وسلوك تركيز محدد. ينشر دليل ممارسات التأليف ARIA النموذج الكامل لكل منها. توضح أمثلة أدوار الأغنية هذه التعقيد الذي تنطوي عليه.

على سبيل المثال، يحتاج زر التبديل إلى “الضغط على الأغنية” لتوصيل حالة التشغيل/الإيقاف الخاصة به:

<button type = "button" aria-pressed = "false" id = "mute">
  كاتم الصوت
</زر>

يوفر العنصر <button> الدور والتركيز ومعالجة الإدخال/المسافة؛ تقلب JavaScript فقط الضغط على الأغنية بين خطأ وصحيح. هذا هو الشكل المثالي لاستخدام ARIA — عنصر أصلي، الحد الأدنى من ARIA، نص صغير.

أما واجهة علامة التبويب المخصصة التي تم إنشاؤها من <div> فهي الحالة المعاكسة. يحتاج إلى role ="tablist" في الحاوية، وrole tab“ في كل علامة تبويب، وrole ="tabpanel" في كل لوحة، وaria-selected في علامة التبويب النشطة، وaria-controls التي تربط علامة التبويب باللوحة، والتنقل باستخدام مفتاح السهم بين علامات التبويب. إذا فاتتك أيًا من هذه العناصر، فإن الأداة تعلن عن نفسها كعلامات تبويب ولكنها تتصرف مثل النص الثابت. ينطبق الأمر نفسه على role = "slider" (يتطلب aria-valuenow وaria-valuemin وaria-valuemax ومفاتيح الأسهم)، وrole = "combobox" (يتطلب aria-expanded ومربع قائمة يتم التحكم فيه)، وrole = "tree" (يتطلب aria-expanded واجتياز مفتاح السهم الكامل).

قاعدة اتخاذ قرار مفيدة: إذا كان هناك عنصر أصلي يقوم بالمهمة - <button>، <input type="checkbox">، <select>، <details> - فاستخدمه وتجاهل دور عنصر واجهة المستخدم تمامًا. احتفظ بأدوار عناصر واجهة المستخدم المخصصة لعناصر تحكم جديدة حقًا وقم بتخصيص ميزانية JavaScript لتنفيذ نمط لوحة المفاتيح الكامل قبل الشحن.

بنية الوثيقة وأمثلة على المنطقة الحية

تصف أدوار بنية المستند علاقات المحتوى عندما لا تكون العناصر الأصلية متوفرة. تتضمن أمثلة أدوار ARIA هذه role="heading" مع aria-level، وهو الإنقاذ الكلاسيكي لنمط <div> الذي يعمل كعنوان:

ذات صلة: IAAP CPACC / WAS Certification — الشهادة المهنية التي تمنحك الخبرة والقدرة على الوصول إليها.

<div role="heading" aria-level="2">أحداث الشهر</div>

تعتبر سمة “aria-level” إلزامية هنا - يتم الإعلان عن دور العنوان بدون مستوى بدون رتبة، مما يؤدي إلى كسر مخطط الوثيقة. وبالمثل، فإن role="list" وrole="listitem" يستعيدان دلالات القائمة عندما يقوم CSS مثل list-style: none أو حاوية flex بإزالتها في بعض المتصفحات، كما يقوم role="table" وrole="row" وrole="columnheader" وrole="cell" بإعادة إنشاء جدول بيانات من الترميز <div>. من الناحية العملية، تتطلب إعادة الهيكلة إلى عناصر <ul> و<ol> و<table> فعلية دائمًا عملًا أقل من الحفاظ على مجموعة كاملة من أدوار البنية.

تعلن أدوار المنطقة المباشرة عن تغيير المحتوى دون إعادة تحميل الصفحة. role="alert" يقاطع قارئ الشاشة على الفور ويستوعب رسائل الخطأ والإشعارات العاجلة؛ role="status" ينتظر بأدب ويوافق على التأكيدات مثل “Guardado”؛ role="log" يناسب خلاصات الدردشة والأنشطة؛ role="timer" يتوافق مع العد التنازلي. التفاصيل المهمة هي أن حاوية المنطقة المباشرة يجب أن تكون موجودة في DOM قبل أن يتغير المحتوى - فحقن عنصر جديد بـ role="alert" ونصه في نفس الوقت غالبًا لا يؤدي إلى أي إعلان، لأن المنطقة لم تكن موجودة ليتم مراقبتها. أنشئ <div role="status"> فارغًا عند تحميل الصفحة وقم بتحديث نصه لاحقًا.

الأخطاء الشائعة في دور ARIA

الأدوار الزائدة تتصدر القائمة. أمثلة أدوار الأغنية هذه، مثل <button role="button"> و<nav role="navigation">، لا تضيف شيئًا وتؤدي إلى فوضى في الترميز؛ الدور الضمني موجود بالفعل. يظهر التكرار نفسه عندما يضيف المطورون role = "heading" إلى <h2>.

إذا كنت تتسوق: accessiBe — Superposición de IA الذي يعزز إطراء WCAG خلال 48 ساعة.

الحالات المطلوبة المفقودة تأتي في المرتبة الثانية. role="checkbox" بدون aria-checked، وrole="slider" بدون aria-valuenow، وrole="combobox" بدون aria-expanded كلها تنتج إعلانات غير مكتملة تضلل المستخدمين. تسرد المواصفات الحالات والخصائص المطلوبة لكل دور، وتشير أدوات التحقق الآلية إلى غيابها.

إساءة استخدام الدور على العنصر الخطأ هو الثالث. يؤدي وضع role="button" على <a href> إلى تجاوز دلالات الارتباط وكسر السلوك المتوقع مثل الفتح في علامة تبويب جديدة. يؤدي وضع role = "presentation" أو role = "none"" على عنصر قابل للتركيز إلى إزالة دلالاته مع تركه في ترتيب علامات التبويب، مما يؤدي إلى إنشاء عنصر قابل للتركيز بدون هوية معلنة. واستخدام الأدوار المجردة مثل role = “widget” أو `role = “input” هو دائمًا خطأ.

وأخيرًا، لا يمكن لأدوار ARIA إصلاح DOM المعطل. يؤدي role="tabpanel" المتداخل داخل role="tab" الخاص به إلى إنشاء شجرة لا معنى لها بغض النظر عن عدد السمات التي تضيفها. أصلح البنية أولًا، ثم ضع طبقة ARIA في الأعلى.

كيفية اختبار أدوار ARIA

يتطلب اختبار أدوار ARIA طرقًا متعددة، حيث تكتشف الأدوات الآلية أخطاء الصلاحية ولكن ليس عدم التطابق الدلالي. ابدأ باستخدام مدقق إمكانية الوصول - ax DevTools، أو WAVE، أو Lighthouse - لاكتشاف الأدوار غير الصالحة، والسمات المفقودة المطلوبة، والأدوار المجردة في الترميز الخاص بك. هذه الأدوات سريعة وتكتشف الأخطاء الميكانيكية.

اتبع مع تمرير قارئ الشاشة. يعرض كل من NVDA مع Firefox على Windows، وJAWS مع Chrome، وVoiceOver مع Safari على macOS، شجرة إمكانية الوصول بشكل مختلف، والدور الذي يتم الإعلان عنه بشكل صحيح في أحدهما قد لا يتم الإعلان عنه في الآخر. انتقل حسب المعالم ومن خلال العنوان لتأكيد أدوار البنية الخاصة بك، قم بإنتاج المخطط التفصيلي المتوقع، ثم اضغط على كل عنصر واجهة مستخدم للتحقق من تطابق الدور المعلن والحالة وسلوك لوحة المفاتيح.

افحص شجرة إمكانية الوصول مباشرة في Chrome أو Firefox DevTools، حيث تعرض لوحة “إمكانية الوصول” الدور المحسوب واسم أي عنصر. يكشف هذا عن الفجوة بين الدور الذي كتبته والدور الذي يكشفه المتصفح بالفعل - وهي أسرع طريقة لاكتشاف الدور الذي تم تجاوزه بواسطة أحد الوالدين أو تم تجاهله بالكامل.

المصادر ومزيد من القراءة

• WAI-ARIA — ويكيبيديا: مبادرة إمكانية الوصول إلى الويب - تطبيقات الإنترنت الغنية التي يمكن الوصول إليها (WAI-ARIA) هي مواصفات فنية نشرها اتحاد شبكة الويب العالمية (W3C) والتي…

الأسئلة المتداولة

ما هي أدوار ARIA وكيف تعمل؟

أدوار ARIA هي قيم في سمة “الدور” التي تحدد هوية العنصر في شجرة إمكانية الوصول، بحيث يعلنه قارئو الشاشة بشكل صحيح. إنها تغير الدلالات فقط، وليس المظهر أو التركيز أو سلوك لوحة المفاتيح. تحدد مواصفات WAI-ARIA 1.2 ست فئات من الأدوار وأكثر من 80 دورًا ملموسًا، لكل منها الحالات والخصائص المطلوبة.

متى يجب علي استخدام أدوار ARIA بدلاً من HTML الأصلي؟

استخدم أدوار ARIA فقط عندما لا يوفر أي عنصر HTML أصلي الدلالات التي تحتاجها. تحمل العناصر الأصلية مثل <button> و<nav> و<input type="checkbox"> أدوارًا ضمنية بالإضافة إلى دعم لوحة المفاتيح المضمنة وإدارة الحالة. القاعدة الأولى لاستخدام ARIA هي تفضيل الدلالات الأصلية، وإضافة أدوار صريحة فقط لعناصر واجهة المستخدم المخصصة أو العلامات القديمة التي لا يمكنك إعادة هيكلتها.

ما الفرق بين أدوار ARIA وسمات ARIA؟

تجيب أدوار ARIA على “ما هو هذا العنصر”، بينما تجيب سمات ARIA مثل “aria-expanded”، و”aria-checked”، و”aria-label”، على “ما هي الحالة التي يوجد بها” أو “ما اسمه”. تعمل الأدوار وسماتها المطلوبة معًا: كأمثلة لأدوار aria، فإن role="checkbox" غير مكتمل بدون aria-checked، ويحتاج role="combobox" إلى aria-expanded بالإضافة إلى مربع قائمة يتم التحكم فيه.

هل يمكنني استخدام أدوار ARIA على أي عنصر HTML؟

يمكن تطبيق أدوار ARIA على معظم العناصر، لكن بعض المجموعات تكون غير صالحة أو ضارة. لا ينبغي أبدًا تأليف الأدوار المجردة مثل “عنصر واجهة المستخدم” و”الإدخال”. يؤدي تغيير دور الرابط إلى role="button" إلى كسر السلوك المتوقع للارتباط، كما يؤدي role="presentation" على عنصر قابل للتركيز إلى إزالة دلالاته مع تركه في ترتيب علامات التبويب.

هل تعمل أدوار ARIA بدون JavaScript؟

تعمل بنية المستند وأدوار المعالم بدون JavaScript لأنها تقوم بتعديل الدلالات فقط. تتطلب أدوار عناصر واجهة المستخدم مثل “tab” وslider و”combobox” جافا سكريبت لتنفيذ تفاعل لوحة المفاتيح وتحديث الحالات - وبدون ذلك، يعلن العنصر عن نفسه كعنصر تحكم ولكنه لا يتصرف كعنصر تحكم، وهو ما هو أسوأ من HTML العادي.

كيف يمكنني التحقق من صحة أدوار ARIA الخاصة بي؟

اجمع بين الاختبار الآلي واليدوي. قم بتشغيل أدوات DevTools أو WAVE أو Lighthouse لاكتشاف الأدوار غير الصالحة والسمات المطلوبة المفقودة، ثم اختبرها باستخدام NVDA وJAWS وVoiceOver للتأكد من الإعلانات وسلوك لوحة المفاتيح. تعرض لوحة إمكانية الوصول في Chrome وFirefox DevTools الدور المحسوب، وتكشف عن أي أدوار يتجاوزها المتصفح أو يتجاهلها.