قراءة شجرة إمكانية الوصول لتصحيح ARIA

ينشئ المتصفح شجرة إمكانية الوصول من DOM الخاص بكم. وهي النسخة المختصرة التي تقرؤها قارئات الشاشة فعليًا.

يكشف فحص الشجرة الحقيقة: الاسم والدور والحالة الفعلية للعنصر، لا ما كنتم تأملون أن تنتجه علاماتكم.

في Chrome، افتحوا DevTools واختاروا لوحة Accessibility ضمن لوحة Elements. ثم حددوا أي عقدة لفحص بيانات a11y المحسوبة.

تعرض اللوحة الدور والاسم المحسوبين للعنصر، إلى جانب حالاته. وهذا هو بالضبط ما ستعلنه التقنيات المساعدة.

تأتي Firefox مع Accessibility inspector في علامة تبويب مستقلة ضمن DevTools، وبها فحص مفيد لمشكلات التباين والتسمية الشائعة.

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

إذا كنتم تتوقعون زرًا لكن الشجرة تقول generic، فهذا يعني أن دوركم لم يُطبّق. أصلحوا العلامات قبل إضافة المزيد من ARIA فوقها.

بدّلوا حالة أداتكم وراقبوا الشجرة. إذا لم تتغير aria-expanded في اللوحة، فإن JavaScript لا يزامن الحالة.

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

توضح الشجرة القصد، لكن قارئ الشاشة الحقيقي يوضح التجربة. استخدموا الشجرة لتصحيح الأخطاء، ثم أكدوا النتيجة باستخدام NVDA أو VoiceOver.

كوّنوا هذه العادة: غيّروا العلامات، ثم أعيدوا تحديد العقدة، واقرؤوا اسمها ودورها وحالتها. تكشف الحلقات السريعة أخطاء ARIA بسرعة.

تعلمتم أن شجرة إمكانية الوصول هي ما تقرؤه AT فعليًا. افحصوها في DevTools للتحقق من الأسماء والأدوار والحالات، ثم أكدوا ذلك باستخدام قارئ شاشة حقيقي. 🔍