تسهيل الاستخدام (a11y)

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

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

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

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

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

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

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

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

مبادرة تسهيل استخدام الويب - تطبيقات الإنترنت التفاعلية التي تسهّل الاستخدام، أو 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.

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

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

بشكلٍ تلقائي، العناصر الوحيدة في نموذج كائن المستند (DOM) الخاص بلغة HTML التي يمكن أن تتلقّى التركيز من لوحة المفاتيح هي الروابط الثابتة والأزرار وعناصر التحكّم في النماذج. ومع ذلك، يؤدي ضبط سمة 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="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</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.