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