الأشخاص المكفوفين أو ضعاف البصر

مقدمة

 

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

يتطلب الوصول إلى منصات تكنولوجيا المعلومات والاتصالات بعض الوعي والجهد من جانب المطور. نوصي باتباع هذا المبدأ التوجيهي والرجوع إلى المعايير العالمية المتعلقة بإمكانية النفاذ إلى محتوى الويب ؛ WCAG 2.1.

 

يفشل أصحاب مواقع الإلكترونية في إتاحة النفاذ إلى المواقع الإلكترونية من خلال وضع حواجز أمام المكفوفين وضعاف البصر.

 

منصات تكنولوجيا المعلومات والاتصالات

مواقع الويب

  • المحمول / الأجهزة والتطبيقات
  • تطبيقات الكمبيوتر
  • التعلم الإلكتروني
  • كشك / صراف آلي
  • التلفاز
  • سينما

أجهزة التكنولوجيا المساعدة (AT) للأشخاص المكفوفين أو ضعاف البصر

  • برنامج قراءة الشاشة
  • جهاز عرض بطريقة برايل
  • لوحة المفاتيح
  • محسن الشاشة ، المكبر / القارئ

الأدوات المجانية المستخدمة للاختبار

 

 

جعل المحتوى في متناول الأشخاص ؛ أعمى أو ضعيف البصر

 

لغة الموقع باللغتين العربية والانجليزية:

 

لغة الصفحة

استخدام مواصفات اللغتين العربية والإنجليزية في الموقع الالكتروني، أمر لابد منه لتمكين سهولة استخدام التكنولوجيا المساعدة (AT) من قبل المستخدمين.

استخدم الكود التالي:

نص عربي <HTML lang = ”ar” xml: lang = ”ar” dir = ”rtl”>

الانجليزية النص؛ <HTML lang = ”en” xml: lang = ”en” dir = ”ltr”>

  • الموقع باللغتين العربية والإنجليزية:

لغة الأجزاء

إذا كان النص مكتوباً باللغة الإنجليزية في الموقع الالكتروني العربي ، فتأكد من استخدام سمة اتجاه اللغة والقراءة لجميع النصوص الإنجليزية ؛

الانجليزية النص؛ lang = “en” xml: lang = “en” dir = “ltr”

إذا كان النص العربي مكتوبًا في موقع الويب باللغة الإنجليزية ، فتأكد من استخدام سمة اتجاه اللغة والقراءة لجميع النصوص العربية ؛

نص عربي lang = ”ar” xml: lang = ”ar” dir = ”rtl”

يمكن تطبيق السمات على ؛ <p> ، <span> ، <div>

عندما يكون هناك تغيير في اللغة ، استخدم سمة اللغة حتى يتمكن مستخدمو التكنولوجيا المساعدة (AT) من التمييز بين النص العربي والنص الإنجليزي. ينطبق هذا بشكل خاص على مستخدمي التكنولوجيا المساعدة الذين يستخدمون تقنية تحويل النص إلى كلام مثل قارئات الشاشة.

