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