كيفية إجراء مراجعة لتسهيل الاستخدام

كيفية مراجعة موقعك الإلكتروني بحثًا عن مشاكل تتعلّق بتسهيل الاستخدام

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

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

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

رمز لوحة المفاتيح

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

النقاط الرئيسية

  • ابدأ باستخدام علامات التبويب في موقعك الإلكتروني. يجب أن يهدف الترتيب الذي يتم التركيز به على العناصر إلى اتباع ترتيب DOM. إذا لم تكن متأكدًا من العناصر التي يجب التركيز عليها، راجِع أساسيات التركيز لتنشيط ذاكرتك. والقاعدة العامة هي أن أي عنصر تحكم يمكن للمستخدم التفاعل معه أو تقديم مدخلات له يجب أن يهدف إلى أن يكون قابلاً للتركيز وأن تعرض مؤشرًا للتركيز (على سبيل المثال، حلقة التركيز). من الشائع إيقاف أنماط التركيز بدون توفير بديل باستخدام outline: none في CSS، إلا أنّ هذا الأسلوب هو معقّد. وإذا لم يتمكن مستخدم لوحة المفاتيح من رؤية ما يتم التركيز عليه، فلن يكون لديه أي طريقة للتفاعل مع الصفحة. إذا كنت بحاجة إلى التفريق بين تركيز الماوس ولوحة المفاتيح للنمط، ننصحك بإضافة مكتبة مثل what-input.

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

  • تجنَّب استخدام عناصر التحكّم باستخدام tabindex > 0. ستتفوق عناصر التحكم هذه على أي شيء آخر بترتيب مفتاح التبويب (Tab)، بغض النظر عن موضعها في نموذج العناصر في المستند (DOM). قد يكون هذا مربكًا لمستخدمي برامج قراءة الشاشة لأنهم يميلون إلى التنقل في نموذج العناصر في المستند بطريقة خطية.

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

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

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

كون الشيء قابلاً للتركيز لا يعني أنه قابل للاستخدام

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

تذكُّر المحتوى خارج الشاشة

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

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

رمز ملاحظات المحاضر

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

النقاط الرئيسية

  • تأكَّد من توفّر نص alt مناسب في جميع الصور. يُستثنى من هذه الممارسة عندما تكون الصور لأغراض العرض بشكل أساسي وليست أجزاءً أساسية من المحتوى. للإشارة إلى أنّ قارئ الشاشة يجب أن يتخطّى الصورة، اضبط قيمة السمة 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"، إلا أنّ ذلك لن يؤدي إلى تغيير سلوك التركيز لهذا العنصر. بالنسبة إلى المحتوى التفاعلي خارج الشاشة، عليك غالبًا الجمع بين aria-hidden="true" وtabindex="-1" للتأكّد من إزالته بشكل صحيح من لوحة المفاتيح. تهدف سمة inert المقترَحة إلى تسهيل ذلك من خلال الجمع بين سلوك السمتَين.

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

النقاط الرئيسية

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

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

استغلال العناوين والمعالم

map icon

تضفي العناوين وعناصر المعالم على صفحتك بنية دلالية، وتؤدي إلى زيادة كبيرة في كفاءة التنقل لمستخدمي التكنولوجيا المساعِدة. أبلغ العديد من مستخدمي برامج قراءة الشاشة أنّهم يحاولون عادةً التنقل عبر العناوين عندما يصلون إلى صفحة غير مألوفة لأول مرة. وبالمثل، توفر برامج قراءة الشاشة أيضًا إمكانية الانتقال إلى المعالم المهمة مثل <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-extension لنظام Angular وa11ysuite للبوليمر ومكوّنات الويب. استفد من الأدوات المتاحة كلما أمكن ذلك لتجنب إعادة ابتكار العجلة.

في حال إنشاء تطبيق ويب تقدّمي، يمكنك تجربة أداة Lighthouse

شعار Lighthouse

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

تقديم تقرير ملخّص

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

مراجع إضافية