كيف تبدأ اختبار موقع الويب الخاص بك باستخدام قارئ الشاشة

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

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

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

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

صحيح ، أنا أختبر باستخدام أدوات آلية. أتأكد من أن الخطوط واضحة ، وأن تباين الألوان يفي بمعايير WCAG ، وأن الصور تستخدم سمة ALT. هذه كلها اشياء جيدة ومع ذلك ، فهم لا يمثلون التجربة الكاملة لاستخدام موقع الويب.

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

ابحث عن تطبيق قارئ الشاشة

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

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

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

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

التجوال حول

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

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

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

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

تجربتي مع قارئ الشاشة

فقط لتنقية الهواء - لست خبيرًا في استخدام قارئ الشاشة. معرفتي بدائية في أحسن الأحوال. لكن تجربتي مع NVDA كانت مفيدة.

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

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

منزلق يقطع

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

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

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

نص متكرر

يعد استخدام السمة ALT مع الصور نصيحة شائعة حول إمكانية الوصول. ولكن بالنسبة للصور الزخرفية البحتة ، قد يكون تقديم نص وصفي زائدًا عن الحاجة. واجهت هذا في عدة مناسبات مختلفة.

كانت قوائم منشورات المدونة هي الجاني الرئيسي. كان كل من عنوان المنشور وسمات ALT للصورة المميزة متطابقة - مما يعني أن قارئ الشاشة قرأهما مرتين. والنتيجة هي أنه حتى قائمة المنشورات القصيرة نسبيًا تجعل تجربة المستخدم مؤلمة.

النقطة الشائكة هي أن كتلة قوائم منشورات WordPress التي استخدمتها لا تحتوي على خيار لترك سمات ALT فارغة. وبالتالي ، قد تكون هناك حاجة إلى حل بديل.

اكتشف كيف تعمل إمكانية الوصول إلى موقع الويب عمليًا

بناء مواقع الويب التي تلتزم بمعايير WCAG يبدو مرضيًا - وهذا ما يفترض بنا القيام به كمصممي ويب. لكن تحديد المربعات في قائمة المهام لا يخبر القصة كاملة.

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

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

ملاحظة: كما ذكر أعلاه ، أنا مبتدئ عندما يتعلق الأمر بهذه التكنولوجيا. إذا كانت لديك نصائح حول قارئ الشاشة لمشاركتها ، فلا تتردد في التواصل معي عبر Twitter.