ستساعدك المقالة التالية: Danielle V. Iera ما مدى سهولة الوصول إلى موقع الويب الخاص بك؟ 3 اختبارات إمكانية الوصول إلى موقع الويب لمحاولة قراءة المقال

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

هناك العديد من أنواع الإعاقات المختلفة.

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

كل هذه المجموعات لها احتياجات مختلفة فيما يتعلق بمحتوى الويب ووظائفه. يعود الأمر للمطورين ومالكي مواقع الويب للتأكد من أن مواقع الويب الخاصة بك في متناول أكبر عدد ممكن من الأشخاص – وليس فقط لأنها قانون!

اتخاذ الخطوة الأولى

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

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

• اختبار عمى الألوان
• اختبار لوحة المفاتيح فقط
• اختبار قارئ الشاشة

3 اختبارات بسيطة لإمكانية الوصول إلى موقع الويب

هناك عدة طرق مختلفة لاختبار موقعك للتعرف على مشكلات الوصول. لنلقِ نظرة على ثلاثة اختبارات بسيطة لإمكانية الوصول إلى موقع الويب.

1. اختبار الموقع لعمى الألوان

للحصول على فكرة جيدة عن شكل موقع الويب الخاص بك لمن يعانون من عمى الألوان ، حاول إضافة صفحتك إلى أداة Toptal Colorblind Web Page Filter tool.

يمكنك الاختيار من بين أربعة مرشحات ألوان مختلفة:

• بروتوبيا – عمى اللون الأحمر / الأخضر. المخاريط الحمراء الشاذة
• دوتانوبيا – عمى اللون الأحمر / الأخضر. المخاريط الخضراء الشاذة
• تريتانوبيا – عمى اللون الأزرق / الأصفر. المخاريط الزرقاء الشاذة
• تدرج الرمادي / acromatopsia – فحص سريع لجميع أشكال عمى الألوان

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

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

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

أداة ممتازة أخرى لاختبار مجموعات الألوان المختلفة على الطاير هي محلل تباين الألوان (CCA) من TPGi. يمكنك تنزيله مجانًا على Windows وماك. تتيح لك الأداة العثور بسهولة على نسبة التباين بين لونين باستخدام أداة القطارة. سيقدم أيضًا تقريرًا عن مؤشرات الامتثال وحتى أنه يحتوي على محاكي لعمى الألوان.

2. اختبار موقع الويب للتنقل باستخدام لوحة المفاتيح فقط

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

ابدأ بالنظر في هيكل العنوان. القاعدة الأساسية الجيدة لمواقع الويب التي يمكن الوصول إليها هي أن كل صفحة يجب أن يكون لها عنوان فريد (

) والعناوين التالية (على سبيل المثال

و

وما إلى ذلك).

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

تساعد العناوين في تنظيم محتوى صفحة الويب من خلال تنظيم المعلومات في أقسام مختلفة حسب الرتبة أو المستوى. العنوان الأكثر أهمية ، على سبيل المثال ، له رتبة 1 (

) ، وأقل العناوين أهمية هو 6 (

). إنها تساعد المستخدمين على فحص الصفحة ، والعثور على المعلومات بسرعة ، وهي ضرورية للتقنيات المساعدة للتنقل في صفحة الويب.

اختبار بنية الصفحة باستخدام WAVE

يمكنك التحقق من عناوين صفحات موقع الويب باستخدام أداة تقييم الوصول إلى الويب WAVE والنقر فوق علامة التبويب “الهيكل”. WAVE by WebAim هو اختبار لإمكانية الوصول إلى موقع الويب يوفر ملاحظات مرئية عن طريق إدراج الرموز والمؤشرات مباشرة في صفحة الويب.

لاختبار العناوين ، انقر فوق علامة التبويب “الهيكل”. ستقوم WAVE بإدراج أيقونات بجوار كل عنوان وتزويدك بتعليقات حول إمكانية الوصول إليها. إذا لم يتم وضع علامة على عنوان ، فسيتم تمييزه باللون الأحمر بشكل صحيح ، وسترى رسالة حالة مثل هذه:

يمكنك أيضًا التحقق من محتوى صفحتك باستخدام أداة آلية مثل LERA by AdvancedBytez. تبحث الأدوات الآلية في العوامل المختلفة التي تشكل تصميمًا جيدًا للويب للأشخاص ذوي الاحتياجات الخاصة.

اختصارات لوحة المفاتيح

هناك طريقة أخرى يمكنك من خلالها تجربة ما يشبه استخدام التكنولوجيا المساعدة وهي التنقل عبر موقع الويب الخاص بك ، أو استخدام لوحة المفاتيح في “علامة التبويب” للتنقل عبر عناصر الصفحة.

اختبر كيفية الوصول إلى بنية صفحتك باستخدام “اختصارات لوحة المفاتيح” أو “tabindex” (سمة HTML التي تحدد ترتيب علامة التبويب لعنصر أو عند استخدام زر “علامة التبويب” للتنقل).

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

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

عادةً ما يستخدم مستخدم لوحة المفاتيح مفتاح Tab للتنقل عبر العناصر التفاعلية على صفحة الويب – الروابط والأزرار والحقول لإدخال النص وما إلى ذلك. لوحة المفاتيح.

هل يدعم موقع الويب الخاص بك سمة “tabindex”؟

يمكن استخدام هذه السمة لتعيين الترتيب الذي يتم فيه التركيز على العناصر عند استخدام مفتاح Tab. يجب تعيين قيمة هذه السمة إلى عدد صحيح موجب (1 أعلى من 0) إذا كنت تريد أن يتلقى عنصر التركيز قبل العناصر الأخرى في صفحتك.

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

3. اختبر سمات النص البديل باستخدام التنقل باستخدام لوحة المفاتيح فقط وقارئ الشاشة

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

تحتوي معظم الأجهزة – سواء أكانت سطح المكتب أو الكمبيوتر اللوحي أو الهاتف المحمول – على ميزات إمكانية وصول مضمنة.

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

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

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

يقترح WebAIM استخدام لغة بسيطة عند كتابة علامات بديلة بحيث يسهل فهمها من قبل جميع المستخدمين ، وليس فقط المعاقين. تقترح جامعة هارفارد كذلك أنه لكتابة نص بديل جيد للصور ، يجب عليك:

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

مثال على نص بديل مع سياقات مختلفة

• لا يوجد سياق: شاطئ
• في صفحة عن إجازات الشاطئ: منتجع شاطئي راقي مع ضيف ينزل بالمظلة فوق المحيط
• في صفحة عن قوائم الجرافات: شخص يهبط بالمظلة فوق شاطئ جميل

ختامية الأفكار في اختبارات الوصول إلى موقع الويب

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