قائمة أدوار ARIA: مقارنة أفضل المراجع

تحتوي قائمة أدوار ARIA الكاملة على 82 قيمة محددة في مواصفات WAI-ARIA 1.2 لـ W3C، ويتم تنظيمها في ست فئات وظيفية: أدوار المستند، والمعالم، والقطعة، والهيكل، والنوافذ، والحالة المجردة. اختر المرجع المناسب لاستشارتك اعتمادًا على ما إذا كنت بحاجة إلى جدول سريع أو وثائق باستخدام نماذج التعليمات البرمجية أو دليل قرار بشأن تطبيق كل دور.

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

• تحدد مواصفات WAI-ARIA 1.2 82 دورًا، ولكن يتم استخدام مجموعة فرعية فقط في الممارسة اليومية لموقع XHTML/CSS يمكن الوصول إليه.
• القاعدة الأولى لـ ARIA لا تزال سارية: إذا كان هناك عنصر HTML أصلي مع الدلالة التي تحتاجها، فسيتم استخدامه في مكان إضافة دور.
• الأدوار المجردة (مثل role = "widget" أو role = "input") لا ينبغي كتابتها في الترميز؛ فهي تعمل فقط كقاعدة تصنيفية.
• مرجع مفيد للواجهة الأمامية يجب أن يشمل الدور وخصائص ARIA الإلزامية والحالات المسموح بها ومثال لترميز حقيقي.
• تركز أدوار المعالم والأدوات على أكبر عدد من الأخطاء التي اكتشفها أدوات التدقيق الآلية مثل axe-core أو Lighthouse.

ما هو دور ARIA ولماذا تحتاج إلى قائمة موثوقة

إن دور ARIA هو قيمة يتم تخصيصها لعنصر من خلال إسناد “الدور” للتواصل مع تقنيات المساعدة التي يمثلها نوع المكونات. يقوم المتصفح هذا الدور من خلال شجرة إمكانية الوصول وقارئ شاشة مثل NVDA أو JAWS أو VoiceOver لينقل إعلانًا محددًا: “زر”، “علامة تبويب”، “منطقة”، “مربع الحوار”.

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

يعد التوثيق الرسمي لأدوار ARIA في MDN (شبكة مطوري Mozilla) هو المرجع التقني الأكثر استشارة باللغتين الإسبانية والإنجليزية، ولكنه ليس الوحيد. توجد أدلة مرجعية وأدلة لأنماط التصميم وأدوات التحقق التي تتطلب احتياجات مختلفة. قارنها لمساعدتك في اختيار ما يناسبك مع تدفق عملك.

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

التصنيف الرسمي يجمع الأدوار حسب وظيفته. التعرف على الفئات يتجنب البحث في القائمة الخاطئة.

أدوار المستند. وصف بنية صفحة أو قسم: article، document، feed، heading، img، list، listitem، math، none، note، presentation، row، separator، table، term، “شريط الأدوات”، “تلميح الأدوات”. هناك الكثير من عناصر HTML الأصلية المكررة، لذلك نادرًا ما يتم كتابتها يدويًا.

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

