ما هي أدوار ARIA؟ دليل عملي للمطورين
ما هي أدوار ARIA؟ أدوار ARIA هي مفردات مكونة من 87 قيمة محددة (اعتبارًا من WAI-ARIA 1.2) والتي تخبر التقنيات المساعدة عن ماهية العنصر وكيف يجب أن يتصرف بغض النظر عن علامة HTML الخاصة به. يقوم دور مثل button أو navigation أو dialog بتعيين <div> أو <span> بشكل عام لنوع عنصر واجهة مستخدم معروف حتى يعلنه قارئو الشاشة بشكل صحيح ويكشفون عن تفاعلات لوحة المفاتيح الصحيحة.
لماذا توجد أدوار ARIA على الإطلاق
لفهم ما هي أدوار الأغنية، يجب على المرء أن يرى أنها تحل مشكلة هيكلية لا يستطيع HTML وحده حلها. تحتوي عناصر HTML الأصلية على دلالات ضمنية: يعلن <button> عن نفسه كزر، ويمكن التركيز عليه، ويستجيب لمفتاح Enter ومفتاح المسافة، ويعرض حالة الضغط عند الضرورة. عندما يقوم المطورون بإنشاء عناصر واجهة مستخدم مخصصة (مربع تحرير وسرد، ولوحة علامات تبويب، وعرض شجري)، فإنهم غالبًا ما يستخدمون <div> و<span>، والتي لا تحتوي على أي دلالات. تعمل أدوار ARIA على سد هذه الفجوة من خلال السماح للمؤلفين بذكر المعنى المفقود بشكل صريح.
تتم صيانة مواصفات WAI-ARIA بواسطة مجموعة عمل تطبيقات الإنترنت الغنية القابلة للوصول التابعة لـ W3C. أصبح الإصدار الأول، ARIA 1.0، بمثابة توصية W3C في عام 2014؛ تبع ذلك ARIA 1.1 في عام 2017، ووصل ARIA 1.2 إلى حالة التوصية في عام 2023. تمت إضافة الأدوار والحالات والخصائص مع كل مراجعة، ويرتبط كل منها بمستند ممارسات التأليف الذي يصف السلوك المتوقع للوحة المفاتيح.
هناك تمييز رئيسي يفصل الأدوار عن فئتي ARIA الأخريين. يجيب الأدوار: “ما هذا؟” تجيب الحالات والخصائص: “في أي حالة هي؟” و”ما علاقتها؟” يعلن role="checkbox" عن نوع الأداة؛ aria-checked="true" يشير إلى حالته الحالية. يعد الخلط بين الاثنين أحد الأسباب الأكثر شيوعًا لتعطل الأدوات المخصصة.
فئات الأدوار الستة
لفهم أدوار ARIA، من المفيد معرفة أن مواصفات ARIA تقوم بتجميع الأدوار في ست عائلات. يتيح لك فهم العائلة التنبؤ بالحالات والخصائص التي يدعمها الدور وأنماط لوحة المفاتيح التي تنطبق.
| الفئة | الغرض | الأدوار التمثيلية |
|---|---|---|
| المجردة | تعريفات الفئة الفائقة، لم يتم استخدامها مطلقًا في العلامات | widget، input، section |
| القطعة | الضوابط التفاعلية | button، checkbox، slider، tab |
| هيكل الوثيقة | معالم الصفحة والمناطق | banner، main، navigation، region |
| معلم | مناطق الصفحة القابلة للتنقل (مجموعة فرعية من البنية) | banner، complementary، contentinfo، form |
| المنطقة الحية | الإعلان عن تغييرات المحتوى الديناميكي | alert، status، log، timer |
| نافذة | نوافذ المتصفح أو التطبيق | dialog، alertdialog |
تُستخدم الأدوار المجردة فقط لتنظيم التصنيف. يجب على المؤلفين عدم كتابة role="widget" أو role="input" في الترميز؛ يؤدي هذا إلى سلوك غير محدد وفشل التحقق من الصحة. الفئات الخمس المتبقية هي تلك التي تقوم بتطبيقها بالفعل.
ذات صلة: — ويدجت إمكانية الوصول بخطة مجانية للتمكن من ذلك بنفس الطريقة.
الأدوار الضمنية والقاعدة الأولى في ARIA
يحتوي كل عنصر HTML على وظيفة ARIA ضمنية (والتي تشرح ما هي أدوار الأغنية) المحددة بواسطة مواصفات HTML Accessibility API Mapping (AAM). يحتوي العنصر <nav> على دور ضمني مثل role='navigation'. يحتوي
على دور ضمني = "list". من <h1> إلى <h6> له دور = “heading”. يحتوي <الجدول> على دور = "جدول".
تنص قاعدة W3C الأولى بشأن استخدام ARIA بوضوح على ما يلي: إذا كان عنصر أو سمة HTML أصلية تنقل بالفعل الدلالات والسلوك المطلوب، فاستخدمها بدلاً من إعادة استخدام عنصر مع ARIA. إضافة role="button" إلى <button> ليس ضروريًا. والأسوأ من ذلك، إذا أضفت role="button" إلى <div>، فسوف تحصل على الإعلان ولكن بدون أي سلوك: لا يوجد تركيز، ولا تنشيط لوحة المفاتيح، ولا إرسال نموذج.
يستحق نظرة: — إمكانية الوصول إلى الإدارة: أتمتة مجمعة مع مراجعة بشرية.
التكرار ليس ضارًا دائمًا. قد يؤدي تجاوز الدور الضمني إلى فقدان الدلالات التي تعتمد عليها التكنولوجيا المساعدة. تؤدي كتابة role="presentation" في <table> إلى حذف دلالات الجدول تمامًا، وهو ما يكون مقصودًا في بعض الأحيان مع جداول التخطيط ولكنه كارثي مع جداول البيانات.
كيف تتفاعل الأدوار مع الحالات والخصائص
تعمل الأدوار كحاويات للحالات والخصائص التي تدعمها. تحدد المواصفات السمات الصالحة للأدوار، ولا تعرض المتصفحات إلا المجموعات المدعومة في شجرة إمكانية الوصول. يساعد فهم أدوار ARIA في معرفة أن role="checkbox" يدعم aria-checked بالقيم true أو false أو mixed. يدعم role="slider" aria-valuenow، وaria-valuemin، وaria-valuemax، وaria-valuetext بشكل اختياري. يدعم role="combobox" aria-expanded وaria-controls وaria-activedescendant. إن تطبيق aria-checked على role="button" لا معنى له وسيتم تجاهله أو يؤدي إلى نتائج مربكة في بعض برامج قراءة الشاشة.
الخصائص المطلوبة مهمة أيضًا. إن role="checkbox" الذي لا يحتوي على aria-checked غير صالح؛ الحالة إلزامية وليست اختيارية. يؤدي role="slider" بدون aria-valuenow إلى ترك المستخدم غير قادر على تحديد القيمة الحالية. تصفها مواصفات ARIA بأنها “حالات وخصائص مطلوبة”، وتشير أدوات فحص التوافق مثل axe-core وIBM Equal Access Accessibility Checker إلى غيابها.
الأدوار وشجرة إمكانية الوصول ودعم المتصفح
تقوم المتصفحات بترجمة وظائف ARIA إلى واجهات برمجة تطبيقات إمكانية الوصول إلى النظام الأساسي (UIA على Windows، وAXAPI على macOS، وATK/AT-SPI على Linux)، وتستخدم قارئات الشاشة واجهات برمجة التطبيقات هذه. إن الدور الذي لا يعينه أي متصفح بشكل صحيح يكون غير مرئي عمليًا للمستخدمين.
يختلف الدعم حسب الميزة والمتصفح. يتم دعم الوظائف الأساسية مثل “الزر” و”الرابط” و”الرأس” و”القائمة” و”التنقل” عالميًا. تتمتع الأدوار الأحدث أو الأكثر تخصصًا (“الخلاصة”، و”الرياضيات”، و”الحاشية السفلية” من وحدة WAI-ARIA الخاصة بالنشر الرقمي) بدعم غير مكتمل. الدور = “switch” مدعوم في المتصفحات الحديثة، ولكن تم الإعلان عنه بشكل غير متسق قبل عقد من الزمن.
يظل الاختبار عبر المجموعات الفعلية التي يستخدمها جمهورك أمرًا ضروريًا. قد تعمل الأداة التي تعمل في NVDA مع Firefox بشكل مختلف في VoiceOver مع Safari، لأن قارئي الشاشة يستهلكان واجهات برمجة تطبيقات مختلفة للنظام الأساسي ويطبقان أساليب استدلال مختلفة.
ذات صلة: — الشهادة المهنية التي تمنحك الخبرة والقدرة على الوصول إليها.
الأدوار المميزة وبنية الصفحة
تسمح أدوار المعالم لمستخدمي قارئ الشاشة بالانتقال مباشرة إلى مناطق الصفحة. الأدوار الثمانية المميزة هي “الشعار”، و”التكميلي”، و”معلومات المحتوى”، و”النموذج”، و”الرئيسي”، و”التنقل”، و”المنطقة”، و”البحث”. تحتوي لغة HTML الحديثة على مرادفات أصلية لمعظمها: <header> يصبح banner، و<footer> يصبح contentinfo، و<main> يصبح main، و<nav> يصبح navigation، و<aside> يصبح تكميلي، و<form> مع اسم يمكن الوصول إليه يصبح form، و<section> مع اسم يمكن الوصول إليه يصبح region.
يُفضل استخدام العناصر الأصلية لأنها تعمل حتى في حالة فشل CSS أو JavaScript ولأنها تقلل من مخاطر تعارض الأدوار/السمات. لا يحتوي معلم البحث على مكافئ HTML أصلي، لذا يظل role="search" هو الاختيار الصحيح لمنطقة البحث.
من الأخطاء الشائعة تطبيق role="banner" على <div> الموجود داخل <main> أو <article>. تقوم أدوار المعالم بإنشاء معالم فقط إذا لم تكن متداخلة ضمن أدوار أخرى معينة؛ لن يتم عرض “الشعار” داخل “الرئيسي” كمعلم على الإطلاق. الموقع في DOM لا يقل أهمية عن قيمة الدور. بالنسبة لأولئك الذين يتساءلون عن أدوار الأغنية، تعد هذه المعالم جزءًا أساسيًا من المواصفات.
أدوار المنطقة الحية
عند النظر في أدوار الأغنية، تعلن الأدوار الإقليمية المباشرة عن تغييرات في المحتوى دون تغيير التركيز. وظائف المنطقة المباشرة الأربع هي “التنبيه”، و”الحالة”، و”السجل”، و”المؤقت”، بالإضافة إلى “الشاشة الاسمية” الأكثر عمومية. يحمل كل منهما قيمة aria-live ضمنيًا: تشير alert' و'log' في الممارسة العملية إلى assertive’ و’polite، على التوالي، في حين تشير status` إلى مهذب.
يعد الاختيار بين “التنبيه” و”الحالة” قرارًا تصميميًا له عواقب حقيقية. “التنبيه” يوقف كل ما يقرأه قارئ الشاشة، وهو مناسب للأخطاء والإشعارات العاجلة، ولكنه ضار إذا تم استخدامه بشكل مفرط. تنتظر “الحالة” التوقف المؤقت الذي يتزامن مع رسائل التقدم ونصوص التأكيد.
يجب أن تكون المناطق المباشرة موجودة في DOM قبل أن يتغير المحتوى. غالبًا ما يؤدي إدراج عنصر role="alert" ونصه في نفس الوقت إلى عدم وجود إعلان لأن المنطقة لم تكن موجودة في وقت التغيير. النمط الموثوق به هو عرض منطقة حية فارغة عند تحميل الصفحة وتحديث محتوى النص الخاص بها لاحقًا.
متى لا تستخدم أدوار ARIA
القاعدة الثانية لاستخدام ARIA هي أنه لا ينبغي للمؤلفين تغيير الدلالات الأصلية إلا إذا كانوا في حاجة إلى ذلك. وتنص القاعدة الخامسة على أن كل عنصر تفاعلي، بغض النظر عن وظيفته، يجب أن يكون قابلاً للوصول والتركيز عبر لوحة المفاتيح.
إن إضافة دور لا يؤدي إلى إضافة سلوك. يؤدي role="button" الموجود على <div> إلى فشله في التركيز، وعدم الاستجابة للإدخال أو شريط المسافة، وعدم إرسال النموذج. تحتاج إلى إضافة tabindex = "0"، وهو معالج ضغطات المفاتيح للإدخال والمساحة، وغالبًا ما يكون إدارة الحالة “مناسبة للدور”. في هذه المرحلة، يتطلب استخدام "
الأسئلة الشائعة
ما هي أدوار ARIA بعبارات بسيطة؟
أدوار ARIA هي تسميات ترفقها بعناصر HTML لإخبار التكنولوجيا المساعدة بما يمثله العنصر. يتم الإعلان عن <div role='button'> كزر وليس كنص عام. توفر الأدوار المعنى الذي لا توفره العلامة الأساسية، ولكنها لا تضيف أي سلوك أو معالجة للتركيز أو دعم لوحة المفاتيح بمفردها.
ما الفرق بين أدوار ARIA وسمات ARIA؟
تصف الأدوار نوع العنصر، بينما تصف السمات حالته أو قيمته أو علاقاته. يحدد الدور = 'slider' شريط التمرير؛ تُبلغ aria-valuenow='50' عن موضعها الحالي وتشير aria-labeledby إلى علامتها التجارية. يتم استخدام الأدوار والسمات معًا ويحدد كل دور السمات التي يدعمها.
كم عدد أدوار ARIA الموجودة؟
يحدد WAI-ARIA 1.2 87 دورًا مقسمة إلى ست فئات: الملخص، والقطعة، وبنية المستند، والمعلم، والمنطقة الحية، والنافذة. الأدوار المجردة مثل عنصر واجهة المستخدم والإدخال موجودة فقط للتصنيف الداخلي للمواصفات ولا يجب كتابتها مطلقًا بتنسيق HTML. وينمو العدد مع كل مراجعة للمواصفات.
هل يجب أن أستخدم أدوار ARIA بدلاً من HTML الدلالي؟
لا، القاعدة الأولى لاستخدام ARIA تنص على تفضيل عنصر HTML الأصلي عندما يكون موجودًا بالدلالات والسلوك المطلوب. استخدم <button> بدلاً من <div role='button'>، و<nav> بدلاً من <div role='navigation'>. تعد أدوار ARIA بمثابة بديل للحالات التي لا يوجد فيها عنصر أصلي مناسب.
هل تعمل أدوار ARIA في جميع المتصفحات وبرامج قراءة الشاشة؟
يتم دعم الأدوار الأساسية مثل الزر والارتباط والعنوان والتنقل بشكل موثوق بواسطة المتصفحات الحديثة وبرامج قراءة الشاشة. توفر الأدوار الأحدث أو الأكثر تخصصًا، بما في ذلك تلك الموجودة في وحدة النشر الرقمي، دعمًا أكثر تنوعًا. فقط من خلال الاختبار باستخدام مجموعات المتصفح وقارئ الشاشة المحددة التي يستخدمها جمهورك، يمكنك التأكد.
هل يمكن لإضافة دور ARIA أن يعطل إمكانية الوصول؟
نعم. قد يؤدي تجاوز الدور الضمني إلى فقدان دلالات مفيدة، كما هو الحال عند تطبيق الدور = "العرض التقديمي" على جدول البيانات. يمكن أن يؤدي تطبيق role='application' إلى حظر المستخدمين إذا كانت معالجة لوحة المفاتيح المخصصة غير مكتملة. تؤدي الأدوار المتكررة في العناصر الأصلية إلى حدوث ضوضاء غير ضرورية وتؤدي أحيانًا إلى إعلانات متضاربة.
¿Cumplir WCAG دون الحاجة إلى تشغيل الكود؟
Superposición de IA الذي يعزز إطراء WCAG خلال 48 ساعة