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

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

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

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

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

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

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

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

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

Web Accessibility Initiative - Accessible Rich Internet Applications، أو 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 إلى إزالة العنصر من تسلسل علامات التبويب، ولكنه يسمح للعنصر بتلقّي تركيز لوحة المفاتيح آليًا.

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

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

التنقّل

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

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

الصوت

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

الصور

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

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

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

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

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

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