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

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

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

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

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

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

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

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

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

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

لإتاحة استخدام WAI-ARIA في عناصر التحكّم المخصّصة، يجب أن تكون عناصر DOM الخاصة بإحدى الإضافات كما يلي: لتضمين السمات التي يستخدمها Chrome لزيادة الأحداث أثناء تفاعل المستخدم. قارئات الشاشة للاستجابة لهذه الأحداث ووصف وظيفة عنصر التحكم. يتم تصنيف سمات DOM التي تحدّدها مجموعة ARIA المتوافقة مع واجهة برمجة التطبيقات (W3C 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 إلى إزالة العنصر من تسلسل مفتاح التبويب (Tab) مع استمرار السماح للعنصر تلقّي تركيز لوحة المفاتيح آليًا

إتاحة الوصول إلى لوحة المفاتيح

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

التنقّل

تأكَّد من أنّه يمكن للمستخدم التنقل بين أجزاء مختلفة من الإضافة بدون استخدام الماوس. تأكد من أن أي استخدام لأي نافذة منبثقة قابل للتنقل عبر لوحة المفاتيح. استخدِم اختصارات لوحة مفاتيح 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—عمى الألوان. يمكن استخدام المحاكي للاطّلاع على شكل الصورة بأشكال مختلفة من نقص الألوان.

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

الصوت

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

الصور

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

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

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

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

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

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