سهولة الوصول في إطار Bootstrap

نظرة مُختصرة على ميزات Bootstrap ومواطن قصوره في إنشاء محتوى سهل الوصول Accessibility.

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

نظرة عامّة على سهولة الوصول في Bootstrap ومكامن القصور فيه

تعتمد سهولة الوصول عموما في أي مشروع مبنيّ بإطار العمل Bootstrap على نحو واسع على ترميزات المؤلّفين Author’s markup، التنسيقات الإضافيّة والسكربتات المستخدَمة. بافتراض أن هذه العناصر نُفّذت على نحو صحيح فإنه بالإمكان استخدام Bootstrap لإنشاء مواقع ويب وتطبيقات تتوافق مع الإصدر الثاني من معيار الخطوط العامّة لإنشاء محتوى ويب سهل الوصول WCAG 2.0 ومعايير ومتطلّبات سهولة الوصول المشابهة.

الترميزات البنيوية

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

العناصر التفاعليّة

صُمِّمت العناصر التفاعليّة في Bootstrap - مثل النوافذ الشرطية Modals، القوائم المنسدلة Dropdown menus والتلميحات المُخصَّصة - للعمل عند اللمس، النقر ولدى مستخدمي لوحات المفاتيح. يُفتَرَض أن يؤدّي استخدام الأدوار والخاصيّات المناسبة ضمن معيار WAI-ARIA إلى جعل هذه العناصر مفهومة ويمكن تشغيلها بتقنيّات مساعدة (مثل قارئات الشاشة).

نظرا لأن عناصر Bootstrap لتوائم أغراضا عامّة فإن المؤلفين قد يحتاجون لتضمين أدوار وخاصيّات إضافية من معيار ARIA وسلوك JavaScript لعكس طبيعة ووظيفة العنصُر على نحو أدق. يشير التوثيق عادة إلى هذه المسألة.

التباين اللوني

ينتُج عن غالبيّة الألوان المبدئيّة في إطار العمل Bootstrap - المستخدمة في إطار العمل لأمور من قبيل تنويعات الأزرار، تنويعات التنبيهات، مؤشّرات التصديق Validation في الاستمارات - ينتُج عنها تباين لوني غير كاف (أقلّ من نسبة التباين اللوني 4.5:1 المنصوح بها في WCAG 2.0 عند الاستخدام في خلفيّة مضيئة. سيتطلّب الأمر تعديل الألوان المبدئيّة أو تمديدها للتأكّد من الحصول على نسبة تباين لوني مناسبة.

المحتوى المخفي بصريا

يمكن استخدام الصنف ‎.sr-only لتنسيق المحتوى المخفي بصريّا والمطلوب إبقاؤه متوفرا للتقنيات المُساعدة مثل قارئات الشاشة. يفيد هذا الأمر كثيرا في الحالات التي يُحتاج فيها لنقل معلومات بصريّة إضافية أو إشارات (مثل إيصال معان باستخدام ألوان) إلى ذوي القدرات البصرية المحدودة.

<p class="text-danger">
  <span class="sr-only">خطر: </span>
  لا يمكن إلغاء مفعول هذا الإجراء بعد تنفيذه
</p>

يمكن الجمع بين الصنفين ‎.sr-only و‎.sr-only-focusable لأزرار التحكّم المخفيّة بصريا مثل روابط التخطّي Skip التقليدية. تتأكد هذه الطريقة من جعل هذه الأزرار مرئية عند ما يُركَّز عليها (بالنسبة لمستخدمي لوحات المفاتيح البصرية).

<a class="sr-only sr-only-focusable" href="#content">تجاوز إلى المحتوى الرئيس </a>

موارد إضافية

مصادر

صفحة Accessibility ضمن توثيق Bootstrap.