كيفية المراجعة للتأكّد من إمكانية الوصول

Rob Dodson

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

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

البدء باستخدام لوحة المفاتيح

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

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

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

  • يجب أن تكون عناصر التحكّم التفاعلية المخصّصة قابلة للتركيز. إذا كنت تستخدم JavaScript لتحويل <div> إلى قائمة منسدلة أنيقة، لن يتم إدراجها تلقائيًا في ترتيب tabulator. لجعل عنصر التحكّم المخصّص قابلاً للتركيز، امنح tabindex="0". تؤدي قيم tabindex التي تزيد عن 0 إلى تغيير ترتيب علامات التبويب، وقد تؤدي إلى إرباك مستخدمي قارئ الشاشة.

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

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

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

إتاحة عنصر التحكّم في التركيز

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

إدارة المحتوى الذي لا يظهر على الشاشة

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

يمكنك الاطّلاع على التعامل مع المحتوى الذي لا يظهر على الشاشة للحصول على نصائح حول كيفية التعامل مع هذه العناصر.

الاختبار باستخدام قارئ شاشة

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

إذا لم تكن على دراية بكيفية تفسير التكنولوجيا المساعِدة لعلامات الترميز الدلالية، يمكنك الاطّلاع على بنية المحتوى.

  • تحقَّق من جميع الصور للتأكّد من أنّ نص alt صحيح. ويُستثنى من هذه الممارسة الحالات التي تكون فيها الصور مخصّصة لأغراض العرض بشكل أساسي وليست عناصر أساسية في المحتوى. للإشارة إلى أنّه على برامج قراءة الشاشة تخطّي صورة، اضبط قيمة على سلسلة فارغة: alt="".
  • التحقّق من جميع عناصر التحكّم في التصنيف بالنسبة إلى عناصر التحكّم المخصّصة، قد يتطلّب ذلك استخدامaria-label أو aria-labelledby. اطّلِع على تصنيفات ARIA وعلاقاتها للحصول على أمثلة.
  • تحقّق من جميع عناصر التحكّم المخصّصة بحثًا عن role مناسب وأيّ سمات ARIA مطلوبة تُوضّح حالتها. على سبيل المثال، يحتاج مربّع الاختيار المخصّص إلى role="checkbox" وaria-checked="true|false" للتعبير بشكل صحيح عن حالته. اطّلِع على مقدّمة عن ARIA للحصول على نظرة عامة عامة حول كيفية تقديم ARIA للدلالات المفقودة عناصر التحكّم المخصّصة.
  • احرص على أن يكون تدفق المعلومات في صفحتك منطقيًا. بما أنّ برامج قراءة الشاشة تنتقل في الصفحة بترتيب DOM، ستعلن عن أي عناصر عدّلت مواضعها مرئيةً باستخدام CSS بترتيب غير منطقي. إذا كنت بحاجة إلى أن يظهر عنصر في وقت أبكر من الصفحة، عليك نقله إلى موضع أبكر في نموذج DOM.
  • احرص على إتاحة إمكانية استخدام قارئ الشاشة للتنقّل في كل المحتوى على الصفحة. تأكَّد مما يلي: عدم إخفاء أي أقسام من الموقع الإلكتروني أو حظرها نهائيًا عن وصول تطبيقات قراءة الشاشة إليها
    • إذا كان يجب إخفاء المحتوى عن قارئ الشاشة، على سبيل المثال، إذا كان خارج الشاشة أو كان مخصّصًا للعرض فقط، اضبط هذا المحتوى على aria-hidden="true". للحصول على شرح أكثر تفصيلاً، يُرجى الاطّلاع على مقالة إخفاء المحتوى.

التعرّف على برامج قراءة الشاشة

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

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

لا يمنع aria-hidden تركيز لوحة المفاتيح.

