كيف تجعل موقع الويب الخاص بك متاحا لذوي المشاكل البصرية

إن عملية تطور الإنترنت وازدهاره المستمر قد أحدث ثورة في عالم الاتصالات وتبادل المعلومات، لكن ماذا عن الأشخاص الذين يواجهون صعوبة في الاستفادة من هذه التكنولوجيا الحديثة؟ هل فكرت يومًا في كيفية جعل موقع الويب الخاص بك يكون متاحًا للمكفوفين وضعاف البصر؟

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

العوامل التي يجب توافرها في موقعك

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

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

أفضل الممارسات لإتاحة إمكانية الوصول لذوي المشاكل البصرية

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

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

توفير ما يكفي من تباين الألوان

يُعَد توفر تباين كافٍ في الألوان أمرًا حاسمًا في تصميم المواقع، لذلك استخدم التباين العالي بين لون الخلفية والنص، فهو أمر هام خاصةً للمستخدمين الذين يعانون من عمى الألوان. وكحد أدنى، يجب أن تفي في التصميم بمتطلبات WCAG 2.0، والتي تتطلب نسبة تباين 4.5: 1 للنص العادي و 3.1: 1 للنص الكبير، كما يُعد النص الكبير خطًا من 14 أو 18 نقطة أو نصًا غامقًا.

ويمكنك استخدام أداة مثل Colorzilla للتحقق من قيمة أي عنصر، كما يمكنك أيضًا استخدام أدوات التحقق من تباين الألوان المتوفرة التي تتحقق من مدى التوافق مع هذا المعيار.

ونظرًا لأن العديد من المستخدمين الذين يعانون من ضعف البصر يميزون النص من خلال تحديده بالفأرة كخدعة لزيادة التباين، فتجنب استخدام تقنيات JavaScript أو CSS التي تمنع المستخدمين من تحديد النص بواسطة الفأرة.

وكنصيحة أخيرة، لا تستخدم أنماط خلفية مزدحمة أو عليها علامات مائية قد يصعب قراءتها أو تشتت انتباه بعض المستخدمين.

الحد من اللون وعدم الاعتماد عليه

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

تجنب النص فوق صور الخلفية

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

تمكين ضبط حجم الخط يدويا

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

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

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

إعطاء الأولوية للمعلومات المهمة

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

فسواءً كان المحتوى مقالة لمدوَّنة أو صفحة لمُنتَج، فقط تأكد من وصف المحتوى بإيجاز وتضمين المعلومات الأكثر أهمية في البداية.

اجعل موقع الويب الخاص بك قابلا للوصول من خلال لوحة المفاتيح فقط

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

الحد من عدد الروابط

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

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

إضافة نصا للروابط ذي صلة

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

تقديم محتوى بديل

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

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

استخدام نص بديل فارغ

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

تنظيم المحتوى باستخدام عنوان وصفي وعناوين فرعية

عند تنظيم المحتوى يجب أخذ العنوان الوصفي والعناوين الفرعية بعين الاعتبار، وذلك لأن برامج قراءة الشاشة أول ما تقرأه عندما يصل المستخدمون إلى الصفحة هو العنوان الوصفي، ومن ثَمَّ يكون لدى المستخدمين خيار الانتقال من عنوان إلى آخر؛ لذا يُنصح بجعل العنوان وصفيًا قدر الإمكان، بالإضافة إلى تضمين جدول مع عناصر <th> في الأعلى لمساعدة المستخدمين في تحديد العناوين.

علاوةً على ذلك، ينبغي استخدام الأنماط الصحيحة للتنسيق باستخدام CSS وتحديد الهيكل باستخدام HTML، كما يُفضل استخدام العنصر <p> للفقرات، والعنصر <h1>، و<h2> للعناوين، والعنصر <ul>، و<ol>، و<li> للقوائم، فتلك الممارسات تساعد قُراء الشاشة في فهم هيكل المحتوى الخاص بك ونقله بكفاءة.

تقليل عدد الإعلانات

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

إضافة معلومات اللغة

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

بإضافة معلومات اللغة، ستُعَزَّز إمكانية الوصول إلى المحتوى وتُحَسَّن تجربة المستخدم للأشخاص ذوي المشاكل البصرية، خاصةً الذين يعتمدون على تقنيات المساعدة للوصول إلى المحتوى عبر الويب.

استخدام الأدوات الصحيحة

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

يوفر موقع Color Safe اقتراحات لألوان متوافقة مع معايير الوصول، مع التركيز على معايير AA و AAA، مما يُمَكِّن مصممي الويب من تحديد مجموعات الألوان المناسبة بناءً على العناصر الموجودة في موقع الويب.
يساعد محلل تباين الألوان في اكتشاف النصوص غير المتوافقة من حيث تباين الألوان، حيث يمكن للمطورين استخدام هذه الأداة للتحقق من تباين الألوان بين النصوص والخلفيات وضمان قراءتها بسهولة من قِبَل الأشخاص ذوي المشاكل البصرية.
يساعد NVDA المصممين على الحصول على نظرة شاملة حول تجربة مستخدم ضعيف البصر على موقع الويب، فهذه الأداة تساعد في التأكد من أن النصوص والعناصر المرئية يمكن الوصول إليها بطريقة صحيحة ومناسبة.
يُجري WebAIM’s Wave تحليل لموقع الويب ويكشف الأخطاء المحتملة في إمكانية الوصول، بحيث يمكن للمطورين استخدام هذه الأداة للتحقق من وجود أي تحديات تواجه المستخدمين ذوي الاحتياجات الخاصة وتصحيحها بطريقة فعالة.

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

خاتمة

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

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

ترجمة -بتصرف- للمقال Building a User-Friendly Website for the Visually Impaired.