مستخدمو لوحة المفاتيح و التكنولوجيا المساعدة

  • تأكد من أن جميع الواجهات المستخدمة للتنقل والإدخال قابلة للاستخدام من خلال لوحة المفاتيح

  • لا تقم بإنشاء مصيدة لوحة مفاتيح للمستخدمين الذين يعتمدون عليها

  • عند التركيز ، تأكد من أن محتوى الموقع الالكتروني و واجهة المستخدم صممت بطريقة يمكن التنبؤ بها من قبل مستخدمي لوحة المفاتيح ومستخدمي التكنولوجيا المساعدة

  • يجب أن تكون جميع الروابط والأزرار وعناصر التحكم في النموذج Tabindex ؛ بحيث يتمكن مستخدمو لوحة المفاتيح على استخدام مفتاح Tab للتنقل عبر الروابط وعناصر التحكم في النموذج.

  • يجب أن يكون التركيز مرئيًا دائمًا

  • يجب أن يكون ترتيب القراءة (التركيز) منطقيًا وفي الترتيب الصحيح وفقًا للترتيب المرئي.

  • التنقل والوظائف
  • طرق التنقل: يمكن أن يساعد توفير طرق متعدده للتنقل في المواقع الأشخاص في العثور على المعلومات بشكل أسرع
  • توفير خريطة الموقع
  • استخدام breadcrumb navigation
  • القائمة الرئيسية: يجب أن تكون القائمة الفرعية قابلة للاستخدام من قبل مستخدمي لوحة المفاتيح. حيث يجب أن تتبع ترتيب القراءة المسار المنطقي
  • استخدام عنوان iframe مع الوصف لتسهيل تحديد الإطار والغرض والتنقل.
  • المحتوى الديناميكي؛ القوائم، صندوق الضوء، الحوار، النماذج
  • تجنب استخدام الفأرة فقط عند معالجة الأحداث.
  • إضافة إخطار أو تعليمات حول محتوى أو حالة العنصر في المحتوى الديناميكي؛ من خلال استخدام alt title attribute ، او من خلال استخدم عبارات مثل مطوي / غير مطوي ، مغلقة / مفتوحة
  • استخدام الارتباطات أو عناصر التحكم في النماذج أو الصور لوضع الإرشادات أو الإشعارات في سمات ALT أو TITLE
  • استخدام محتوى الصفحة الديناميكي دون استخدام تحديث الصفحة؛ قد يتسبب ذلك في مشاكل التركيز التي تؤدي إلى مشكلات في التوجيه لمستخدمي التكنولوجيا المساعدة
  • يجب أن يتدفق ترتيب القراءة منطقيا من المحتوى أو العنصر الذي تم استدعاؤه إلى المحتوى الذي تم إنشاؤه ديناميكيا. يجب أن ينتقل التركيز إلى المحتوى الديناميكي الجديد
  • يجب وضع المحتوى الجديد الذي تم الانتقال إلية على الفور أسفل العنصر المحدد مع الحد الأدنى من التباعد (مسافة واحدة على الأكثر)
  • توفر آلية لتجاوز المحتوى الذي يتكرر على صفحات إلكترونية متعددة من خلال إنشاء ارتباط “تخطي إلى المحتوى”، عند استدعاء الارتباط، يجب أن يكون التركيز على العنوان في المستوى الأول “H1” من محتوى الصفحة
  • توقيت قابل للتعديل: لكل حد زمني يتم تعيينه من قبل المحتوى، يجب أن يكون لدى المستخدم القدرة على؛ إيقاف تشغيل أو ضبط أو تمديد الوقت. هناك استثناءات على وظائف تعتمد على الوقت عبر شبكة الويب مثل; الآوامر التي تتطلب اتخاذ قرار سريع.
  • إيقاف مؤقت أو إيقاف نهائي أو إخفاء: لنقل المعلومات أو التمرير أو التحديث التلقائي؛
  • هناك آلية واضحة لإيقاف المحتوى مؤقتا أو إيقافه نهائيا أو إخفاؤه
  • تحديث المعلومات تلقائيا: التحكم في تكرار التحديث
  • هناك استثناء إذا كان جزءا من نشاط يعد ضروري.
  • تصميم متجاوب؛ ضمان إمكانية النفاذ إلى المحتوى من خلال استخدام مختلف الأجهزة , على سبيل المثال الكمبيوتر و الأجهزة اللوحية والهاتف الذكي
  • تأكد أيضا من أن التخطيط المرئي قابل للاستخدام عبر الشاشة للعديد من أنواع الأجهزة المذكورة أعلاه
  • نص
  • يجب أن يكون الحد الأدنى لحجم النص CSS 95-100 ٪ على الموقع الإلكتروني الإنجليزي، للموقع العربي. 125-140 %
  • استخدام خط Arial أو Verdana
  • استخدام النص العريض (bold) على جميع القوائم
  • تجنب استخدام أنماط مثل; الظل، التخطيط في المنتصف
  • استخدام الأنماط المائله (Italic) مع نص غامق (bold)
  • يجب أن تكون نسبة الحد الأدنى لتباين اللون 4.5:1 وأعلى. يجب تحقيق تباين ألوان مرتفع بين النص والخلفية
  • استخدام عبارات الارتباط الوصفية على روابط النص ، وتجنب استخدام عبارات الارتباط مثل ؛ “انقر هنا” ، “المزيد” ، “اقرأ المزيد” ، وتجنب تكرار عبارات الارتباط المكررة التي ترتبط بعنوان URL مختلف. استخدام عبارات ارتباط يمكن الوصول إليها مثل; “اقرأ المزيد عن مدى”
  • يجب تسطير الارتباطات الموجودة في نص المحتوى في المستند بحيث يمكن تمييزها بسهولة عن النص المقروء فقط. لا تستخدم تسطير فقط لتأثيرات التصميمولابد من مراعاة تسطير الارتباطات مع التركيز عند استخدام لوحة المفاتيح أو الفأرة.
  • بنية المستند وتخطيطه وتصميمه
  • عند تصميم المستند لابد من مراعاة هيكل الوثيقة عند التخطيط والتصميم
  • استخدام عناصر العنوان المتداخلة لهيكل المستند ؛