من المهمّ معرفة أنّ ARIA لا يمكنها التأثير إلا في الدلالات للعنصر، وليس لها أي تأثير في سلوك العنصر. يمكنك جعل عنصرًا مخفيًا عن برامج قراءة الشاشة باستخدام aria-hidden="true"، ولكنّ ذلك لا يؤدي إلى تغيير سلوك التركيز لهذا العنصر. بالنسبة إلى المحتوى التفاعلي الذي يظهر خارج الشاشة، بالنسبة إلى المحتوى التفاعلي الذي يظهر خارج الشاشة، استخدِم السمة inert للتأكّد من إزالته نهائيًا من مسار لوحة المفاتيح. بالنسبة إلى المتصفّحات القديمة، ادمج aria-hidden="true" مع tabindex="-1".

يجب أن تشير العناصر التفاعلية إلى الغرض منها وحالتها.

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

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

الاستفادة من العناوين والمعالم

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

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

  • استخدِم التسلسل الهرمي h1-h6. اعتبِر العناوين أدوات لإنشاء مخطّط تفصيلي لصفحتك. لا تعتمد على التصميم المضمّن للعناوين. بدلاً من ذلك، تعامل مع هذه العناصر كما لو كانت جميعها بالحجم نفسه واستخدِم المستوى المناسب من الناحية الدلالية للمحتوى الأساسي والثانوي والثالثي. بعد ذلك، استخدِم CSS لجعل العناوين تتطابق مع تصميمك.
  • استخدِم عناصر معالم وأدوارًا حتى يتمكّن المستخدمون من تخطّي المحتوى المتكرّر. توفّر العديد من التكنولوجيات المساعِدة اختصارات للانتقال إلى أجزاء معيّنة من الصفحة، مثل تلك التي تحدّدها عناصر <main> أو <nav>. تمتلك هذه العناصر دورًا ضمن المعالم الجغرافية الضمنية. يمكنك أيضًا استخدام سمة ARIA role لتحديد المناطق على الصفحة بوضوح، كما هو الحال في <div role="search">. اطّلِع على الدلالات والتنقّل في المحتوى لمزيد من الأمثلة.
  • تجنَّب استخدام role="application" ما لم تكن لديك خبرة في التعامل معه. يطلب دور المَعلم application من التكنولوجيا المساعِدة إيقاف اختصاراتها ونقل جميع ضغطات المفاتيح إلى الصفحة. وهذا يعني أنّ مفاتيح قارئ الشاشة التي يستخدمها المستخدمون عادةً للتنقّل في الصفحة لم تعُد تعمل،وعليك تنفيذ جميع عمليات معالجة لوحة المفاتيح بنفسك.

مراجعة العناوين والمعالم باستخدام قارئ شاشة

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

لمزيد من المعلومات، يمكنك الاطّلاع على هذه الفيديوهات التعليمية حول أساسيات VoiceOver و NVDA.

التشغيل التلقائي للعملية

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

  • هل تجتاز الصفحة جميع الاختبارات من خلال الإضافات المخصّصة للمتصفّح سواء كانت aXe أو WAVE؟ تتوفّر خيارات أخرى، ولكن يمكن أن تكون هذه الإضافات إضافة مفيدة لأي عملية اختبار يدوي لأنّها يمكن أن ترصد المشاكل الدقيقة، مثل عدم استيفاء نسب التباين وعدم توفّر سمات ARIA.
    • إذا كنت تفضّل العمل على سطر الأوامر، يوفّر axe-cli الميزات نفسها التي يوفّرها ملحق aXe للمتصفّح، ولكن يمكن تشغيله من المحطة الطرفية.
  • لتجنُّب حدوث تراجعات، خاصةً في بيئة الدمج المستمر، يمكنك دمج مكتبة مثل axe-core في مجموعة الاختبار المبرمَج. وaxe-core هو المحرّك نفسه الذي يشغّل إضافة aXe في Chrome، ولكن في أداة سطر أوامر.
  • إذا كنت تستخدم إطار عمل أو مكتبة، هل يوفّران أدوات خاصة بهما لتحسين إمكانية الاستخدام؟ على سبيل المثال، protractor-accessibility-plugin لنظام Angular استفِد من الأدوات المتاحة كلما أمكن.

استخدام Lighthouse لاختبار التطبيقات المتوافقة مع الأجهزة الجوّالة

Lighthouse هي أداة لقياس أداء تطبيق الويب التقدّمي (PWA). ويستخدم مكتبة axe-core لإجراء اختبارات تسهيل الاستخدام.

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

مراجع إضافية