أنا مستعد تمامًا لإصلاح أي مشكلات تتعلق بإمكانية الوصول تظهر، هل تكتشف هذه المشكلات من خلال تدقيق Lighthouse المدمج في Chrome، أم شيء آخر؟
رائع!
نعم، أنا أستخدم تدقيق Google Lighthouse.
قسّم هذا إلى موضوع منفصل لبحث المشكلات بعمق أكبر. لنبدأ بـ…
قائمة المواضيع
باستثناء التباين، والذي يمكن إصلاحه حاليًا باستخدام CSS… هناك مشكلتان:
- المشكلة الأولى المتعلقة بعناصر القائمة تبدو وكأنها خطأ في أداة التدقيق، أو ربما سمة غريبة في كيفية رؤية الأداة لكيفية عرض صفحتنا؟ هذه العناصر موجودة بالتأكيد ضمن نطاق محدد.

-
المشكلة الثانية هي أن
[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
المواضيع
مشكلة واحدة (بغض النظر عن التباين ومشكلة li غير المذكورة سابقًا)
الروابط لا تحتوي على اسم واضح
نص الرابط (والنص البديل للصور عند استخدامها كروابط) الذي يكون واضحًا وفريدًا وقابلًا للتركيز يحسّن تجربة التنقل لمستخدمي قارئات الشاشة. المزيد من المعلومات.
حالتان:
-
كل منشور يحصل على عنصر
a.tabLocبدون أبعاد. يبدو أن هذه العناصر مخصصة للتنقل بين المنشورات باستخدام لوحة المفاتيح؟ مخفية باستخدامaria-hidden: trueلأنها غير مفيدة لقارئات الشاشة. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub -
أيقونة الظرف المستخدمة للإشارة إلى أن الموضوع رسالة خاصة ترتبط أيضًا بصندوق الرسائل الخاصة الخاص بك، وكنا نقوم بتحميل هذا الرابط لجميع المواضيع… حتى لو لم تكن رسائل خاصة. جعلت هذا الرابط مشروطًا بالرسائل الخاصة، وأضفت أيضًا سمة العنوان وسم
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

