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

Sofia Emelianova

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

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

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

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

للعثور على نص منخفض التباين، اتّبِع الخطوات التالية:

1. افتح "أدوات مطوّري البرامج" على صفحتك.

2. يمكنك إدراج جميع مشاكل التباين باستخدام إحدى اللوحات الثلاث التالية:

   • نظرة عامة حول خدمة CSS
   • (معاينة) المشاكل
   • Lighthouse

يمكنك تجربة ذلك من خلال فتح صفحة CodePen.

مشاكل التباين في لوحة "نظرة عامة حول CSS"

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

1. افتح نظرة عامة حول CSS.
2. التقاط نظرة عامة
3. افتح قسم الألوان، وانتقِل إلى مشاكل التباين، ثم انقر على إحدى المشاكل، إذا وُجدت.

4. في جدول مشاكل التباين، مرِّر مؤشر الماوس فوق أحد العناصر وانقر على الرابط بجانبه.

   

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

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

للحصول على قائمة بالمشاكل، اتّبِع الخطوات التالية:

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

3. وسِّع مشاكل التباين التي عثرت عليها أدوات مطوري البرامج، ثم وسِّع جدول العناصر، وانقر على رابط بجانب العنصر.

   

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

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

لعرض تقرير:

1. في "أدوات مطوّري البرامج"، افتح المزيد من علامات التبويب > Lighthouse.

2. أنشئ تقرير Lighthouse باستخدام الإعدادات التالية:

   • الوضع: التنقّل (تلقائي)
   • الفئات: تسهيل الاستخدام
   • الجهاز: الكمبيوتر المكتبي

   

3. انقر على تحليل وقت تحميل الصفحة وانتظِر إلى أن تنتهي أداة Lighthouse من إنشاء التقرير.

4. انتقِل إلى قسم التباين. من قائمة العناصر، انقر على رابط يؤدي إلى عنصر متأثر.

   

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

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

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

1. ابحث عن مشكلة في التباين وانقر على رابط يؤدي إلى عنصر متأثر في لوحة "نظرة عامة على CSS" أو علامة التبويب المشاكل أو تقرير Lighthouse. ستتم إعادة توجيهك إلى لوحة العناصر في DevTools وسيتم اختيار العنصر المطابق.

   

   على سبيل المثال، في العرض التوضيحي الذي تعذّر الوصول إليه على CodePen، يكون العنصر الأول المتأثر هو h1.line1.

2. انقر على فحص في أعلى يسار "أدوات مطوّري البرامج"، ثم مرِّر مؤشر الماوس فوق العنصر في نافذة العرض. تعرض "أدوات مطوّري البرامج" تلميحًا لهذا العنصر.

   

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

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

   

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

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

   

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

   

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

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

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

• نسخ جميع التغييرات من صفحات CSS دفعة واحدة ولصقها في الرمز
• إعداد مساحة عمل للسماح لأدوات مطوّري البرامج بحفظ الملفات مباشرةً في مصادرك

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

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

• التعرّف على ميزات تسهيل الاستخدام بشكل عام
• تسهيل استخدام الألوان والتباين على وجه الخصوص