أدوار المعالم. حدد المناطق القابلة للتنقل في الصفحة: “banner، complementary، contentinfo، form، main، navigation، region، search`. هذا هو الأكثر استخدامًا في المواقع ذات دلالات HTML غير المكتملة.

** أدوار القطعة. ** تمثل عناصر التحكم التفاعلية: زر، مربع اختيار، خلية الشبكة، رابط، menuitem، menuitemcheckbox، menuitemradio، option، progressbar، radio، scrollbar، searchbox، slider، spinbutton، switch، علامة التبويب، لوحة التبويب، مربع النص، عنصر الشجرة. يتطلب التركيز وإدارة لوحة المفاتيح.

أدوار الهيكل. تتضمن أدوات التنظيم: application، grid، group، listbox، menu، menubar، radiogroup، tablist، tree، treegrid، rowgroup، columnheader، rowheader.

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

أدوار النوافذ. إدارة المحتوى المتراكبة أو المشروطة: مربع حوار التنبيه، مربع الحوار.

أدوار مجردة. لا تتم كتابة أي عناصر في الترميز: command، composite، input، landmark، range، roletype، section، sectionhead، select، structure، widget، window. تستخدم في المواصفات لوراثة الخصائص بين الأدوار.

المقارنة: أفضل المراجع لأدوار ARIA

تقارن اللوحة التالية المراجع الأكثر استخدامًا من قبل المطورين ذوي الأصول الأسبانية وفقًا للمعايير العملية.

المرجعية	تيبو	التعابير	أمثلة على الكود	الفقرة المثالية
MDN Web Docs (أدوار ARIA)	التوثيق الرسمي	متعدد اللغات (بما في ذلك الأسبانية)	نعم، من أجل الدور	استشارة تقنية عميقة
واي-اريا 1.2 (W3C)	المواصفات المعيارية	الانجليزية	لا	التحقق من النسبة الدقيقة
دليل ممارسات التأليف WAI-ARIA	دليل المستفيدين	الانجليزية	نعم، المستفيدون كاملون	تنفيذ الحاجيات مع لوحة المفاتيح
ورقة الغش Hoja de مرجعية تيبو	استئناف الطبلة	الانجليزية	مينيموس	أعد بسرعة المحرر
Accessibility.build (مرجع ARIA)	المرجع العملي	الانجليزية	نعم	تعلم بأمثلة تعليقات
المدققون (الفأس، المنارة)	هيرامينتا	متعدد اللغات	لا	أدوار الكاشف غير صالحة

تعتمد الانتخابات على اللحظة. أثناء كتابة السوق، كان يوم المرجع مضغوطًا بالسرعة. بعد إطلاق عنصر واجهة مستخدم لم يعلن عن حالته بشكل جيد، فإن مواصفات W3C ودليل مستفيدي WAI هي العناصر التي ستؤدي إلى حل المشكلة.

كيف نقرر ما هو الدور الذي يمكن تطبيقه: المعايير العملية

القرار الصحيح هو الذي سيستمر في إلغاء ARIA. هذه المعايير والأوامر تتجنب أكبر عدد من الأخطاء.

1. ¿هل يوجد عنصر HTML أصلي؟ للزر <button> بالفعل الدور الضمني لـ الزر. تعد إضافة role="button" زائدة عن الحاجة وقد تؤدي إلى حدوث تعارضات.
2. ¿الدور يتطلب سمات إلزامية؟ role="checkbox" يتطلب aria-checked. يتطلب role=“slider” aria-valuenow وaria-valuemin وaria-valuemax`. إذا لم تتمكن من الحفاظ على هذه الحالات، فإن الدور يضر أكثر مما يساعد.
3. ¿الدور يتضمن إدارة لوحة المفاتيح؟ تتطلب أدوار عناصر واجهة المستخدم التنقل باستخدام الأسهم والصفحة الرئيسية والنهاية والخروج وفقًا للنمط. يعد “role = “tablist"" بدون التعامل مع الأسهم أسوأ من عدم وجوده.
4. ¿El rol es Abstracto؟ إذا كان في قائمة الأدوار المجردة فلا يجب كتابته.
5. ¿هل الدور قديم أو غير مستخدم؟ تم تغيير بعض القيم بين ARIA 1.0 و1.2. راجع دائمًا الإصدار الحالي.

القاعدة الأولى لاستخدام ARIA، المعترف بها في دليل تقنيات W3C، هي المبدأ: استخدم HTML الأصلي كلما أمكن ذلك. ARIA عبارة عن تصحيح عندما لا يكون HTML كافيًا، وليس بديلاً.

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

الأخطاء المتكررة عند الرجوع إلى قائمة الأدوار وتطبيقها

يتكون الخطأ المعتاد من نسخ دور مرجعي واحد دون التحقق من السمات المطلوبة. role = "combobox" في ARIA 1.2 يتغير من 1.0 إلى 1.0 ويتوقع الآن “الأغنية الموسعة” وعلاقة مع “مربع قائمة” وسط “عناصر التحكم في الأغنية”. قم بتطبيق الإصدار القديم مع الإعلان على قراء تم تحديثهم.

من الشائع أيضًا استخدام role =presentation' أو role =“none”لـ "تنظيف" الدلالات دون فهم أنه يزيل العنصر من شجرة إمكانية الوصول، بما في ذلك العناصر التابعة له في بعض الحالات. يظهر هذا أيضًا مع الترددrole=“application”`، الذي ينقل كل عناصر التحكم في لوحة المفاتيح إلى الأداة ويعطل اختصارات قارئ الشاشة؛ فهو محجوز لتطبيقات الويب المعقدة، وليس للنماذج.

تؤدي أدوار المعالم المكررة إلى حدوث ارتباك: يؤدي دور role="main" في نفس الصفحة، أو role="banner" داخل <مقال>، إلى التنقل عبر مناطق غير متماسكة. تكتشف عملية التحقق باستخدام المحور الأساسي أو باستخدام أدوات الوصول للمتصفح العديد من هذه الحالات، إلا أن أي أداة تلقائية تحل محل الاختبار باستخدام قارئ شاشة حقيقي.

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

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

يجمع اختبار الأدوار بين الفحص اليدوي والأتمتة. تشتمل أدوات تطوير Chrome وFirefox على لوحة إمكانية الوصول تعرض الشجرة كما تتلقى نظام التشغيل، مع الدور المحسوب في كل عقدة. تكون الطريقة الأكثر مباشرة للعرض هي الدور المعلن عنه أو المختصر بالدلالة الأصلية.

محور أساسي ومتكامل في Lighthouse ومتاح كتمديد، وتمييز الأدوار غير الصالحة والسمات الإلزامية الأساسية والمجموعات المتناقضة. ملحق Accessibility Insights for Web، استنادًا إلى قواعد المحور، يساعد في تحسين التوجيهات. للاختبار مع مستخدمين حقيقيين، يقدم NVDA في Windows وVoiceOver في macOS التحقق النهائي: لا يمكن لأي مدقق اكتشاف ما إذا كانت نتيجة الإعلان مفهومة في السياق.

تعد وثائق الوصول إلى MDN ودليل WAI-ARIA من W3C بمثابة المصادر التي سيتم فتحها أثناء التصميم. لا يشرح الأول كل دور؛ يتم دمج اللوحة الثانية في مكونات كاملة.

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

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

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

¿أدوار كوانتوس ARIA موجودة؟

تحدد مواصفات W3C WAI-ARIA 1.2 82 دورًا إجمالاً، مقسمة بين أدوار المستند والمعالم وعناصر واجهة المستخدم والبنية والنافذة والمجردة. في هذا السياق، يتم استخدام جزء صغير فقط في التطوير المعتاد: لا يتم كتابة الأدوار المجردة أبدًا والعديد من أدوار المستندات تكرر عناصر HTML الأصلية.

ما هو الفرق بين دور ARIA وسمة ARIA؟

تصف إحدى دور ARIA ما هو عنصر، بينما تصف سمات ARIA حالتها أو ممتلكاتها. على سبيل المثال، يحدد role="checkbox" المكون ويتصل aria-checked="true" إذا تم تحديده. يتم تعيين الأدوار على أساس “الدور”؛ تستخدم الأوضاع والملكيات المصطلح “الأغنية-”.

هل تريد استخدام ARIA إذا كنت تستخدم دلالات HTML؟

في معظم الحالات، لا. يكشف HTML الدلالي بالفعل عن الأدوار الضمنية: <nav> يعادل role="navigation" و<main> يكافئ role="main". إن إضافة الدور بشكل صريح أمر زائد عن الحاجة ويمكن أن يؤدي إلى حدوث تعارضات. ARIA محجوز للمكونات التي لا يغطيها HTML، مثل علامات التبويب أو الأشجار أو القوائم المعقدة.

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

يجب ألا تظهر الأدوار المجردة مطلقًا: command، وcomposite، وinput، وlandmark، وrange، وroletype، وsection، وsectionhead، وselect، وstructure، وwidget، وwindow. وهي موجودة فقط للمواصفات التي تحدد وراثة الخصائص بين الأدوار. تؤدي كتابتها إلى إنتاج دور غير صالح يشير إليه المدققون.

هل نتأكد من أن دور ARIA يعمل بشكل صحيح؟

يجمع التحقق بين ثلاث خطوات: فحص شجرة إمكانية الوصول في DevTools بالمتصفح لتأكيد الدور المحسوب، وتمرير أداة التحقق مثل axe-core لاكتشاف السمات الإلزامية المفقودة، والاختبار باستخدام قارئ شاشة حقيقي مثل NVDA أو VoiceOver. الخطوة الأخيرة فقط هي التي تؤكد أن الإعلان مفهوم للشخص.

هل تختلف أدوار ARIA بين إصدارات المواصفات؟

نعم. ARIA 1.1 تؤدي أدوارًا إضافية مثل “التغذية” و”التبديل”، وتعديل ARIA 1.2 سلوك “combobox” وتوحيد القيم الأخرى. تم تطوير ARIA 1.3. راجع دائمًا الإصدار الجديد من المواصفات لتجنب تطبيق الأنماط القديمة التي يفسرها قراء الشاشة الحديثة بشكل مختلف.