على النحو التالي : عنوان الصفحة الرئيسي H1 عنوان الموضوع H2 والعناوين الفرعية H3

  • استخدم عنصر فقرة للفقرات الفعلية ، وتجنب الاستخدام المتكرر لعلامات الفاصل <br>
  • استخدام عنصر القائمة ؛ مرتبة أو غير مرتبة لقائمة العناصر
  • وضع تعطيل CSS ، يجب أن تكون جميع صفحات الويب قابلة للاستخدام. تأكد من عرض جميع الصفحات وتعمل بشكل صحيح مع تعطيل CSS.
  • تجنب استخدام عنصر الجدول بهدف تخطيط صفحة الموقع الالكتروني
  • استخدم عنصر CSS و DIV لتخطيط وتصميم الموقع الالكتروني.
  • استخدام منصات CMS يمكن الوصول إليها ؛ نظم إدارة المحتوى على سبيل المثال نظام دروبال ” Drupal”
  • توفير توازن جيد بين العناصر الرسومية والنص.
  • تقليل عدد الألوان والحفاظ على بساطة تصميم الموقع
  • إذا كان ذلك ممكنا ، حاول تصميم الموقع الالكتروني بنظام 3 أعمدة في جميع صفحات الموقع الالكتروني
  • تجنب استخدام الخلفيات المزدحمة ، على سبيل المثال: استخدام صورة مزدحمة كخلفية.
  • الحفاظ على اتساق تصميم الموقع وتخطيطه.
  • حدد بوضوح أقسامًا مختلفة من صفحة الموقع الالكتروني تحتوي على عناوين وقم بتنظيم المحتوى بحيث يكون موجودًا بشكل ثابت في صفحات متكررة.
  • قم بإنشاء تخطيط مرئي بسيط وقابل للاستخدام لجميع محتوى الموقع الالكتروني واستخدم أسلوبًا متسقًا للعرض بين الصفحات.
  • المساحة: قلل المسافة بين المحتوى إلى مسافة 1 أو 2
  • محاذاة: محتوى اللغة الإنجليزية ، اليسار محاذاة كل المحتوى بما في ذلك محاذاة رؤوس الجدول والعناوين في أقسام الصفحة إلى الجانب الأيسر من صفحة الموقع الالكتروني. وبالمثل مراعاة محاذاة المحتوى إلى اليمين باللغة العربية
  • الاتساق: يجب وضع جميع الوظائف والمحتويات المهمة القابلة للاستخدام باستمرار على جميع صفحات الموقع الالكتروني
  • عناوين الصفحة. يجب تسمية جميع عناصر العنوان بشكل فريد لوصف محتوى كل صفحة. استخدم أوصافًا على مستوى الصفحة ، مشابهة لطريقة وصف التنقل عبر مسار التنقل.
  • أمثلة على الممارسات الجيدة ؛
  • <Title> وزارة الصحة العامة ، المنزل </ العنوان>
  • <Title> إدارة الخدمات وزارة الصحة العامة </ العنوان>
  • جداول البيانات. إذا أمكن ، تجنب استخدام الجداول لأغراض التخطيط فقط. يجب استخدام الجداول لتقديم البيانات الجدولية. تأكد من استخدام عناصر بنية الجدول التالية ؛
  • رأس الجدول و عنوان الجدول

الصور والرسومات

  • عند استخدام الصور ، قم بتضمين نص ALT كعنصر نائب لإضافة الوصف:
  • <img src = file.gif Alt = ”description” title = ”ضع العنوان هنا”>
  • لتعزيز قابلية الاستخدام لمستخدمي التكنولوجيا المساعدة ؛ استخدم أيضًا نص ALT لتوفير معلومات وسلوكيات وإشعارات وإرشادات إضافية
  • إذا تم استخدام الصورة كزخرفة ، ولا تحمل أي معنى ، فاستخدم نص ALT مع علامات اقتباس فارغة “”.
  • إذا تم استخدام الصورة كرابط ؛ وصف وجهة الارتباط في ALT
  • إذا تم استخدام صورة النص ؛ اكتب أيضًا النص في ALT

