الفرق بين المراجعتين لصفحة: «Bootstrap/accessibility»

المراجعة الحالية بتاريخ 13:18، 13 يوليو 2020

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

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

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

تعتمد سهولة الوصول عمومًا في أي مشروع مبنيّ بإطار العمل Bootstrap على نحو واسع على شيفرات HTML وتنسيقات CSS الإضافيّة والسكربتات المستخدَمة. بافتراض أن هذه العناصر نُفّذت على نحو صحيح فإنه بالإمكان استخدام Bootstrap لإنشاء مواقع ويب وتطبيقات تتوافق مع الإصدر الثاني من معيار الخطوط العامّة لإنشاء محتوى ويب سهل الوصول WCAG 2.0 ومعايير ومتطلّبات سهولة الوصول المشابهة.

البنية التنظيمية

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

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

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

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

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

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

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

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

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

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

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

تخفيض الحركة

يدعم Bootstrap ميزة الوسائط prefers-reduced-motion في المتصفحات التي تتيح للمستخدم تخفيض الحركة. أكثر تأثيرات الانتقال في CSS المدعومة في Bootstrap (مثلا عند فتح نافذة شرطية أو إغلاقها وغير ذلك) ستُعطَّل.

موارد إضافية

مصادر

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

@@ سطر 27: / سطر 27: @@
 <a class="sr-only sr-only-focusable" href="#content">تجاوز إلى المحتوى الرئيس </a>
 </syntaxhighlight>
+=== تخفيض الحركة ===
+يدعم Bootstrap ميزة الوسائط  <code>prefers-reduced-motion</code> في المتصفحات التي تتيح للمستخدم تخفيض الحركة. أكثر تأثيرات الانتقال في CSS المدعومة في Bootstrap (مثلا عند فتح نافذة شرطية أو إغلاقها وغير ذلك) ستُعطَّل.
 == موارد إضافية ==
@@ سطر 37: / سطر 40: @@
 == مصادر ==
-* صفحة [https://getbootstrap.com/docs/4.0/getting-started/accessibility/ Accessibility] ضمن توثيق Bootstrap.
+* صفحة [https://getbootstrap.com/docs/4.5/getting-started/accessibility/ Accessibility] ضمن توثيق Bootstrap.
 [[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
 [[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]]