التعامل مع الخلفيات (Backgrounds) والحدود (Borders)

في تصميم الويب (web design)، تلعب الخلفيات (backgrounds) دوراً حيوياً في تحديد المظهر والطابع العام لصفحة الويب.

ومع ذلك، عند التصميم باستخدام الخلفيات (designing with backgrounds)، من الضروري مراعاة إمكانية الوصول (accessibility) لضمان أن يكون المحتوى قابلاً للاستخدام والقراءة من قِبَل جميع المستخدمين، بما في ذلك ذوي الإعاقات البصرية.

تتمثل إحدى الاعتبارات الرئيسية المتعلقة بإمكانية الوصول فيما يخص الخلفيات في ضمان وجود تباين كافٍ (sufficient contrast) بين الخلفية والنص (background and the text).

في غياب التباين الكافي، قد يواجه المستخدمون ذوو الإعاقات البصرية - بما في ذلك من يعانون من ضعف البصر أو عمى الألوان - صعوبةً في قراءة المحتوى الموجود على صفحتك.

يشير التباين إلى الفرق في درجات الفتح (lightness) أو القتامة (darkness) بين لونين. ويُعد وجود تباين كافٍ (Sufficient contrast) بين لون الخلفية ولون النص (background color and the text color) أمراً ضرورياً لضمان سهولة القراءة (readability).

توصي إرشادات إتاحة محتوى الويب (Web Content Accessibility Guidelines - WCAG) بحد أدنى لنسبة التباين يبلغ 4.5:1 للنصوص العادية، و 3:1 للنصوص الكبيرة.

على سبيل المثال، فإن وضع نص أبيض (white text) على خلفية رمادية فاتحة (light-gray background) سيؤدي إلى تباين ضعيف (poor contrast)، مما يجعل قراءة النص صعبة. في المقابل، يوفر النص الأبيض (white text) على خلفية زرقاء داكنة (dark-blue background) تبايناً جيداً (good contrast)، مما يعزز سهولة القراءة لجميع المستخدمين.

إليك مثال على ضعف التباين (poor contrast) :

<p style="color: lightgray; background-color: whitesmoke;">
 هذا مثال على تباين ضعيف.
</p>
    

معاينة:

إليك الآن مثال على التباين الجيد (good contrast) :

<p style="color: white; background-color: darkslategray;">
 هذا مثال على تباين جيد.
</p>
    

معاينة:

ثمة اعتبار آخر يتمثل في تجنب وضع النصوص فوق خلفيات مزدحمة أو معقدة، مثل الصور أو التدرجات اللونية متعددة الألوان؛ إذ قد تجعل هذه الخلفيات من الصعب تمييز النص عن الخلفية، بغض النظر عن مستوى التباين.

عند تصميم الخلفيات، تجنَّب استخدام اللون كوسيلة وحيدة لنقل المعلومات؛ فعلى سبيل المثال، قد يواجه المستخدمون المصابون بعمى الألوان صعوبةً إذا اعتمدتَ على اللون وحده للإشارة إلى رسالة خطأ أو نجاح (مثل استخدام اللون الأحمر للخطأ أو الأخضر للنجاح).

بالإضافة إلى اللون، ينبغي عليك استخدام الرموز أو النصوص لنقل المعلومات؛ فعلى سبيل المثال، يمكنك استخدام أيقونة أو نص عريض إلى جانب رسالة خطأ حمراء لتوضيح وجود خطأ ما.

على الرغم من أنها أقل شيوعاً، إلا أن الصوت أو مقاطع الفيديو في الخلفية يمكن أن تؤثر أيضاً على إمكانية الوصول.

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

من خلال مراعاة اعتبارات إمكانية الوصول هذه، يمكنك إنشاء تصاميم أكثر شمولاً تضمن أن يكون محتواك قابلاً للقراءة والاستخدام من قِبَل جميع المستخدمين، بغض النظر عن قدراتهم.