تمكِّن الإضافات المستخدمين من توفير تجربة تصفُّح مثالية ومصممة وفقًا لقدرات الأفراد وما يفضّلونه. يجب أن تتضمّن الإضافات مكوّنات لتسهيل الاستخدام تشجّع قاعدة المستخدمين الشاملة من خلال السماح للمستخدمين الذين يعانون من عجز بصري وفقدان السمع والمهارات المحدودة وغير ذلك من المستخدمين بالوصول إلى الإضافة.
يمكن للجميع، وليس فقط المستخدمين ذوي الاحتياجات الخاصة، الاستفادة من ميزات إمكانية الوصول. يستفيد المستخدمون الذين يعانون من ضعف الرؤية وضعف المهارة ويتمتعون بالطاقة من اختصارات لوحة المفاتيح. تعد التسميات التوضيحية والنصوص ضرورية للمستخدمين الصم، ولكنها أيضًا تساعد متعلمي اللغة.
قد يتفاعل الأشخاص مع الإضافة بعدة طرق. يمتلك بعض المستخدمين شاشة ولوحة مفاتيح وماوس قياسية، أو قد يعتمدون على مكبر شاشة وربما قارئ شاشة. ليس من المستحيل التنبؤ بالأدوات التي سيستخدمها الأشخاص للوصول إلى الإضافة، إلا أن هناك خطوات يمكن لأي مطوّر برامج اتخاذها لتسهيل الوصول إلى الإضافة قدر الإمكان.
دمج عناصر تحكم واجهة المستخدم التي يمكن الوصول إليها
في حال تعذَّر على المستخدمين الوصول إلى عناصر تحكُّم واجهة المستخدم، لن يتمكنوا من استخدام إحدى الإضافات. تتمثل أسهل طريقة لإنشاء واجهة مستخدم يمكن الوصول إليها في استخدام عنصر تحكم 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
يمكن للإضافات إنشاء اختصارات واضحة للوحة المفاتيح لعناصر واجهة المستخدم المهمة للإضافات. لتنفيذ هذه الاختصارات، يمكنك ربط أدوات معالجة أحداث لوحة المفاتيح بعناصر التحكم. اجعل المستخدمين على دراية بالاختصارات المتاحة من خلال توفيرها في صفحة الخيارات.
تقديم محتوى يسهل الوصول إليه
يُعد توفير محتوى يمكن الوصول إليه مهمًا لجميع المستخدمين. قد تبدو العديد من الإرشادات التالية مألوفة لأنها تعكس ممارسات جيدة لجميع محتوى الويب.
النص
تؤثر خيارات الخطوط وحجم النص في مدى سهولة قراءة محتوى الإضافة. وقد يحتاج المستخدمون الذين يواجهون مشاكل في الرؤية إلى زيادة حجم نص الإضافات. إذا كنت تستخدم اختصارات لوحة المفاتيح، فتأكد من أنها لا تتداخل مع اختصارات التكبير/التصغير المضمنة في Chrome.
وكمؤشر على مرونة واجهة المستخدم للإضافة، طبِّق الاختبار بنسبة 200%. وإذا تمت زيادة حجم النص أو تكبير/تصغير الصفحة بنسبة 200%، فهل ما زال قابلاً للاستخدام؟
تجنَّب تحويل النص إلى صور. لا يستطيع المستخدمون تعديل الحجم ولا تستطيع برامج قراءة الشاشة تفسير الصور. بدلاً من ذلك، يمكنك اختيار أحد الخطوط المصمّمة على الويب، مثل أحد الخطوط المتوفّرة في Google Font API. يمكن تغيير حجم خطوط الويب إلى أحجام مختلفة ويمكن الوصول إليها من قبل الأشخاص الذين يستخدمون برامج قراءة الشاشة.
ألوان
يجب أن يكون هناك تباين كافٍ بين لون الخلفية ولون النص في الإضافة. استخدِم أداة فحص التباين لاختبار ما إذا كانت ألوان الخلفية وألوان المقدّمة توفّر تباينًا مناسبًا.
عند تقييم التباين، تحقق من أن كل جزء من الإضافة يعتمد على الرسومات لنقل المعلومات مرئي بوضوح. بالنسبة إلى صور معينة، يمكن استخدام أدوات مثل محاكي عمى الألوان لمعرفة الشكل الذي تظهر به الصورة في أشكال مختلفة من نقص الألوان.
فكر في تقديم سمات ألوان مختلفة، أو منح المستخدم القدرة على تخصيص نظام الألوان، لخلق تباين أفضل.
الصوت
إذا كانت الإضافة تعتمد على الصوت أو الفيديو لنقل المعلومات، تأكَّد من توفُّر شرح أو نص. يمكنك الاطّلاع على إرشادات برنامج الوسائط الوصفية والتسميات التوضيحية للحصول على مزيد من المعلومات حول الشرح.
الصور
توفير نص بديل غني بالمعلومات للصور.
<img src="img.jpg" alt="The logo for the extension">
استخدِم النص البديل لتحديد الغرض من الصورة بدلاً من الوصف الحرفي لمحتوى الصورة. يجب أن تحتوي صور الفواصل أو الصور الزخرفية تمامًا على نص بديل "" فارغ أو أن تتم إزالتها من HTML بالكامل ووضعها في CSS.
إذا كان يجب أن تستخدم الإضافة نصًا في الصورة، أدرِج نص الصورة في النص البديل. من الموارد الجيدة الرجوع إليها مقالة WebAIM حول النص البديل المناسب.
مزيد من المعلومات
تعرّف على مزيد من المعلومات حول إمكانية الوصول في Chrome من خلال مراجعة قناة A11ycasts وقراءة المستندات الفنية لإمكانية الوصول في Chromium.