زر دور ARIA: الدليل الكامل والعملي

زر دور الأغنية هو دور ARIA الذي تسمح به تقنيات المساعدة بالإعلان عن محتوى عام كزر، ولكن لا يوفر سلوكاً تفاعلياً: يمكنك إضافة tabindex = "0"، وإدارة Enter وSpace، وإظهار الحالة من خلال `ضغط aria’ o ""تعطيل الأغنية”.” تحدد مواصفات WAI-ARIA 1.2 هذا الدور داخل فئة عناصر واجهة المستخدم، ويوصي نظام ARIA الأول باستخدام “زر” أصلي دائمًا ما يكون ممكنًا.

يرتبط دور “زر” الأغنية بتصنيف أدوار WAI-ARIA، وهو معيار W3C الذي يصف الدلالة التي يمكن الوصول إليها لواجهات الويب. عند الحصول على عنصر role="button"، يتم عرض شريط الوصول الذي ينشئ قارئي الشاشة (NVDA وJAWS وVoiceOver وNarrator) كقسم أو نطاق عام ويقدم كعنصر تحكم مناسب. الفرق كبير بالنسبة لمن يتنقل مع قارئ الشاشة: بدون الدور، يسمع المستخدم “مجموعة” أو نصًا فقط؛ باستخدام الدور، يسمع “زر” واعلم أنه يمكنك التنشيط.

الارتباك المعتاد هو أن role="button" يحول div إلى زر وظيفي. لا داعي لذلك. الدور الوحيد هو تغيير الدلالة المعلنة؛ السلوك — تلقي التركيز والاستجابة للوحة المفاتيح وإلغاء الإجراء — يبقى مسؤولية المطور. هذا الفصل بين الدلالات والسلوك هو سبب أكبر قدر من الأخطاء التي تأتي على هذا النحو.

تم نشر WAI-ARIA كتوصية لـ W3C والإصدار 1.2 هو المرجع القوي للأدوار والحالات والممتلكات. يعد الدور “الزر” أحد أدوار عناصر واجهة المستخدم الأحدث والأكثر استقرارًا في المواصفات، والمقدم من ARIA 1.0.

متى تستخدم role=“button” ومتى لا تستخدمه

المعيار الأول لـ ARIA، الذي تم العثور عليه في ممارسات تأليف WAI-ARIA (ممارسات تأليف WAI-ARIA)، هو: إذا كان هناك عنصر HTML أصلي مع الدلالة والسلوك الذي يتطلبه الأمر، فهو مستخدم. <button> يقوم بتتبع الدور الضمني، ومركز لوحة المفاتيح، والتنشيط باستخدام Enter وSpace، والحالة المعطلة. قم بإعادة تنفيذ هذا الأمر باستخدام دور الأغنية role="button" وهو عمل إضافي ويؤدي إلى أخطاء.

توجد، بدون حظر، سيناريوهات مشروعة للدور. الأكثر شيوعًا هو أن السوق مشروط بإطار عمل CMS ولا يمكنك تقديم زر "" بدون تخطيط أو جافا سكريبت الموجود. الحالة الأخرى هي المكونات التي يجب استخدامها كزر ولكن من خلال بنية داخلية تتطلب حاوية معينة، مثل العديد من عناصر واجهة المستخدم الثالثة.

ذات صلة:

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

السيناريو الثالث، الأكثر قابلية للنقاش، هو العناصر التي لها دور أصلي مميز وتحتاج إلى عرضها كزر. أتساءل هنا إذا كان التصميم لا يترك معنى ملتبسًا. إذا كان هناك ما يشبه زرًا ولكن في الواقع تنتقل إلى صفحة أخرى، فإن التصحيح هو عبارة عن رابط <a>، وليس زرًا.

الوضع	الحل الموصى به	السبب
العمل على صيغة الواجهة	<زر> أصلي	الدور والتركيز ولوحة المفاتيح متضمنة
تصفح عنوان URL آخر	<a href>	دلالة رابط صحيحة
المحتوى غير قابل للتعديل	role = "button" + لوحة المفاتيح + الحالات	القضية الوحيدة هي فتح الباب
زر التبديل (تشغيل/إيقاف)	<تم الضغط على زر الأغنية>	حالة طبيعية
زر معطل	<الزر معطل>	الحالة والإدارة

كيفية تنفيذ زر بدور = “زر” بشكل صحيح

يتطلب الزر المبني على role = "button" فتح أربع واجهات: التركيز، ولوحة المفاتيح، والحالة، والاسم الذي يمكن الوصول إليه. حذف أي شيء منهم ينتج عنه تحكم “يبدو” أنه يمكن الوصول إليه ولكنه يقع في اختبار حقيقي.

سيتم ضبط التركيز على tabindex = "0"، والذي يقوم بإدراج العنصر في ترتيب الجدول الطبيعي. يستخدم Nunca tabindex بقيم إيجابية: لتغيير ترتيب الجدولة على كل الصفحة وإنشاء ملاحظات لا يمكن التنبؤ بها. القيمة 0 هي الصحيحة للعناصر التفاعلية المخصصة.

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

يتطلب لوحة المفاتيح إدارة المفاتيح: أدخل والمساحة. يستجيب <button> أصلي للرسالة، ولكن لا يمكن فعل div باستخدام زر نغمة منفردة. حتى تتمكن من سماع keydown وتنفيذ الإجراء عندما يكون الجهاز هو Enter أو Space، وتجنب أيضًا فتح الصفحة التي تثير مساحة بسبب الخلل. يتم تمرير هذه التفاصيل من خلال التردد العالي والأزرار التي تعمل فقط مع الفئران.

تم التواصل مع الحالة من خلال سمات ARIA. يستخدم زر التبديل الضغط على الأغنية = "صحيح"" أو ”خطأ"" للإشارة إلى ما إذا كان نشطًا. تم إلغاء تنشيط الزر باستخدام aria-disabled="true"، والذي يعلن عن الحالة ولكن لا يعيق التفاعل إذا كان منفردًا: يمكنه حظر الإجراء في الكود. هناك فرق بين “الأغنية المعطلة” والسمة الأصلية “معطلة” المستوردة، وذلك من أجل الحفاظ على العنصر القابل للتنفيذ والجزء الثاني من ترتيب الجدولة.

يتم إنشاء الاسم الذي يمكن الوصول إليه باستخدام النص المرئي للعنصر أو، إذا لم يكن هناك نص، باستخدام “aria-label” أو “aria-labeledby”. الزر الذي لا يمكن الوصول إليه هو الزر الذي يعلنه قارئ الشاشة على أنه “زر” لمدة ثانية، بدون الضغط على ما يفعله.

<div
  دور = "زر"
  علامة التبويب = "0"
  الضغط على الأغنية = "خطأ"
  معرف = "btn-مودو"
>
  مودو أوسكورو
</div>

<النص البرمجي>
  const btn = document.getElementById('btn-modo');
  تبديل الوظيفة () {
    const activo = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!activo));
  }
  btn.addEventListener('click', toggle);
  btn.addEventListener('keydown', (e) => {
    إذا (e.key === 'أدخل' || e.key === ' ') {
      e.preventDefault();
      تبديل ()؛
    }
  });
</script>

المثال الأمامي للمساحة المكعبة واللوحة والحالة والاسم. هذا هو الحد الأدنى الذي يمكن استخدامه للتحكم فيه باستخدام شاشة العرض ولوحة المفاتيح.

الأخطاء المتكررة والتي يتم اكتشافها

الخطأ الأكثر اتساعًا هو تطبيق role="button" بدون علامة تبويب، حيث يتم إنشاء زر لا يمكن اكتشافه بواسطة لوحة المفاتيح. الأدوات الآلية التي تكتشفها هي “عنصر ذو دور تفاعلي لا يمكن تفعيله”، وهي واحدة من أكثر الانتهاكات التي تم الإبلاغ عنها في جلسات الاستماع التي يمكن الوصول إليها.

الخطأ الثاني هو عدم إدارة اللوحة. هناك div مزود بدور نغمة على الزر و’علامة التبويب’ ولكن بدون مديري لوحة المفاتيح يستقبلون التركيز ولا يستجيبون لـ Enter ni space. مستخدم لوحة المفاتيح ليس جيدًا: يمكنك الضغط على الزر ولكن لا يتم تنشيطه.

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

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

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

لاكتشاف هذه المشكلات، تقوم الأدوات الآلية مثل الفأس أو Lighthouse أو WAVE بإظهار انتهاكات الدور والبؤرة، ولكنها لا توافق على سلوك اللوحة أو منطق الحالة. هذا جزء من دليل الاختبار الدقيق: التنقل باستخدام علامة التبويب، والتنشيط باستخدام مفتاح الإدخال والمساحة، ثم تسجيل خروج قارئ الشاشة. إن الجمع بين أجهزة الاستماع التلقائية والتجربة اليدوية هو الشكل الوحيد الذي يمكن من خلاله التحقق من صحة زر مخصص.

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

كيف نختبر زرًا بدور = “button”

يبدأ الاختبار بلوحة المفاتيح. أعد الصفحة باستخدام علامة التبويب ولاحظ أن الزر الذي يحتوي على زر دور الأغنية سيظهر بؤرة مرئية. Pulsa Enter y Space for Separado: يجب عليك أيضًا إلغاء الإجراء. إذا قمت بفتح الصفحة أثناء تنشيط الزر، فقم بتعطيل preventDefault.

الاختبار الثاني هو قارئ الشاشة. NVDA في Windows، وVoiceOver في macOS، وNarrator في Windows هي المراجع الأكثر استخدامًا. عند الضغط على الزر، سيعلن القارئ عن الدور (“الزر”) والاسم الذي يمكن الوصول إليه والحالة إذا كان موجودًا. إذا أعلنت “المجموعة” أو لم تذكر الحالة، شيء من هذا القبيل.

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

الربع التجريبي متباين وبؤرة مرئية. لا ينبغي حذف مؤشر التركيز باستخدام المخطط التفصيلي: لا يوجد بدون استبدال ببديل مرئي. الزر الذي يتم التركيز عليه لن يظهر بعد لمستخدم لوحة المفاتيح دون الإشارة إليه.

البدائل الحديثة لكل زر

العنصر <button> الأصلي هو الخيار الأفضل في عام 2024 وفي أي مشروع جديد. قم بإظهار الدور والتركيز واللوحة والحالات بدون تعليمات برمجية إضافية، وسيعمل المتصفحون بشكل متسق.

يتم عرض العناصر المخصصة أو مكونات الويب عبر طريق آخر. يمكن للمكون الذي يمتد HTMLELElement أن يغلف سلوك الزر ويوضح الدلالة الصحيحة، ولكنه يتطلب إدارة التركيز واللوحة يدويًا بنفس الطريقة التي تحتوي على role="button". المنتج هو إعادة الاستخدام؛ والعيب هو نفس مسؤولية التنفيذ.

يتم حذف ARIA في HTML (القواعد التي تحدد أدوار ARIA التي تسمح لكل عنصر من عناصر HTML) من كتابة الأدوار الأصلية. تطبيق دور الأغنية role="button" على <button> زائد عن الحاجة؛ يتم تطبيق <a> باستخدام href وهو منتج مضاد. التوصية العامة هي الحفاظ على الدور الخاص بالحاويات دون أي معنى.

الوجبات السريعة الرئيسية

• role = "button" يتغير فقط بالمعنى المعلن؛ البؤرة واللوحة والحالة هي التي يتم تنفيذها يدويًا.
• يوصى باستخدام نظام ARIA الأول باستخدام <button> الأصلي الذي يسمح لك بالبدء فيه.
• يلزم وجود زر مع زر دور الأغنية tabindex = "0"، وطريقة الإدخال والمساحة، وعدد يمكن الوصول إليه وحالة مع ضغط الأغنية أو تعطيل الأغنية.
• تكتشف الأدوات التلقائية خطأ التركيز، ولكن أداء لوحة المفاتيح وحالتها تتطلب اختبارًا يدويًا مع قارئ شاشة.
• يستخدم Nunca tabindex positivo ni apliques role="button" sobre enlaces que navegan.

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

ما هو الفرق بين دور = “زر” وعنصر الزر؟

يتضمن العنصر الأصلي <button> الدور الضمني ومركز لوحة المفاتيح والتنشيط باستخدام Enter وSpace والحالة التي تم إلغاء تأهيلها بدون كود إضافي. السمة role = "button" تؤدي فقط إلى الدلالة المعلنة؛ يجب برمجة بقية السلوك. ولهذا السبب، يوصي نظام ARIA الأول بالعنصر الأصلي الذي يمكن تحقيقه دائمًا.

¿Necesito tabindex con role = “button”؟

نعم. لا يمكن ضبط div أو span مع role="button" بشكل خاطئ، لأنه لا يمكن tabindex="0" أن يوقف ترتيب الجدول ولا يمكن التحكم فيه باستخدام اللوحة. القيمة الصحيحة هي 0؛ تغير القيم الإيجابية ترتيب الجدولة في كل الصفحة ويجب تجنبها.

لماذا يستجيب القسم مع دور = “زر” إلى Enter y Espacio؟

حتى تتمكن من تسجيل الحدث “keydown” وتنفيذ الإجراء عندما يكون المفتاح هو “Enter” أو “Space”. في حالة المساحة، يمكنك الاتصال بـ “preventDefault” لتجنب تغيير الصفحة. ومع ذلك، فإن الزر يتلقى التركيز ولكن لا يتم تنشيطه باستخدام لوحة المفاتيح.

هل يشير هذا إلى أن الزر نشط أم معطل؟

لزر بديل، استخدم الضغط على الأغنية = “صحيح” أو “خطأ” في الحالة. لزر تم تعطيله باستخدام aria-disabled="true"، يُعلن عن الحالة ولكنه لا يحظر التفاعل إذا كان منفردًا: لأنه يمنع الإجراء في الكود. تُفضل السمة الأصلية معطل عند استخدام <button>.

¿هل هو استخدام دور = “زر” بشكل خاطئ عمليًا؟

نعم، عندما تقوم بالتنقل إلى عنوان URL آخر. قم بكتابة دور <a href> باستخدام role="button" للتطرق إلى معنى التنقل والخلط بين قراء الشاشة، حيث يتم الإعلان عن “زر” عندما يتطلع المستخدم إلى فتحه. إذا كان العنصر يتحرك، فيجب الحفاظ على دوره.

ما هي أدوات اكتشاف الأخطاء في دور = “زر”؟

الأدوات الآلية مثل الفأس أو المنارة أو WAVE تؤدي إلى انتهاكات مثل التركيز البؤري الخاطئ على عناصر ذات دور تفاعلي. ومع ذلك، لا يتم التحقق من صحة لوحة المفاتيح أو منطق الحالة، حيث يمكن التحقق من الجمع بين الاستماع التلقائي واختبار دليل استخدام NVDA أو VoiceOver أو الراوي.