CSS Tutorial

إمكانية الوصول - accessibility

المفاهيم الرئيسية:

  • ترميز HTML الدلالي: استخدام العلامات التي تصف معنى المحتوى بشكل دقيق، مثل <h1> للعناوين و <p> للفقرات.
  • سمات ARIA: يوفر معلومات إضافية عن العناصر التي لا يمكن وصفها من خلال HTML وحده، مثل "aria-label" و "aria-labelledby".
  • تباين الألوان: ضمان وجود فرق كافٍ بين لون النص ولون الخلفية لجعله قابل للقراءة.
  • التنقل عبر لوحة المفاتيح: السماح للمستخدمين بالتفاعل مع الموقع باستخدام لوحة المفاتيح فقط، مثل استخدام مفاتيح الأسهم والعلامات.

مثال بسيط على CSS يُظهر "جعل مواقع الويب قابلة للاستخدام من قِبل الجميع، بمن فيهم الأشخاص ذوي الإعاقة":

body {
  font-size: 16px;
  line-height: 1.5em;
  color: #000;
  background-color: #fff;
}

h1 {
  font-size: 24px;
  margin-bottom: 1em;
}

p {
  margin-bottom: 1em;
}

a {
  color: #00f;
}

دليل جديد باللغة العربية يهدف إلى تحسين إمكانية الوصول وسهولة الاستخدام:

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