ما هو معاينة نص قارئ الشاشة؟

معاينة نص قارئ الشاشة تعرض كيف تقرأ التقنيات المساعدة محتوى HTML الخاص بك. تُظهر الاسم المُتاح والدور وترتيب القراءة لكل عنصر، حتى تكتشف التسميات المفقودة وبنية العناوين المكسورة ومشكلات ARIA قبل أن يصادفها المستخدمون الفعليون.

تحلّل الأداة الـHTML بالطريقة نفسها التي يبني بها قارئ الشاشة شجرة الوصول: تتخلّى عن التخطيط البصري، تفكّ aria-label وaria-labelledby، تلتقط نصّ alt الخاص بالصور، وتسطّح النتيجة في تسلسل قراءة خطّي. لوحة المشكلات تُؤشّر روابط بلا اسم متاح، وقفزات في مستوى العناوين، وصوراً بلا alt، وعناصر نماذج بلا تسميات.

كيفية الاستخدام

1. الصق محتوى HTML أو أدخل عنوان URL لتحليله.
2. راجع ترتيب القراءة الخطي وشجرة إمكانية الوصول للعناصر.
3. أصلح المشكلات المُعلّمة وأعد الاختبار حتى يصبح تدفق القراءة واضحًا.

متى تستخدم

• قبل إطلاق صفحة هبوط ستمرّ بتدقيق WCAG AA.
• تشخيص سبب شكوى مستخدم NVDA أو VoiceOver من قائمة تنقّل مربكة.
• مراجعة HTML ودجت طرف ثالث بعد تحديثه للتأكّد من عدم كسر الوصول.

النتيجة

يلصق مطوّر قائمة تنقل. تكشف الأداة أن 3 روابط ليس لها اسم مُتاح وأن ترتيب العناوين يقفز من h1 إلى h4، مما يسبب ارتباكًا لمستخدمي قارئات الشاشة.

الأسئلة الشائعة

هل تغني هذه الأداة عن اختبار حقيقي بقارئ شاشة؟

لا. لكلٍّ من NVDA و JAWS و VoiceOver خصوصياته في طريقة قراءة مناطق live وعناوين الجداول والمحتوى الديناميكي. استخدم الأداة لاصطياد الأخطاء الواضحة (تسميات ناقصة، ترتيب عناوين مكسور) قبل قضاء وقت داخل قارئ شاشة حقيقي.

لماذا تُؤشَّر أيقونتي الزخرفية كمشكلة؟

يقرأ قارئ الشاشة كل وسم img افتراضياً. إن كانت الأيقونة زخرفية بحتة، اجعل alt فارغاً وأضف aria-hidden="true"، فتتجاوزها الأداة في ترتيب القراءة. لا تستخدم alt="أيقونة" أو alt="زخرفة"، فذلك أسوأ من تركها بلا alt.

ما الترتيب الصحيح للعناوين؟

h1 واحد فقط في الصفحة، ومحظور القفز نزولاً (لا تتبَع h2 بـ h4). الصعود مسموح. مستخدمو قارئ الشاشة يتنقّلون بالقفز بين العناوين، فهرمية مكسورة تجعل الصفحة كالمتاهة.

هل يحتاج كل عنصر تفاعلي إلى aria-label؟

لا. زرّ بنصّ مرئي لا يحتاج aria-label، النصّ المرئي يصبح اسماً متاحاً تلقائياً. أضِف aria-label فقط حين لا يوجد نصّ مرئي (أزرار أيقونات) أو حين يكون النصّ غير وصفيّ (صفّ من روابط "اقرأ المزيد").

هل يمكن لصق صفحة كاملة؟

نعم، الصق مصدر HTML الكامل. تتجاهل الأداة سكربتات وstyles وmeta وتركّز على body المستند. مع الصفحات الضخمة الأفضل فحص قسم تلو الآخر حتى تبقى قائمة المشكلات مقروءة.

أدوات ذات صلة