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

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

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

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

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

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

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

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

بشكل افتراضي، العناصر الوحيدة في 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٪، فهل لا يزال قابلاً للاستخدام؟

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

الألوان

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

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

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

الصوت

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

الصور

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

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

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

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

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

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