إتاحة تسهيل الاستخدام

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

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

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

دمج عناصر التحكّم في واجهة المستخدم التي تسهّل الاستخدام

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

عناصر التحكّم العادية

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

مواصفة WAI-ARIA في عناصر التحكّم المخصّصة

مواصفة Web Accessibility Initiative - Accessible Rich Internet Applications‏ (WAI-ARIA) هي مواصفة لجعل عناصر التحكّم في واجهة المستخدم سهلة الاستخدام لبرامج قراءة الشاشة من خلال مجموعة عادية من سمات DOM. توفّر هذه السمات معلومات لبرنامج قراءة الشاشة حول وظيفة عناصر التحكّم وحالتها الحالية في صفحة الويب.

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

<div role="toolbar">

تحدّد السمة aria-activedescendant عنصر التحكّم الثانوي الذي يتلقّى التركيز عندما يتلقّى شريط الأدوات التركيز. يشير الرمز tabindex="0" إلى أنّ شريط الأدوات يتلقّى التركيز بترتيب المستند.

في ما يلي المواصفة الكاملة لشريط أدوات كمثال:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

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

للحصول على درس تعليمي سريع حول إضافة عناصر تحكّم WAI-ARIA إلى عناصر التحكّم المخصّصة، اطّلِع على العرض التقديمي الذي قدّمه Dave Raggett في مؤتمر WWW2010.

التركيز في عناصر التحكّم المخصّصة

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

تلقائيًا، تكون العناصر الوحيدة في HTML DOM التي يمكن أن تتلقّى التركيز على لوحة المفاتيح هي الروابط والأزرار وعناصر التحكّم في النماذج. ومع ذلك، يؤدي ضبط سمة HTML‏ tabIndex على 0 إلى وضع عناصر DOM في تسلسل علامات التبويب التلقائي، ما يتيح لها تلقّي التركيز على لوحة المفاتيح.

element.tabIndex = 0

element.focus();

يؤدي ضبط tabIndex = -1 إلى إزالة العنصر من تسلسل علامات التبويب، ولكنّه يظل يسمح للعنصر بتلقّي التركيز على لوحة المفاتيح برمجيًا.

إتاحة الوصول باستخدام لوحة المفاتيح

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

التنقل

تأكَّد من أنّه يمكن للمستخدم التنقّل بين أجزاء مختلفة من الإضافة بدون استخدام الماوس. تأكَّد من أنّه يمكن التنقّل في أي استخدام لـ نافذة منبثقة باستخدام لوحة المفاتيح. استخدِم اختصارات لوحة مفاتيح Chrome لتحديد ما إذا كان يمكن التنقّل في الإضافة.

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

الاختصارات

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

قد يبدو معالج لوحة المفاتيح البسيط في JavaScript على النحو التالي. لاحظ كيف يتم تعديل سمة WAI-ARIA‏ aria-activedescendant استجابةً لبيانات أدخلها المستخدم لعكس زر شريط الأدوات النشط الحالي.

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</div>

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

توفير محتوى يسهّل الاستخدام

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

نص

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

كمؤشر على مرونة واجهة مستخدم الإضافة، طبِّق اختبار 200%؛ إذا تم زيادة حجم النص أو تكبير الصفحة بنسبة %200، هل ستظل الإضافة قابلة للاستخدام؟

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

الألوان

يجب أن يكون هناك تباين كافٍ بين لون الخلفية ولون النص في الإضافة. استخدِم أداة للتحقّق من التباين لاختبار ما إذا كانت ألوان الخلفية والمقدّمة توفّر تباينًا مناسبًا.

عند تقييم التباين، تأكَّد من أنّ كل جزء من الإضافة يعتمد على الرسومات لنقل المعلومات مرئي بوضوح. بالنسبة إلى صور معيّنة، يمكن استخدام أدوات مثل Coblis—Color Blindness Simulator لمعرفة شكل الصورة في أشكال مختلفة من نقص رؤية الألوان.

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

الصوت

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

الصور

قدِّم نصًا بديلاً مفيدًا للصور.

<img src="img.jpg" alt="The logo for the extension">

استخدِم النص البديل لتوضيح الغرض من الصورة بدلاً من تقديم وصف حرفي لمحتوياتها. يجب أن يكون للنص البديل للصور الفاصلة أو الصور الزخرفية فقط نص بديل فارغ "" أو تتم إزالتها من HTML بالكامل ووضعها في CSS.

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

مزيد من المعلومات

يمكنك التعرّف أكثر على ميزات تسهيل الاستخدام في Chrome من خلال الاطّلاع على قناة A11ycasts وقراءة المستندات الفنية حول تسهيل الاستخدام في Chromium.