كيفية دمج ميزات تسهيل الاستخدام في عملية فريقك
قد تكون مهمة تسهيل الوصول إلى موقعك الإلكتروني صعبة. إذا كنت تتعامل مع تسهيل الاستخدام لأول مرة، قد يجعلك اتّساع نطاق الموضوع بالكامل تتساءل عن كيفية البدء. بعد كلّ شيء، يعني العمل على استيعاب مجموعة متنوّعة من القدرات أنّ هناك مجموعة متنوّعة من المشاكل التي يجب أخذها في الاعتبار.
يُرجى العِلم أنّ تسهيل الاستخدام هو جهد جماعي. لكل شخص دور يؤديه. توضِّح هذه المقالة معايير لكل من التخصصات الرئيسية (مدير المشروع ومصمّم تجربة المستخدم والمطوّر) حتى يتمكّنوا من دمج أفضل الممارسات المتعلّقة بإمكانية الاستخدام في عمليتهم.
مدير المشروع
إنّ الهدف الأساسي لأي مدير مشروع هو محاولة تضمين ميزة تسهيل الاستخدام في كل مرحلة من مراحل المشروع، مع التأكّد من أنّها تحظى بالأولوية نفسها التي تحظى بها غيرها من المواضيع، مثل الأداء وتجربة المستخدم. في ما يلي بعض عناصر قائمة التحقّق التي يجب وضعها في الاعتبار أثناء تنفيذ العملية.
- وفِّر تدريبًا حول تسهيل الاستخدام للفريق.
- تحديد تجارب المستخدِمين الأساسية في الموقع الإلكتروني أو التطبيق
- حاوِل دمج قائمة التحقّق من تسهيل الاستخدام في عملية العمل الجماعي.
- قيِّم الموقع الإلكتروني أو التطبيق من خلال دراسات المستخدِمين كلّما أمكن ذلك.
تدريب على تسهيل الاستخدام
هناك عدد من المراجع المجانية الرائعة للتعرّف على إمكانية الوصول إلى الويب. يمكن أن يؤدي تخصيص وقت لفريقك لدراسة الموضوع إلى تسهيل تضمين تسهيل الاستخدام في مرحلة مبكرة من العملية.
تشمل بعض المراجع التي تقدّمها Google ما يلي:
Web Accessibility by Google: دورة تدريبية تفاعلية لعدة أسابيع
أساسيات تسهيل الاستخدام: تشمل مراجع مكتوبة عن تسهيل الاستخدام وأفضل الممارسات المتعلّقة به.
إرشادات Material: تسهيل الاستخدام: مجموعة من أفضل ممارسات تجربة المستخدم للتصميم الشامل
تحديد رحلات المستخدِمين الرئيسية
يحتوي كل تطبيق على بعض الإجراءات الأساسية التي يحتاج المستخدم إلى اتّخاذها. على سبيل المثال، إذا كنت بصدد إنشاء تطبيق للتجارة الإلكترونية، يجب أن يتمكّن كل مستخدم من إضافة سلعة إلى سلة التسوّق.
قد تكون بعض الإجراءات ذات أهمية ثانوية، وقد يتم تنفيذها فقط في بعض الأحيان. على سبيل المثال، تغيير صورة الصورة الرمزية هي ميزة رائعة، ولكن قد لا تكون ضرورية في كل تجربة.
سيساعدك تحديد الإجراءات الأساسية والثانوية في تطبيقك على تحديد أولويات العمل على تحسين إمكانية الاستخدام. يمكنك لاحقًا دمج هذه الإجراءات مع قائمة التحقّق من تسهيل الاستخدام لتتبُّع مستوى تقدّمك وتجنُّب التراجع.
دمج قائمة التحقّق من تسهيل الاستخدام
إنّ موضوع تسهيل الاستخدام واسع جدًا، لذا يمكن أن يساعدك الحصول على قائمة تحقّق من المجالات المهمة التي يجب أخذها في الاعتبار على التأكّد من تغطية جميع القواعد.
هناك عدد من قوائم التحقّق المتعلّقة بإمكانية الاستخدام، وتشمل بعض الأمثلة المتعلّقة بالصناعة ما يلي:
قائمة التحقّق من إرشادات أدوات تمكين الوصول إلى محتوى الويب (WCAG) من WebAIM إرشادات سهولة الاستخدام في Vox
باستخدام قائمة التحقّق، يمكنك مراجعة الإجراءات الأساسية والثانوية لبدء تصنيف الأعمال التي لا تزال بحاجة إلى إنجاز. يمكنك اتّخاذ نهج تكتيكي بشأن هذه العملية، وإنشاء مصفوفة من الإجراءات الأساسية والثانوية، وتحديد ما إذا كانت هناك أي ميزات مفقودة لسهولة الاستخدام في كل خطوة من هذه العمليات.
التقييم باستخدام دراسات المستخدمين
لا شيء يضاهي الجلوس مع المستخدمين الفعليين وملاحظتهم أثناء محاولتهم استخدام تطبيقك. إذا كنت بصدد تحسين ميزات تسهيل الاستخدام في تجربة حالية، يمكن أن تساعدك هذه العملية في تحديد الجوانب التي تحتاج إلى تحسين بسرعة. وإذا كنت بصدد بدء مشروع جديد، يمكن أن تساعدك دراسات المستخدمين المبكرة في تجنُّب إضاعة الكثير من الوقت في تطوير ميزة يصعب استخدامها.
احرص على تضمين ملاحظات من أكبر عدد ممكن من المستخدمين. يجب مراعاة المستخدمين الذين ينقرون على العناصر باستخدام لوحة المفاتيح بشكل أساسي، أو يعتمدون على تكنولوجيا assistive مثل برامج قراءة الشاشة أو أدوات تكبير الشاشة.
مصمِّم تجربة المستخدم
لأنّ الأشخاص يميلون إلى التصميم استنادًا إلى انحيازاتهم الخاصة، إذا لم تكن لديك عجز ولم يكن لديك زملاء يعانون من عجز، قد تصمّم بدون قصد لبعض المستخدمين فقط. أثناء العمل، اسأل نفسك: "ما هي جميع أنواع المستخدمين الذين قد يعتمدون على هذا التصميم؟" في ما يلي بعض التقنيات التي يمكنك تجربتها لجعل عملية المراجعة أكثر شمولية.
- يتضمّن المحتوى تباينًا كافيًا للألوان.
- تم تحديد ترتيب علامات التبويب.
- أن تحتوي عناصر التحكّم على تصنيفات يسهل الوصول إليها
- تتوفّر عدة طرق للتفاعل مع واجهة المستخدم.
استخدام ألوان متباينة في المحتوى
يتمثل الهدف الأساسي لمعظم المواقع الإلكترونية في نقل بعض المعلومات إلى المستخدم، إما من خلال نص مكتوب أو صور. ومع ذلك، إذا كان هذا المحتوى منخفض التباين، قد تصعُب قراءة النص على بعض المستخدمين (لا سيما أولئك الذين يعانون من ضعف في البصر). وقد يؤثر ذلك سلبًا في تجربة المستخدم. لحلّ هذه المشكلة، احرص على أن يكون هناك تباين كافٍ للألوان في كل النصوص والصور.
يتم قياس التباين من خلال مقارنة سطوع لونَي العناصر الأمامية والخلفية. بالنسبة إلى النصوص الأصغر حجمًا (أي ما دون 18 نقطة أو 14 نقطة غامقة)، يُنصح باستخدام نسبة تباين لا تقل عن 4.5:1. بالنسبة إلى النص الأكبر حجمًا، يمكن ضبط هذه النسبة على 3:1.
في الصورة أدناه، يستوفي النص على الجانب الأيسر الحد الأدنى من متطلبات التباين، في حين أنّ النص على الجانب الأيمن منخفض التباين.
هناك عدد من الأدوات لقياس تباين الألوان، مثل أداة ألوان Material المتعدّد الأبعاد من Google وتطبيق Lea Verou لقياس نسبة التباين وaXe من Deque.
تحديد ترتيب علامات التبويب
ترتيب التنقل بـ Tab هو الترتيب الذي تتلقّى فيه العناصر التركيز عندما يضغط المستخدم على مفتاح التبويب. بالنسبة إلى المستخدمين الذين ينقرون على العناصر باستخدام لوحة المفاتيح في المقام الأول، يشكّل مفتاح التبويب الوسيلة الأساسية للوصول إلى كل العناصر على الشاشة. يمكنك اعتباره مثل مؤشر الماوس.
من الأفضل أن يتّبع ترتيب علامات التبويب ترتيب القراءة وأن يتدفق من أعلى الصفحة إلى أسفلها، مع ظهور العناصر الأكثر أهمية في أعلى الترتيب. ويؤدي ذلك إلى تحسين كفاءة وصول أي مستخدم يستخدم لوحة مفاتيح إلى هذه العناصر بسرعة.
تم ترقيم الواجهة النموذجية أعلاه لعرض ترتيب علامات التبويب. يمكن أن يساعدك إنشاء نموذج مماثل هذا في تحديد ترتيب علامات التبويب المقصود. ويمكن بعد ذلك مشاركة هذه المعلومات مع المطوّرين وفريق ضمان الجودة للتأكّد من تنفيذها واختبارها بشكلٍ سليم.
أن تحتوي عناصر التحكّم على تصنيفات يسهل الوصول إليها
بالنسبة إلى مستخدمي التكنولوجيا المساعِدة، مثل برامج قراءة الشاشة، توفّر التصنيفات معلومات كانت ستظهر بشكل مرئي فقط. على سبيل المثال، زر البحث الذي يمثّل رمز عدسة مكبرة فقط يمكن أن يتضمّن تصنيفًا سهل الاستخدام مثل "بحث" لمساعدة المستخدمين في الاستفادة من العنصر المرئي غير المتوفّر.
في ما يلي بعض الاقتراحات البسيطة التي يجب اتّباعها عند تصميم تصنيفات يسهل الوصول إليها:
- يجب أن تكون الأوصاف موجزة، إذ قد يكون من الممل الاستماع إلى أوصاف طويلة.
- حاول عدم تضمين نوع عنصر التحكّم أو حالته. إذا تم ترميز عنصر التحكّم بشكل صحيح، سيعلن قارئ الشاشة عن ذلك تلقائيًا.
- التركيز على الأفعال التي تدلّ على إجراء: استخدِم "بحث" وليس "عدسة مكبرة".
يمكنك إنشاء تصميم تجريبي يتضمّن تصنيفًا لجميع عناصر التحكّم. يمكن مشاركة هذا مع فريق التطوير وفريق تأكيد الجودة لتنفيذه واختباره.
طرق متعدّدة للتفاعل مع واجهة المستخدم وفهمها
من السهل افتراض أنّ جميع المستخدمين يتفاعلون مع الصفحة باستخدام الماوس بشكل أساسي. عند التصميم، ضع في اعتبارك كيفية تعامل المستخدم مع عنصر التحكّم باستخدام لوحة المفاتيح بدلاً من ذلك.
التخطيط لحالات التركيز ويعني ذلك تحديد الشكل الذي سيظهر به عنصر التحكّم عندما يركز عليه المستخدم باستخدام مفتاح التبويب أو يضغط على مفاتيح الأسهم. من المفيد التخطيط لهذه الحالات في وقت مبكر بدلاً من محاولة دمجها في التصميم في وقت لاحق.
أخيرًا، يجب التأكّد من توفّر عدة طرق أمام المستخدم لفهم المحتوى في أي نقطة تفاعل. حاول عدم استخدام اللون وحده للتعبير عن المعلومات، لأنّ المستخدم الذي يعاني من عجز في الرؤية الملوّنة قد لا يلاحظ هذه الإشارات الدقيقة. ومن الأمثلة الكلاسيكية على ذلك حقل نص غير صالح. بدلاً من استخدام خط تحتي أحمر للإشارة إلى مشكلة، ننصحك أيضًا بإضافة بعض النصوص المساعدة. وبهذه الطريقة، تتم تغطية المزيد من القواعد وزيادة احتمالية أن يلاحظ أحد المستخدمين المشكلة.
مطور التطبيق
يتمثل دور المطوّر في دمج إدارة التركيز والدلالات لتوفير تجربة مستخدم فعّالة. في ما يلي بعض النقاط التي يمكن للمطوّرين أخذها في الاعتبار أثناء عملهم على موقعهم الإلكتروني أو تطبيقهم:
- ترتيب التبويب منطقي.
- يتمّ إدارة التركيز بشكلٍ صحيح ويكون مرئيًا.
- تتيح العناصر التفاعلية استخدام لوحة المفاتيح.
- يتم تطبيق أدوار ARIA وسمات ARIA حسب الحاجة.
- تم تصنيف العناصر بشكل صحيح.
- يتم إجراء الاختبار آليًا.
ترتيب التنقل بـ Tab منطقي
يتم تفعيل عناصر برمجية أصلية، مثل input وbutton وselect، في ترتيب tabulator مجانًا، ويمكن التركيز عليها تلقائيًا باستخدام لوحة المفاتيح. ولكن لا تتلقّى كل العناصر السلوك نفسه. وعلى وجه الخصوص، لا يتم تفعيل ترتيب علامات التبويب للعناصر العامة، مثل div وspan. وهذا يعني أنّه إذا كنت تستخدم div ل
إنشاء عنصر تحكّم تفاعلي، عليك إجراء عمل إضافي لجعل
العنصر قابلاً للاستخدام من خلال لوحة المفاتيح.
إليك الخياران:
- أدخِل
tabindex="0"لعنصر التحكّم. سيؤدي ذلك على الأقل إلى إمكانية التركيز عليه، ولكن من المحتمل أن تحتاج إلى إجراء عمل إضافي لإضافة إمكانية استخدام ضغطات المفاتيح. - ننصحك باستخدام
buttonبدلاً منdivأوspanلأي عنصر تحكّم يشبه الزر، إن أمكن. من السهل جدًا تصميم عنصرbuttonالأصلي، كما يحصل على دعم لوحة المفاتيح مجانًا.
إدارة التركيز
عند تغيير محتوى الصفحة، من المهم توجيه انتباه المستخدِم من خلال نقل التركيز. من الأمثلة الكلاسيكية على الحالات التي تكون فيها هذه التقنية مفيدة هو عند فتح مربّع حوار مشروط. إذا كان المستخدم يعتمد على لوحة المفاتيح ويضغط على زر لفتح مربّع حوار ولا يتم نقل تركيزه إلى عنصر مربّع الحوار، فإنّه لن يكون لديه سوى الانتقال من خلال علامة التبويب في الموقع الإلكتروني بأكمله إلى أن يعثر في النهاية على عنصر التحكّم الجديد. من خلال تركيز المشاهدين على المحتوى الجديد فور ظهوره، يمكنك تحسين كفاءة تجارب هؤلاء المستخدمين.
إتاحة لوحة المفاتيح للعناصر التفاعلية
إذا كنت بصدد إنشاء عنصر تحكّم مخصّص، مثل لوحة عرض دوّارة أو قائمة منسدلة، عليك تنفيذ بعض الإجراءات الإضافية لإضافة ميزة التوافق مع لوحة المفاتيح. يُعدّ دليل ممارسات إنشاء ARIA مرجعًا مفيدًا يحدّد أنماط واجهة المستخدم المختلفة وأنواع إجراءات لوحة المفاتيح التي يُتوقّع أن توفّرها.
لمزيد من المعلومات حول إضافة إمكانية استخدام لوحة المفاتيح إلى عنصر، اطّلِع على القسم فهرس علامات التبويب المتغير في مستندات "أساسيات تسهيل الاستخدام" من Google.
يتم تطبيق أدوار ARIA وسمات ARIA حسب الحاجة
لا تحتاج عناصر التحكّم المخصّصة إلى توافق مع لوحة المفاتيح فحسب، بل تحتاج أيضًا إلى بنية نحوية مناسبة. بعد كل شيء، div هو من الناحية الدلالية مجرد حاوية grouped
عامة. إذا كنت تستخدم div كأساس لقائمة منسدلة، عليك
الاعتماد على
ARIA
لإضافة دلالات إضافية حتى يمكن نقل نوع عنصر التحكّم إلى
التكنولوجيا المساعِدة. في هذه الحالة أيضًا، يمكن أن يساعدك
دليل ممارسات مؤلفي ARIA
في تحديد الأدوار والحالات والسمات التي يجب استخدامها.
بالإضافة إلى ذلك، تتضمّن العديد من التفسيرات الواردة في دليل ARIA أيضًا
عيّنات من الرموز البرمجية.
عناصر التصنيف
لتصنيف المدخلات الأصلية، يمكنك استخدام العنصر المضمّن
<label>
كما هو موضّح في MDN. لن يساعدك ذلك فقط في إنشاء ميزة اتّساع للاستخدام مرئية على الشاشة، بل سيمنح أيضًا الإدخال اسمًا يسهل الوصول إليه في شجرة تسهيل الاستخدام. بعد ذلك، تلتقط التكنولوجيا المساعِدة (مثل قارئ الشاشة)
هذا الاسم وتُعلِنه للمستخدم.
للأسف، <label> لا تتيح منح اسم يمكن الوصول إليه لعناصر التحكّم
المخصّصة (مثل العناصر التي تم إنشاؤها باستخدام عناصر
مخصّصة
أو من divs وspans بسيطة). بالنسبة إلى هذه الأنواع من عناصر التحكّم، عليك استخدامسمتَي aria-label وaria-labelledby.
الاختبار الآلي
يمكن أن يكون الكسل أمرًا جيدًا، خاصةً عندما يتعلق الأمر بالاختبار. حاول إجراء اختبارات سهولة الاستخدام آليًا كلما أمكن ذلك كي لا تضطر إلى تنفيذ كل الإجراءات يدويًا. هناك عدد من أدوات الاختبار الرائعة في المجال المتاحة حاليًا لسهّل وسرعة التحقّق من المشاكل الشائعة في تسهيل الاستخدام:
توفّر أداة aXe، التي أنشأتها شركة Deque systems، كإضافة Chrome ووحدة Node (مناسبة لتطوير بيئة دمج مستمر). توضّح هذه الحلقة القصيرة من A11ycast بعض الطرق المختلفة لدمج aXe في عملية التطوير.
Lighthouse هو مشروع مفتوح المصدر من Google للتدقيق في أداء تطبيقات الويب التقدّمية. بالإضافة إلى التحقّق مما إذا كان تطبيقك المتوافق مع الأجهزة الجوّالة (PWA) يتيح استخدام ميزات مثل Service worker (عامل الخدمة) وبيان تطبيق الويب (Web App Manifest)، سيُجري Lighthouse أيضًا سلسلة من اختبارات أفضل الممارسات، بما في ذلك اختبارات فحص مشاكل تسهيل الاستخدام.
الخاتمة
إنّ إتاحة الاستخدام هي جهد جماعي. لكل شخص دور يؤديه. يوضّح هذا الدليل بعض العناصر الرئيسية التي يمكن لكل عضو في الفريق استخدامها للتعرّف بسرعة على الموضوع ونأمل أن يؤدي ذلك إلى تحسين التجربة العامة لتطبيقه.
لمزيد من المعلومات حول تسهيل الاستخدام، يُرجى الاطّلاع على دورة Udacity المجانية وتصفُّح مستندات تسهيل الاستخدام المتاحة هنا على web.dev.