1. مقدمة
التباين السيء هو المشكلة الأولى في تسهيل الاستخدام على الويب، لنتعرّف على كيفية الاستفادة من أدوات مطوّري البرامج في فهم هذه المشاكل واكتشافها وإصلاحها.
ما ستتعرّف عليه ستتعلّمه
- فهم مشكلة التباين المنخفض
- كيفية اكتشاف النص ذي التباين المنخفض
- كيفية إصلاح النص ذو التباين المنخفض
ما تحتاج إليه
- جهاز كمبيوتر يعمل بشبكة Wi-Fi وخدمة Wi-Fi رائعة
- الإصدار 87 من Chrome والإصدارات الأحدث.
المهام التي ستنفذها
وستعالج المشاكل ذات التباين المنخفض لصفحة الويب.
2. بدء
انقر على الرابط التالي لفتح الصفحة التي تحتوي على نصوص ذات تباين منخفض:
بعد ذلك، افتح أدوات مطوري البرامج في Chrome على الصفحة.
3- فهم مشكلة التباين المنخفض
يعاني شخص واحد من كل 20 شخصًا من عمى رؤية الألوان (وهو ما يُعرف أيضًا باسم"العمى اللوني"و"التقلّب في اللون"). وتجعل هذه المشاكل من الصعب التمييز بين الألوان المختلفة، ما قد يؤدي إلى تضخيم مشاكل التباين.
على سبيل المثال، بصفتك مطوّر برامج لديه رؤية عادية، قد ترى النص على الصفحة يبدو مرئيًا لك.
قد يظل بإمكانك قراءة النص ذي التباين المنخفض في بعض الحالات، ولكن لا يمتلك المستخدمون الذين يعانون من عجز بصري هذا الامتياز.
يمكن أن تساعدك أدوات مطوري البرامج على فهم حالات العجز البصري هذه من خلال محاكاة قصور الرؤية اللونية في تطبيق الويب.
افتح قائمة الأوامر. ابدأ كتابة Rendering واختَر Show Rendering. في علامة التبويب العرض، انتقِل للأسفل إلى خيار محاكاة الانحدارات في الرؤية.
يمكن لمجموعة أدوات مطوري البرامج محاكاة الرؤية المعتمة والأنواع التالية من قصور الرؤية اللونية:
- عمى اللون الأحمر: عدم القدرة على إدراك أي ضوء أحمر.
- عمى اللون الأخضر: عدم القدرة على إدراك أي ضوء أخضر.
- عمى اللون الأزرق: عدم القدرة على إدراك أي ضوء أزرق.
- عمى الألوان: عدم القدرة على إدراك أي لون باستثناء ظلال رمادية (نادرة جدًا).
حاوِل تحديد خيارات مختلفة وتجربة الصفحة بنفسك. على سبيل المثال، جرِّب اختيار عمى اللون. أصبح تباين لون النص أسوأ الآن، إذ إنه غير قابل للقراءة تقريبًا.
4. كيفية اكتشاف النص ذي التباين المنخفض
هناك بعض الطرق لاكتشاف النص ذي التباين المنخفض.
فحص التلميح في الوضع
تعرض تلميح فحص الوضع الذي يظهر في أعلى صفحة الويب نسبة التباين للعناصر النصية.
على سبيل المثال، انقر على رمز الفحص في أعلى يمين صفحة أدوات مطوري البرامج لفحص كلمة "very". يتم عرض نسبة التباين للنص في التلميح. يشير رمز التعجب الظاهر بجوار النسبة إلى نسبة التباين منخفضة.
.
نسبة التباين في منتقي الألوان
بدلاً من ذلك، يمكنك عرض نسبة التباين في منتقي الألوان.
افحص الكلمة "very". في لوحة الأنماط، انقر على معاينة الألوان لخاصية CSS color. يتم عرض نسبة التباين في منتقي الألوان. يشير رمز الحظر الأحمر إلى أن نسبة التباين منخفضة.
.
[ميزة تجريبية] اكتشاف مشاكل التباين المنخفض على مستوى الصفحة في لوحة نظرة عامة على صفحات الأنماط المتتالية (CSS)
إنّ الاطّلاع على نسبة التباين في كل عنصر يُعتبر مملًّا للتحقق من نسبة التباين. يمكن أن تساعدك اللوحة نظرة عامة حول خدمة CSS في اكتشاف جميع النصوص ذات التباين المنخفض في صفحتك.
بعد الحصول على نظرة عامة حول لغة CSS، انتقِل للأسفل إلى قسم الألوان لعرض كل مشاكل التباين. انقر على أحد الألوان، على سبيل المثال، الخلفية الصفراء مع نص الليمون، وستعرض أدوات مطوري البرامج قائمة بالعناصر التي تتضمّن المشكلة. انقر على أحد العناصر في القائمة لفتحه في لوحة العناصر.
5. كيفية إصلاح النص ذو التباين المنخفض
تقدم أدوات مطوري البرامج اقتراحات ألوان للنص المنخفض التباين.
خط التباين المقترح
افحص الكلمة "very". في لوحة الأنماط، انقر على معاينة الألوان لخاصية CSS color. وسِّع القسم نسبة التباين.
تقدّم أدوات مطوري البرامج تقييمًا لنسبة اللون AA وAAA:
- AA: تباين الألوان يستوفي الحد الأدنى للاقتراح
- AAA: تباين الألوان يستوفي الاقتراح المحسَّن.
في المثال، يظهر سطران في المنتقي المرئي أعلى منتقي الألوان. من الجزء العلوي:
- السطر الأول: AA. اختَر أي لون أسفل هذا السطر لتلبية الحد الأدنى للاقتراحات.
- السطر الثاني: AAA. يمكنك اختيار أي لون أسفل هذا السطر لتلبية الاقتراح المحسّن.
انقر على اللون وحلّه يدويًا:
- علامة الاختيار الواحدة تعني أن العنصر يستوفي الحد الأدنى من الاقتراحات.
- تعني علامتا اختيار أنه يستوفي الاقتراح المحسَّن.
.
اقتراحات الألوان القابلة للوصول
تقترح DevTools أيضًا ألوانًا قابلة للوصول لكل من AA وAAA، ما يسهّل عليك النقر عليها وحلّها.
انقر على اللون المقترح بجانب نسبة التباين، وسيتم إصلاح لون النص!
.
يمكنك الآن محاولة إصلاح جميع النصوص ذات التباين المنخفض على الصفحة، وإعادة التقاط نظرة عامة حول CSS لمعرفة ما إذا تم إصلاح جميع مشاكل التباين أم لا.
6- تهانينا.
تهانينا. لقد أكملت هذا الدرس التطبيقي حول الترميز بنجاح.