حقول النموذج

  • استخدم عنصر Label لإقران عناصر التحكم في النموذج:
  • الكود: <label for = ”firstname”> الاسم الأول: </label>
  • <input type = ”text” name = ”firstname” id = ”firstname” />
  • هام: يجب أن تكون جميع معرفات التصنيف فريدة ، ولا تتكرر في الصفحة
  • يجب أن تكون الملصقات مرئية وأن توضع فوق عناصر التحكم في النموذج
  • عند استخدام ضوابط نموذج الراديو وخانات الاختيار ؛ استخدام عنصر التسمية مع مجموعة الحقول وعناصر وسيلة الإيضاح
  • يجب أن تكون رسائل التحقق من صحة النموذج قابلة للنفاذ وقابلة للاستخدام ، ويجب تجميع رسائل الخطأ ووضعها فوق حقول النموذج التي تبدأ بالرسالة بالحقل “مطلوب” ؛ انتباه أو خطأ.
  • يجب أن يتبع التركيز أيضًا ويوضع على السطر الأول من الرسائل أو أنشئ رسالة نافذة حوار يمكن الوصول إليها لكل خانة ادة لفشل التحقق من الصحة. من المهم جدًا التحديد الواضح لكل حقل في النموذج الذي فشل في التحقق من صحته. يجب وضع التركيز على رسالة نافذة الحوار ويجب إعادة التركيز إلى عنصر التحكم في النموذج الذي فشل في التحقق من الصحة.
  • تجنب استخدام اللون الأحمر لإيصال رسائل الخطأ
  • أفضل ممارسة لكتابة كلمة خطأ أو انتباه أو حقل مطلوب بنص باللون الأحمر. عند استخدام نص القراءة ، استخدم ظلًا أغمق مع تباين ألوان بنسبة 6: 1 على الأقل.
  • قم دائمًا بتوفير زر لإرسال النماذج كلما تم استخدام عنصر النموذج. كأفضل ممارسة ، تجنب إنشاء حقول الإدخال وحدها. إذا تم استخدام أزرار الصور ، فقم بوصف عملية / إجراء النموذج
  • لفهم النماذج المعقدة ، يعتبر ترتيب القراءة المنطقي لعناصر تحكم النموذج مهمًا جدًا لمستخدمي التكنولوجيا المساعدة. إذا لزم الأمر ، استخدم السمة TABINDEX للتحكم في ترتيب القراءة في حقول النموذج المعقدة. الكود: <نوع الإدخال = ”text” TABINDEX = ”1” الاسم = ”Field1”>
  • إذا تم استخدام رموز CAPTCHA ، فقم بتوفير نسخة بديلة يمكن الوصول إليها من صورة CAPTCHA للنص. يجب أيضًا أن تكون واجهة CAPTCHA قابلة للاستخدام بواسطة لوحة المفاتيح وأجهزة التكنولوجيا المساعدة

مثال على اختبار CAPTCHA يمكن الوصول إليه ؛ استخدم Google re-CAPTCHA: https://www.google.com/recaptcha/intro/index.html

الوسائط المتعددة

  • يجب أن تكون جميع المستندات القابلة للتنزيل قابلة للنفاذ (Word و PDF)
  • إذا تم تضمين الصوت أو استخدامه بأي طريقة لإضافة سياق ؛ لابد من توفير رابطًا منفصلاً لملف نصي يمكن النفاذ إليه ؛ صفحة Word أو PDF أو HTML. التأكد من أن النص يستخدم بنية المستند ؛ العناوين على الأقل
  • إذا تم استخدام مقاطع الفيديو ولم يكن هناك حوار منطوق لابد من مراعاة التالي:
  • تأكد من وجود وصف السرد / الصوت المرئي
  • لا تستبدل وصف السرد / الصوت بالموسيقى فقط
  • تأكد من إمكانية النفاذ إلى واجهة مشغل الفيديو المضمنة عن طريق لوحة المفاتيح و أجهزة التكنولوجيا المساعدة
  • عبر الإنترنت ؛ خرائط Google بطبيعتها مرئية فقط ولا يمكن الوصول إليها من قبل الأشخاص الذين يستخدمون برامج قراءة الشاشة ولوحات المفاتيح. لمعالجة الامر لابد من توفير بديل نص وصفي مكافئ لموقع الخريطة
  • ضع المعلومات المكافئة للنص فوق الخريطة أو الارتباط المضمّن عبر الإنترنت
  • عند تسمية الروابط لخريطة Google ؛ تأكد من تضمين عبارة Google Map في عبارة الارتباط ؛ على سبيل المثال “خريطة جوجل لمركز مدى”
  • إن أمكن ، قدم التوجيهات من النقطة أ إلى ب
  • قم بتضمين قائمة بالعناوين و / أو الأوصاف للمواقع الرئيسية على الخريطة

وصف التقاطعات والمناطق المحيطة ووسائل النقل العام القريبة.