تسهيل قراءة موقعك الإلكتروني

Sofia Emelianova
Sofia Emelianova

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

يمكنك استخدام "أدوات مطوّري البرامج" لإجراء ما يلي:

  • اكتشاف مشاكل التباين استخدِم لوحة نظرة عامة على صفحات الأنماط المتتالية (CSS) أو علامة التبويب المشاكل (معاينة) أو تقرير Lighthouse للحصول على قائمة بجميع المشاكل.
  • إصلاح مشاكل التباين: يمكنك عرض المشاكل من خلال نصائح في وضع "المدقق" واختيار الألوان التي تقترحها أداة اختيار الألوان لإصلاح نسبة التباين.
  • محاكاة قصور الرؤية: اطّلِع على موقعك الإلكتروني بالطريقة التي يطّلِع عليها المستخدمون.

اكتشاف النص المنخفض التباين

لاكتشاف النص المنخفض التباين:

  1. افتح "أدوات مطوّري البرامج" على صفحتك. في هذا البرنامج التعليمي، يمكنك استخدام هذه الصفحة التجريبية.
  2. يمكنك الحصول على قائمة بجميع مشاكل التباين باستخدام إحدى اللوحات الثلاث:

مشاكل التباين في لوحة "نظرة عامة على صفحات الأنماط المتتالية"

للحصول على نظرة عامة:

  1. افتح نظرة عامة حول صفحات الأنماط المتتالية (CSS).
  2. التقاط نظرة عامة
  3. افتح قسم الألوان، وانتقِل إلى مشاكل التباين، وانقر على مشكلة، إن توفّرت.
  4. في جدول مشاكل التباين، مرِّر مؤشر الماوس فوق عنصر وانقر على الرابط بجانبه.

    قائمة بمشاكل التباين في "نظرة عامة على CSS"

  5. يمكنك إصلاح المشكلة كما هو موضّح في قسم إصلاح النص المنخفض التباين.

(معاينة) مشاكل التباين في علامة التبويب "المشاكل"

للحصول على قائمة بالمشاكل:

  1. فعِّل الإبلاغ عن مشاكل التباين في علامة التبويب المشاكل:
    1. فتح الإعدادات > الميزات التجريبية
    2. في شريط الفلاتر، ابحث عن contrast issue.
    3. ضَع علامة في المربّع بجانب تفعيل الإبلاغ التلقائي عن مشاكل التباين من خلال لوحة "المشاكل". فعِّل الإبلاغ عن مشاكل التباين.
    4. انقر على إعادة تحميل "أدوات مطوّري البرامج" في الطلب الذي يظهر في أعلى الصفحة.
  2. افتح علامة التبويب "المشاكل".
  3. وسِّع مشاكل التباين التي عثر عليها DevTools، ثم وسِّع جدول العناصر وانقر على رابط بجانب العنصر.

    جدول العناصر التي تتضمّن مشاكل في التباين في علامة التبويب "المشاكل"

  4. يمكنك إصلاح المشكلة كما هو موضّح في قسم إصلاح النص المنخفض التباين.

مشاكل التباين في تقرير Lighthouse

لعرض تقرير:

  1. في "أدوات مطوّري البرامج"، افتح المزيد من علامات التبويب المزيد من علامات التبويب > Lighthouse.
  2. أنشئ تقرير Lighthouse باستخدام الإعدادات التالية:
    • الوضع: التنقّل (تلقائي)
    • الفئات: تسهيل الاستخدام
    • الجهاز: كمبيوتر مكتبي تقرير Lighthouse يتضمّن إعدادات "التنقّل" و"تسهيل الاستخدام" و"سطح المكتب"
  3. انقر على تحليل تحميل الصفحة وانتظِر إلى أن تنشئ أداة Lighthouse التقرير.
  4. انتقِل للأسفل إلى قسم التباين، وفي قائمة العناصر، انقر على رابط يؤدي إلى عنصر متأثر. قسم "التباين" في تقرير Lighthouse مع قائمة بالعناصر التي تتضمّن مشاكل في التباين
  5. يمكنك حلّ المشكلة كما هو موضّح في قسم إصلاح النص المنخفض التباين.

حلّ مشكلة انخفاض تباين النص

لحلّ مشكلة التباين المنخفض، اتّبِع الخطوات التالية:

  1. ابحث عن مشكلة في التباين وانقر على رابط يؤدي إلى عنصر متأثر بها، إما في لوحة نظرة عامة على CSS أو علامة التبويب المشاكل أو تقرير Lighthouse. تنقلك أدوات المطوّرين إلى لوحة العناصر وتختَر العنصر المقابل. عنصر يتضمّن مشكلة في التباين تم اختياره في لوحة "العناصر" على سبيل المثال، في هذه الصفحة التجريبية، يكون أول عنصر متأثر هو h1.line1.
  2. انقر على فحص فحص في أعلى يسار "أدوات مطوّري البرامج" وحرك مؤشر الماوس فوق العنصر في مساحة العرض. تعرِض أدوات المطوّرين تلميحًا توضيحيًا لهذا العنصر.

    يعرض التلميح علامة تحذير بجانب قيمة التباين.

    لاحِظ علامة التحذير تحذير: بجانب قيمة نسبة التباين في التلميح. تقيس نسبة التباين الفرق في السطوع بين ألوان المقدّمة (لون النص) والخلفية.

  3. افتح أداة اختيار الألوان بجانب بيان اللون لنص العنصر، وفي أداة اختيار الألوان، وسِّع قسم نسبة التباين.

    قسم "نسبة التباين" في "أداة اختيار الألوان"

    يُعلمك أداة اختيار الألوان بأنّ نسبة التباين لا تستوفي مستويات AA أو AAA من إرشادات WebAIM.

  4. انقر على الزر استخدِم اللون المقترَح. استخدام اللون المقترَح بجانب مستوى AAA. يطبّق أداة اختيار الألوان لون النص الذي يتوافق مع إرشادات نسبة التباين.

    يتوافق اللون المُطبَّق مع الإرشادات.

  5. بدلاً من ذلك، لاختيار لون يدويًا، يمكنك سحب الدائرة في معاينة التدرجات. للاحتفاظ بمستوى AA أو AAA، اختَر لونًا أسفل السطر العلوي أو السطر السفلي على التوالي.

    اختيار درجة لون أقل من الحدّ الأدنى للبقاء في المستوى AAA

  6. وبالمثل، يمكنك حلّ جميع مشاكل التباين التي رصدتها باستخدام لوحة نظرة عامة على صفحات الأنماط المتتالية (CSS) أو علامة التبويب المشاكل أو تقرير Lighthouse.

حفظ التغييرات

لحفظ التغييرات التي أجريتها في "أدوات مطوّري البرامج في Chrome"، اتّبِع الخطوات التالية:

ما هي الخطوات التالية؟

مزيد من المعلومات: