تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

أدوات تسهيل الاستخدام لمطوّري البرامج على الويب

يؤدي تحسين سهولة الاستخدام إلى تسهيل استخدام موقعك الإلكتروني للجميع.

Addy Osmani

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

يعاني أكثر من مليار شخص من أحد أشكال الإعاقة.

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

في ما يلي بعض حالات العجز التي قد يعاني منها المستخدمون:

الرؤية	أدوات سمعية	التنقّل
ضعف في النظر فقدان البصر عمى الألوان الماء الأزرق (أو الأبيض) في العيون لمعان الشمس	ضعيف السمع الصَمَم الضوضاء التهاب الأذن	إصابة في النخاع الشوكي مهارات حركية محدودة مشغول
الإدراك	الكلام	Neural
صعوبة التعلّم النعاس أو التشتت الصداع النصفي مرض التوحّد الاستيلاء	الضوضاء المحيطة احتقان الحلق عائق في الكلام لا يمكنني التحدّث	اكتئاب PTSD اضطراب ثنائي القطب القلق

تتراوح المشاكل البصرية بين عدم القدرة على تمييز الألوان وعدم الرؤية على الإطلاق.

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

لقطة شاشة لمؤشر أداة فحص العناصر في "أدوات مطوّري البرامج في Chrome"

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

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

قدِّم نصوصًا بديلة لكل المحتوى الذي ليس نصيًا بحتًا.
اختبِر مكونات واجهة المستخدم للتأكّد من أنّها لا تزال تعمل بدون صوت.

لقطة شاشة لقارئ الشاشة ChromeVox وهو يقرأ صفحة ويب

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

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

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

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

تتيح لك طلبية prefers-reduced-motion وسائط CSS الحدّ من الصور المتحركة والفيديوهات التي يتم تشغيلها تلقائيًا للمستخدمين الذين يفضّلون الحدّ من الحركة:
```
/*
If the user expresses a preference for reduced motion, don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}
```
تجنَّب التفاعلات التي تكون استنادًا إلى التوقيت.

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

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

ملصقات رقمية تعرض الإجراءات التي يجب اتّخاذها وتلك التي يجب تجنّبها لضمان تسهيل الاستخدام — ستة ملصقات تسرد أفضل الممارسات المتعلّقة بإمكانية الوصول قراءة النص الكامل

قياس تسهيل استخدام مكونات واجهة المستخدم

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

هل يمكنك استخدام مكوّن واجهة المستخدم باستخدام لوحة المفاتيح فقط؟

هل يدير المكوّن التركيز ويتجنّب فخاخ التركيز؟ هل يمكنه الاستجابة لأحداث لوحة المفاتيح المناسبة؟
هل يمكنك استخدام مكوّن واجهة المستخدم مع قارئ شاشة؟

هل قدّمت نصوصًا بديلة لأي معلومات معروضة بشكل مرئي؟ هل أضفت معلومات دلالية باستخدام ARIA؟
هل يمكن أن يعمل مكوّن واجهة المستخدم بدون صوت؟

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

تأكَّد من أنّ عنصر واجهة المستخدم يمكن استخدامه من قِبل شخص لا يستطيع رؤية الألوان. إنّ إضافة Chrome المُسمّاة Colorblindly هي أداة مفيدة لمحاكاة عمى الألوان. (جرِّب جميع أشكال محاكاة عمى الألوان الأربعة المتاحة). يمكنك أيضًا استخدام إضافة Daltonize ، وهي مفيدة بالمثل.
هل يمكن أن يعمل مكوّن واجهة المستخدم مع تفعيل وضع التباين العالي؟

تتيح جميع أنظمة التشغيل الحديثة وضع التباين العالي. High Contrast هي إضافة في Chrome يمكنها مساعدتك في هذا الشأن.

إنّ عناصر التحكّم العادية (مثل <button> و<select>) تتضمّن ميزات تسهيل الاستخدام مضمّنة في المتصفّح. ويمكن التركيز عليها باستخدام مفتاح Tab، ويتفاعلون مع أحداث لوحة المفاتيح (مثل Enter وSpace ومفاتيح الأسهم)، ويمتلكون أدوارًا وحالات وخصائص دلالية تستخدمها أدوات تسهيل الاستخدام. ويجب أن يستوفي أيضًا أسلوبها التلقائي متطلبات تسهيل الاستخدام المُدرَجة.

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

تتيح معظم أدوات المطوّرين في المتصفّحات فحص شجرة تسهيل الاستخدام في الصفحة. في "أدوات مطوّري البرامج في Chrome"، يتوفّر هذا الخيار في علامة التبويب تسهيل الاستخدام في لوحة العناصر.

لقطة شاشة للعرض التدرّجي لتسهيل الاستخدام في "أدوات مطوّري البرامج في Chrome"

يتضمّن Firefox أيضًا لوحة تسهيل الاستخدام.

لقطة شاشة للعرض التدرّجي لتسهيل الاستخدام في أدوات المطوّرين في Firefox

يعرض Safari معلومات تسهيل الاستخدام في علامة التبويب العقدة ضمن لوحة العناصر.

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

تحسين تركيز لوحة المفاتيح

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

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

لقطة شاشة لقائمة وقائمة فرعية تتطلّب إدارة التركيز — إدارة التركيز في عنصر معقّد:

استخدام سمة tabindex

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

يمكن التركيز على العناصر التفاعلية المضمّنة (مثل <button>) بشكل ضمني، لذلك لا تحتاج إلى سمة tabindex ما لم تكن بحاجة إلى تغيير موضعها في ترتيب علامات التبويب.

هناك ثلاثة أنواع من قيم tabindex:

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

يمكنك العثور على بعض حالات استخدام tabindex في المقالة استخدام tabindex.

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

استخدام ميزة "التركيز التلقائي"

تتيح سمة autofocus في HTML للمؤلف تحديد أنّه يجب أن يجذب عنصر معيّن التركيز تلقائيًا عند تحميل الصفحة. تتوفّر autofocus حاليًا في جميع عناصر التحكّم في نماذج الويب، بما في ذلك الأزرار. لضبط التركيز التلقائي على العناصر في مكونات واجهة المستخدم المخصّصة، استخدِم الطريقة focus()، التي تتوفّر في جميع عناصر HTML التي يمكن التركيز عليها (مثل document.querySelector('myButton').focus()).

إضافة تفاعل لوحة المفاتيح

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

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

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

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

ضمان استخدام قارئ الشاشة بنجاح

يستخدم ما يتراوح بين ‎1% و‎2% من المستخدمين قارئ شاشة. هل يمكنك فهم كل المعلومات المهمة والتفاعل مع المكوّن باستخدام قارئ الشاشة ولوحة المفاتيح فقط؟

من المفترض أن تساعدك الأسئلة التالية في معالجة إمكانية استخدام قارئ الشاشة.

هل تحتوي جميع العناصر والصور على نصوص بديلة ذات مغزى؟

في أي مكان يتم فيه عرض معلومات حول الاسم أو الغرض للمكوّن التفاعلي، قدِّم بديلاً نصيًا يسهل الوصول إليه.

على سبيل المثال، إذا كان عنصر واجهة المستخدم <fancy-menu> يعرض رمز الترس فقط للإشارة إلى أنّه قائمة الإعدادات، يجب أن يتضمّن بديلاً نصيًا يسهل الوصول إليه، مثل "الإعدادات"، ينقل المعلومات نفسها. استنادًا إلى السياق، يمكنك تقديم نص بديل باستخدام سمة alt أو سمة aria-label أو سمة aria-labelledby أو نص عادي في Shadow DOM. يمكنك العثور على نصائح فنية عامة في الدليل المرجعي السريع لخدمة WebAIM.

يجب أن يقدّم أيّ مكوّن لواجهة المستخدم يعرض صورة آلية لتوفير نص بديل لهذه الصورة، على غرار سمة alt.

هل تقدّم المكوّنات معلومات دلالية؟

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

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

على سبيل المثال، قد يأخذ مكوّن واجهة مستخدِم <fancy-slider> مخصّص دور ARIA للشريحة التمرير، التي تحتوي على بعض سمات ARIA ذات الصلة: aria-valuenow وaria-valuemin وaria-valuemax. من خلال ربط هذه السمات بالخصائص ذات الصلة في المكوّن المخصّص، يمكنك السماح لمستخدمي التكنولوجيا المساعِدة بالتفاعل مع العنصر، وتغيير قيمته، وحتى تغيير العرض المرئي للعنصر وفقًا لذلك.

لقطة شاشة لقائمة متحركة — عنصر شريط تمرير النطاق

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

هل يمكن للمستخدمين فهم كل شيء بدون الاعتماد على اللون؟

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

رسم بياني دائري يتضمّن تصنيفات وقيمًا لضمان سهولة الاستخدام — رسم بياني دائري سهل الاستخدام (من مبادرة W3C لتوفير إمكانية الوصول إلى الويب)

هل هناك تباين كافٍ؟

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

هل يمكن إيقاف المحتوى المتحرك أو المتوهّج وهل هو آمن؟

يجب أن يتمكّن المستخدمون من إيقاف المحتوى مؤقتًا أو إيقافه أو إخفائه إذا كان يتحرك أو يتم تمريره أو يوميض لأكثر من خمس ثوانٍ. بشكل عام، تجنَّب المحتوى الذي يتضمن وميضًا.

إذا كان يجب أن يضيء ضوء بشكل متقطع، تأكَّد من أنّه لا يضيء أكثر من ثلاث مرات في الثانية.

أدوات تسهيل الاستخدام واختبارها

تتوفّر أكثر من 100 أداة لتقييم مدى سهولة استخدام موقعك الإلكتروني ومكوّناته. تكون بعض الأدوات آلية، بينما تتطلّب أدوات أخرى اختبارًا يدويًا.

في ما يلي بعض النقاط التي يجب أخذها في الاعتبار:

يوفّر Axe اختبارات برمجية لسهولة الاستخدام في إطار العمل أو المتصفّح المفضّل لديك. يمكن استخدام Axe Puppeteer لكتابة اختبارات لتسهيل الاستخدام مبرمَجة.
تقدّم عملية تدقيق Lighthouse في سهولة الاستخدام إحصاءات مفيدة لاكتشاف المشاكل الشائعة في سهولة الاستخدام. نتيجة تسهيل الاستخدام هي متوسط مرجح لجميع عمليات تدقيق تسهيل الاستخدام استنادًا إلى تقييمات Axe لتأثير المستخدم. لمراقبة تسهيل الاستخدام من خلال التكامل المستمر، يُرجى الاطّلاع على التكامل المستمر في Lighthouse.
إنّ Tenon.io مفيد لاختبار المشاكل الشائعة في تسهيل الاستخدام. توفّر Tenon إمكانات دمج قوية في جميع أدوات الإنشاء والمتصفّحات (من خلال الإضافات) وحتى برامج تحرير النصوص.
هناك العديد من الأدوات الخاصة بالمكتبة والإطار العملي لتمييز مشاكل تسهيل الاستخدام في المكوّنات. على سبيل المثال، استخدِم eslint-plugin-jsx-a11y لتسليط الضوء على مشاكل إمكانية الوصول إلى مكوّنات React في المحرِّر.

إذا كنت تستخدم Angular، يوفّر codelyzer عمليات تدقيق تسهيل الاستخدام داخل المحرّر أيضًا:

العمل مع التقنيات المساعِدة

يمكنك فحص الطريقة التي ترى بها التقنيات المساعِدة محتوى الويب باستخدام أداة فحص إمكانية الوصول (لنظام التشغيل Mac) أو أدوات اختبار واجهة برمجة التطبيقات Windows Automation API وAccProbe (لنظام التشغيل Windows). يمكنك أيضًا الاطّلاع على شجرة تسهيل الاستخدام الكاملة التي ينشئها Chrome من خلال الانتقال إلى about://accessibility.
إنّ أفضل طريقة لاختبار إتاحة قارئ الشاشة على جهاز Mac هي استخدام أداة VoiceOver. استخدِم ⌘F5 لتفعيل هذه الميزة أو إيقافها، وCtrl+Option ←→ للتنقّل في الصفحة، وCtrl+Shift+Option + ↑↓ للتنقّل للأعلى أو للأسفل في ملف تعليمات تسهيل الاستخدام. للحصول على تعليمات أكثر تفصيلاً، اطّلِع على القائمة الكاملة لأوامر VoiceOver وقائمة أوامر VoiceOver للويب.
على نظام التشغيل Windows، NVDA هو قارئ شاشة مجاني ومفتوح المصدر. ومع ذلك، فإنّه يتطلب فترة تعلُّم طويلة للمستخدمين المبصرين.
يحتوي نظام التشغيل ChromeOS على قارئ شاشة مضمّن.

ما زلنا بحاجة إلى بذل جهود مضنية لتحسين إمكانية الوصول على الويب. وفقًا لموسوعة الويب:

تتضمّن 4 مواقع إلكترونية من أصل 5 مواقع إلكترونية نصًا يمتزج مع الخلفية، مما يجعله غير قابل للقراءة.
لا تزال نسبة% 49.91 من الصفحات لا تقدّم سمات alt لبعض صورها.
لا تتضمّن سوى% 24 من الصفحات التي تستخدِم الأزرار أو الروابط تصنيفات.
لا تقدّم سوى% 22.33 من الصفحات تصنيفات لجميع مدخلات النماذج.

هناك الكثير من الإجراءات التي يمكننا اتّخاذها لتوفير تجارب يسهل على الجميع استخدامها.