مشاكل تدقيق إمكانية الوصول في Lighthouse

أنا مستعد تمامًا لإصلاح أي مشكلات تتعلق بإمكانية الوصول تظهر، هل تكتشف هذه المشكلات من خلال تدقيق Lighthouse المدمج في Chrome، أم شيء آخر؟

7 إعجابات

رائع!

نعم، أنا أستخدم تدقيق Google Lighthouse.

إعجاب واحد (1)

قسّم هذا إلى موضوع منفصل لبحث المشكلات بعمق أكبر. لنبدأ بـ…

قائمة المواضيع

باستثناء التباين، والذي يمكن إصلاحه حاليًا باستخدام CSS… هناك مشكلتان:

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

    :male_detective: :mag_right:

  1. المشكلة الثانية هي أن [aria-*] attributes do not have valid values (سمات aria-* لا تحتوي على قيم صالحة). يشير هذا تحديدًا إلى قوائم الاختيار المنسدلة للفئات والوسوم… تبدو المشكلة هنا مرتبطة بـ aria-haspopup. وفقًا للمثال هنا ARIA Authoring Practices Guide | APG | WAI | W3C يجب أن يكون لدينا aria-haspopup="true" بدلاً من مجرد aria-haspopup.

    يبدو أننا لم نمرر القيمة “true” كسلسلة نصية، وقد قمت بإصلاح ذلك هنا: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 إعجابات

المواضيع

مشكلة واحدة (بغض النظر عن التباين ومشكلة li غير المذكورة سابقًا)

الروابط لا تحتوي على اسم واضح

نص الرابط (والنص البديل للصور عند استخدامها كروابط) الذي يكون واضحًا وفريدًا وقابلًا للتركيز يحسّن تجربة التنقل لمستخدمي قارئات الشاشة. المزيد من المعلومات.

حالتان:

  1. كل منشور يحصل على عنصر a.tabLoc بدون أبعاد. يبدو أن هذه العناصر مخصصة للتنقل بين المنشورات باستخدام لوحة المفاتيح؟ مخفية باستخدام aria-hidden: true لأنها غير مفيدة لقارئات الشاشة. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. أيقونة الظرف المستخدمة للإشارة إلى أن الموضوع رسالة خاصة ترتبط أيضًا بصندوق الرسائل الخاصة الخاص بك، وكنا نقوم بتحميل هذا الرابط لجميع المواضيع… حتى لو لم تكن رسائل خاصة. جعلت هذا الرابط مشروطًا بالرسائل الخاصة، وأضفت أيضًا سمة العنوان وسم aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub و UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 إعجابات