تأكَّد من أنّ جميع عناصر التحكّم المخصّصة تحتوي على role مناسب و
أيّ سمات ARIA مطلوبة تمنح عناصر التحكّم خصائصها وحالتها.
على سبيل المثال، يحتاج مربّع الاختيار المخصّص إلى role="checkbox" و
aria-checked="true|false" للتعبير عن حالته بشكل صحيح.
تعرَّف على كيفية استخدام ARIA وHTML لفهم الحالات التي يكون فيها من الأفضل تقديم الدلالات المفقودة لعناصر التحكّم المخصّصة.
كيفية الاختبار
للتحقّق من أنّ جميع عناصر التحكّم التفاعلية المخصّصة لها أدوار ARIA مناسبة، اختبِر الصفحة باستخدام لوحة تسهيل الاستخدام في "أدوات مطوّري البرامج في Chrome" أو قارئ شاشة.
JAWS و NVDA هما من بين برامج قراءة الشاشة الأكثر رواجًا لنظام التشغيل Windows. VoiceOver هو قارئ الشاشة المضمّن في نظام التشغيل macOS.
باستخدام CSS، يمكنك تصميم عناصر <div> و<button> لتعكس السمات المرئية نفسها، إلا أنّ تجربة استخدام قارئ الشاشة تكون مختلفة جدًا. <div> هو مجرد عنصر تجميع عام، لذا يُعلِن قارئ الشاشة عن محتوى النص في <div> فقط.
يتم الإعلان عن الرمز <button> على أنّه "زر"، ما يرسل إشارة أقوى إلى المستخدم بأنّه عنصر يمكنه التفاعل معه.
راجِع أيضًا الدلالات وبرامج قراءة الشاشة.
كيفية حلّ المشكلة
أفضل حل لهذه المشكلة هو تجنب عناصر التحكم التفاعلية المخصصة معًا. على سبيل المثال، استبدِل <div> الذي يعمل كزر
برمز <button> حقيقي.
<button>Learn more</button>
إذا كان عليك استخدام <div>، أضِف role="button" وaria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
يُعلن قارئ الشاشة الآن عن دور <div> وحالته التفاعلية.
أهمية ذلك
إذا لم تكن قد استخدمت التكنولوجيا المساعدة من قبل، فقد لا تعرف أداء المحتوى الخاص بك لمستخدمي التكنولوجيا المساعدة. من الأفضل التحدّث إلى المستخدمين الذين يستخدمون التكنولوجيا المساعدة بانتظام ويمكنهم مشاركة ملاحظاتهم حول أداء موقعك الإلكتروني أو تطبيق الويب.
هناك طريقة أخرى لفهم تجربة مستخدمي التكنولوجيا المساعِدة مع المحتوى الخاص بك، وهي الاختبار باستخدام التكنولوجيا المساعِدة. يساعدك استخدام قارئ الشاشة في فهم كيفية تصنيف المحتوى وما إذا كانت هناك أي عقبات تحول دون التنقّل.
الموارد
يمكنك الاطّلاع على رمز المصدر لمراجعة تتضمّن عناصر التحكّم المخصّصة أدوار ARIA.