تحديث تباين لون النص
يجب أن يتمكن الجميع من قراءة نصك
ومن المهم أن يكون النص مرئيًا ومقروءًا. إذا كنت تريد أن يفهمه زوارك، يجب أن يكونوا قادرين على قراءته أولاً.
يضمن التباين الجيد في النص أنه يمكن للجميع رؤية النص على الخلفية التي يظهر عليها.
لا يري الجميع اللون بنفس الدرجة. حددت WCAG (مبادئ النفاذ إلى محتوى الويب) متطلبات معينة خاصة بالتباين في إرشادات مبادئ النفاذ إلى محتوى الويب (WCAG 2.2) المستوى AA للتأكد من أن النص مقروء للجميع. اتبع تلك المتطلبات وأفضل ممارسات التباين لدينا لإصلاح مشكلات التباين أو منعها.
يتبع Ally متطلبات التباين للتحقق من وجود تباين كافٍ بين لون النص ولون الخلفية. يعد تباين النص الرديء مشكلة رئيسية. وتؤثر المشكلات الرئيسية في إمكانية وصول ذوي الاحتياجات الخاصة، وعلى الرغم من أنها ليست خطيرة، فإنها تتطلب الاهتمام.
استخدام Ally للعثور على نص بتباين رديء
استخدم تقرير إمكانية وصول ذوي الاحتياجات الخاصة في Ally لاكتشاف مشكلات إمكانية وصول ذوي الاحتياجات الخاصة على موقعك وإصلاحها. استخدم الرابط المتوفر للتقرير وسجل الدخول. افتح التقرير وانظر إلى قائمة المشكلات في جدول مشكلات إمكانية وصول ذوي الاحتياجات الخاصة.
يوجد جدول "مشكلات إمكانية وصول ذوي الاحتياجات الخاصة" في كل من علامتي التبويب "نظرة عامة" و"المجال". ابدأ في علامة التبويب "Domain" (النطاق) للاطلاع على المشكلات الخاصة بأحد النطاقات.
تعد مشكلة كبيرة أن يكون لديك نص به تباين رديء. استخدم علامة تبويب "Major" (الرئيسية) في جدول "Accessibility Issues" (مشكلات إمكانية وصول ذوي الاحتياجات الخاصة) لعرض قائمة بالمشكلات الرئيسية. حدد المشكلات المتعلقة بمشكلات التباين.
إذا بدأت في علامة التبويب نظرة عامة، فحدد المشكلة ثم المجال الذي يحتوي على المشكلة.
يمكن أن تبدأ مشكلات التباين باستخدام المستند أو HTML في القائمة.
من قائمة مشكلات التباين في المجال، حدد مؤشر الدرجة بجوار عنصر يحتوي على المشكلة. يتم فتح لوحة ملاحظات محرر المحتوى.
معاينة النص بتباين رديء
تعرض لك لوحة ملاحظات Ally معاينة للمحتوى، بالإضافة إلى الملاحظات التفصيلية والدعم لمساعدتك في إصلاح مشكلات إمكانية وصول ذوي الاحتياجات الخاصة لديك. استخدم المعاينة لرؤية النص المحتوي على تباين رديء.
تبرز المعاينة المواضع التي يمكن فيها العثور على مشكلات إمكانية الوصول المحددة في المستند. تعرض مواضع التمييز كل موضع لنوع مشكلة واحد في كل مرة. على سبيل المثال، إذا كان النص لديك يحتوي على تباين رديء، فإن مواضع التمييز تظهر لك كل موضع تحدث فيه هذه المشكلة المحددة.
أدوات المعاينة
استخدم أدوات المعاينة لاستكشاف المشكلات في المستند.
- تنقل عبر المعاينة صفحة تلو الأخرى.
- تعرف على عدد المرات التي تظهر فيها مشكلة محددة.
- تنقل بين مواضع تمييز المشكلة.
- قم بإخفاء أو إظهار المواضع المميزة.
- قم بتكبير محتوى المعاينة أو تصغيره.
- إذا كانت المشكلة في مستند مرفق، فعليك تنزيل الملف الأصلي.
اتباع الخطوات الإرشادية الخاصة بـ Ally لإصلاح التباين الرديء
يفترض Ally أن لديك معرفة أساسية بـ HTML وكيفية استخدام نظام إدارة المحتوى (CMS). لاتباع الخطوات الإرشادية، تحتاج إلى معرفة كيفية تحرير صفحة ويب في HTML أو التعليمة البرمجية المصدر في نظام إدارة المحتوى.
يفترض Ally أيضًا أن لديك إذنًا لتحديث اللون على موقع الويب الخاص بك. غالبًا ما يتم تحديد اللون في دليل نمط الموقع، ويمكن أن يعكس العلامة التجارية. قبل أن تجري أي تغييرات، تحقق من دليل الأنماط الخاص بموقعك.
إلى جانب المعاينة، يمنحك Ally إرشادات تفصيلية حول كيفية إصلاح المشكلة. تقوم Ally بترتيب هذه الملاحظات في شجرة قرارات. لذا فإن كل ما عليك فعله هو قراءة التوجيهات والاستجابة للمطالبات. تعرف على ماهية المشكلة، والسبب وراء أهميتها، وكيفية تصحيحها بشكل مناسب.
حدد كيفية إصلاح التباين لاتباع الخطوات الإرشادية.
طرق إصلاح مشكلات التباين
عند وجود تباين رديء في النص، فهذا يعني أنه لا يوجد تباين لوني كافٍ بين النص والخلفية التي يظهر عليها.
توضح الخطوات الإرشادية لـ Ally كيفية تغيير لون النص. ويمكنك أيضًا تغيير لون الخلفية.
قبل أن تجري أي تغييرات، تحقق من دليل الأنماط الخاص بموقعك. غالبًا ما يرتبط اللون بالعلامة التجارية، ويجب تغييره بحذر.
توضح الخطوات الإرشادية لـ Ally أيضًا كيفية إجراء التحديثات في تعليمة HTML البرمجية المصدر لصفحات الويب الفردية. تتنوع أنظمة إدارة المحتوى. تحتوي بعض أنظمة إدارة المحتوى (CMS) على محرر نص منسق RTE) الذي من شأنه توفير طرق سهلة الاستخدام لضبط نمط النص. باستخدام محررات النص المنسق يمكنك اختيار النمط المعد مسبقًا للعناوين، والألوان، والخطوط، والصور، وما إلى ذلك. ومع ذلك، لا يوفر كل نظام إدارة محتوى محرر نص منسق، ويتطلب إجراء تحريرات في التعليمة البرمجية المصدر باستخدام HTML. في بعض الأحيان، يتوفر كل من HTML ومحرر النص المنسق أيضًا.
بالنسبة لمشكلات التباين المتكررة، قد ترغب في تحديث القالب بدلاً من ذلك. تحتاج تحديثات القالب إلى معرفة معينة بـ HTML وCSS، وقد تعتمد على العلامة التجارية لموقعك.
تفضل بزيارة w3schools لمعرفة المزيد حول HTML وCSS
نظام HEX أو RGB للألوان
يعد نظام HEX ونظام RGB طريقتين مختلفتين يمكن من خلالهما تحديد اللون.
- يحدد نظام RGB اللون حسب القدر المستخدم من اللون الأحمر (R) والأخضر (G) والأزرق (B). على سبيل المثال، يمكن تعريف درجة اللون الأحمر على أنه RGB (253، 2، 2).
- يعد نظام HEX بمثابة تنسيق سداسي عشري يحدد اللون من خلال قيم الأحمر والأخضر والأزرق في مجموعة من ستة أحرف وأرقام. الست عشريات تبدأ بالرقم أو رمز الهاشتاج (#). على سبيل المثال، سيتم تحديد نفس درجة اللون الأحمر على أنها #fd0202.
تعد الطريقة السداسية العشرية الطريقة الأكثر شيوعًا لتحديد الألوان على صفحات الويب.
أفضل ممارسات تباين النص
هناك العديد من التعديلات التي تتطلب مجهودًا أقل يمكنك إجراؤها لتحسين إمكانية قراءة النص.
- استخدم الخطوط ذات التأثيرات العريضة للحروف.
- استخدم حجم الخط الذي يبلغ 12 بكسل على الأقل. إذا كنت تستخدم خطًا بتأثيرات حروف رفيعة، فاستخدم 16 بكسل على الأقل.
- استخدم الخطوط "الرفيعة" فقط على الخلفيات الداكنة.
- استخدم نصًا بلون فاتح في الخلفيات الداكنة.
- استخدم نصًا بلون داكن في الخلفيات الفاتحة.
- تجنب تركيبات هذه الألوان:
- الأخضر والأحمر
- الأخضر والبني
- الأزرق والبنفسجي
- الأخضر والأزرق
- الأخضر الفاتح والأصفر
- الأزرق والرمادي
- الأخضر والرمادي
- الأخضر والأسود
ألست متأكدًا مما إذا كان النص ذا تباين كاف؟ استخدم أداة تحليل تباين الألوان Colour Contrast Analyser من Paciello Group للتحقق من محتواك.
لماذا يعد تباين النص أمرًا مهمًا؟
قد يصعب قراءة النص منخفض التباين في العديد من المواقف.
- عند العرض في الفصل
- للطلاب الذين يعانون من عمى الألوان
- على الهاتف المحمول مع وجود ضوء ساطع أو وهج على الشاشة
- على شاشات العرض منخفضة الجودة
يمكن أن يتسبب التباين المنخفض في إجهاد العين، ويجعل اكتشاف المحتوى وفحصه أمرًا صعبًا، ويسبب الإحباط.
يثمر التباين الجيد عن قدرة الجميع على رؤية النص بوضوح والاستمتاع بتجربة أفضل بشكل عام أثناء قراءة محتواك.
