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

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

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

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

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

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

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

صوت

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

الصور

قم بتوفير نص بديل مفيد للصور.

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

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

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

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

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