سهولة الوصول - المبدأ الثاني: قابلية الاستخدام

مرحبًا بكم من جديد. 👋

تحدثت في مقالي السابق حول قابلية التصور، أول مبادئ سهولة الوصول.

واليوم أستكمل حديثي حول ثاني المبادئ، ألا وهو قابلية الاستخدام.

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

ولكن، لنتعرف أولاً على هذا المبدأ المهم، فماذا نعني بقابلية الاستخدام؟

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

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

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

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

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

جاهزون؟ لنبدأ! 😊

أولاً - التحكم بالواجهة من خلال لوحة المفاتيح:

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

يقوم مستخدمو التقنيات المساعدة بالتنقل في الواجهة بعدة طرق من أهمها:

التنقل باستخدام مفاتيح الأسهم:

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

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

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

التنقل باستخدام مفتاح الانتقال “Tab”:

ينقل مفتاح “Tab” المستخدم بين العناصر التفاعلية في الصفحة، كالروابط والأزرار وحقول الإدخال ومربعات الاختيار، وتقوم هذه الطريقة بتخطي كافة المحتويات غير التفاعلية كالنصوص والصور.

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

التنقل باستخدام مفاتيح التنقل السريع:

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

على سبيل المثال: يمكن للمستخدم ضغط زر “b” للتنقل بين الأزرار “Buttons”, والزر “e” للتنقل بين مربعات التحرير “Edit Fields” والزر “r” للتنقل بين أزرار الراديو “Radio Buttons” والزر “c” للتنقل بين صناديق الاختيار “Combo boxes”, إلخ…

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

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

إنشاء العناصر المخصصة:

في حال وجوب إنشاء عناصر مخصصة لأي سبب كان، فيجب أخذ ما يلي في الحسبان:

1. إضافة ما يوضح ماهية العنصر لمستخدمي التقنيات المساعدة، ويمكن القيام بذلك من خلال استخدام خاصية “role” في صفحات الويب.

2. إذا كان العنصر في واجهة الويب تفاعليًّا، فيجب إعلام المتصفح بأنه قادر على الوصول إلى هذا العنصر باستخدام مفتاح “Tab” ويمكن القيام بذلك من خلال إعطاء العنصر خاصية “tabindex”.

ثانيًا - التوقيت:

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

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

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

ثالثًا - الحساسية للحركة:

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

ولمزيد من المعلومات، يمكنكم زيارة صفحة prefers-reduced-motion من موقع Mozilla Developer Network والتي تشرح كيفية معرفة ما إذا كان المستخدم يفضل إيقاف حركة عناصر الواجهة.

رابعًا: آليات التنقل:

تطرقت سابقًا إلى كيفية تنقل مستخدمي التقنيات المساعدة في الواجهات، ويهتم هذا الجزء بمزيد من الأمور التي يجب فعلها لتسهيل ذلك، ومنها:

التخطي السريع للمحتويات المكررة:

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

عناوين الشاشات:

يجب أن يكون لكل شاشة عنوانًا يصف محتواها بدقة.

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

الترتيب المنطقي للعناصر:

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

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

أسماء العناصر التفاعلية:

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

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

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

استخدام رؤوس العناوين لتقسيم الشاشة بذكاء:

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

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

على سبيل المثال: لنفترض أن لدينا موقع متجر ما، سيكون رأس العنوان بالمستوى 1 لشعار الموقع، والمستوى 2 للأقسام الرئيسية المتفرعة منه، وكل قسم فرعي يحمل رأس عنوان بالمستوى 3، إلخ…

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

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

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

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

خاتمة:

كانت هذه أبرز إرشادات قابلية الاستخدام، ثاني مبادئ سهولة الوصول.

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

ويمكنكم زيارة المرجع السريع لمعايير WCAG للاستزادة.

سأكون سعيدًا بتلقي أسئلتكم حول مبادئ سهولة الوصول بكل رحابة صدر.

يمكنكم معرفة المزيد حول المبدأ الثالث (قابلية الفهم) من خلال المقال التالي.

دمتم بحفظ الله ورعايته، والسلام عليكم ورحمة الله وبركاته.