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

Rob Dodson

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

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

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

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

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

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

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

  • جعل المحتوى التفاعلي فقط قابلاً للتركيز جارٍ إضافة "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 OS. إذا كنت تستخدم جهاز كمبيوتر، يمكنك مشاهدة هذا فيديو حول NVDA، عبارة عن قارئ شاشة معتمد ومفتوح المصدر لنظام التشغيل Windows

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

من المهم أن تفهم أنّ ARIA لا يمكنه التأثير إلا على دلالات element; وليس له أي تأثير في سلوك العنصر. يمكنك إجراء تم إخفاء عنصر عن برامج قراءة الشاشة باستخدام 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 في Chrome، ولكن في أداة سطر الأوامر.
  • إذا كنت تستخدم إطار عمل أو مكتبة، هل يوفّر التطبيق إمكانية الوصول الخاصة به؟ الأدوات؟ على سبيل المثال، protractor-accessibility-plugin في Angular الاستفادة من الأدوات المتاحة كلما أمكن ذلك.

استخدام Lighthouse لاختبار تطبيقات الويب التقدّمية (PWA)

Lighthouse هي أداة يقيس أداء تطبيق الويب التقدمي (PWA). وتستخدم مكتبة Axe-core لتعزيز اختبارات إمكانية الوصول الخاصة بها.

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

مراجع إضافية