إمكانية الوصول (Accessibility)
نظرة عامة موجزة على ميزات الـ Bootstrap وقيوده لإنشاء محتوى قابل للوصول.
يوفر Bootstrap إطار عمل سهل الاستخدام من الأنماط الجاهزة، وأدوات التخطيط، والمكونات التفاعلية، مما يسمح للمطورين بإنشاء مواقع وتطبيقات جذابة بصرياً، غنية وظيفياً، وقابلة للوصول مباشرة عند الاستخدام.
نظرة عامة والقيود
تعتمد إمكانية الوصول العامة لأي مشروع يتم بناؤه باستخدام Bootstrap بشكل كبير على ترميز المؤلف، والتنسيق الإضافي، والبرمجيات التي قام بتضمينها. ومع ذلك، وبشرط تنفيذ هذه العناصر بشكل صحيح، سيكون من الممكن تماماً إنشاء مواقع وتطبيقات باستخدام Bootstrap تستوفي معايير WCAG 2.2 (A/AA/AAA)، و Section 508 ، ومعايير ومتطلبات إمكانية الوصول المماثلة.
الترميز الهيكلي
يمكن تطبيق تنسيق وتخطيط Bootstrap على مجموعة واسعة من هياكل الترميز. تهدف هذه المستندات إلى تزويد المطورين بأمثلة على أفضل الممارسات لتوضيح استخدام Bootstrap نفسه وتوضيح الترميز الدلالي المناسب، بما في ذلك الطرق التي يمكن من خلالها معالجة مخاوف إمكانية الوصول المحتملة.
المكونات التفاعلية
تم تصميم المكونات التفاعلية في Bootstrap — مثل الحوارات المشروطة (modal dialogs)، والقوائم المنسدلة، وتلميحات الأدوات المخصصة — لتعمل مع مستخدمي اللمس والماوس ولوحة المفاتيح. ومن خلال استخدام أدوار وسمات WAI-ARIA ذات الصلة، يجب أن تكون هذه المكونات مفهومة وقابلة للتشغيل باستخدام التقنيات المساعدة (مثل قارئات الشاشة).
نظراً لأن مكونات Bootstrap مصممة لتكون عامة إلى حد ما، قد يحتاج المؤلفون إلى تضمين المزيد من أدوار وسمات ARIA، بالإضافة إلى سلوك JavaScript، لنقل الطبيعة والوظيفة الدقيقة لمكوناتهم بشكل أكثر دقة. وعادة ما يتم ملاحظة ذلك في المستندات.
تباين الألوان
بعض مجموعات الألوان التي تشكل حالياً لوحة الألوان الافتراضية لـ Bootstrap — والمستخدمة في جميع أنحاء إطار العمل لأشياء مثل تنويعات الأزرار، وتنويعات التنبيهات، ومؤشرات التحقق من صحة النماذج — قد تؤدي إلى تباين ألوان غير كافٍ (أقل من نسبة تباين ألوان النصوص الموصى بها في WCAG 2.2 وهي 4.5:1 ونسبة تباين الألوان غير النصية في WCAG 2.2 وهي 3:1)، خاصة عند استخدامها مقابل خلفية فاتحة. يُشجع المؤلفون على اختبار استخداماتهم المحددة للألوان، وعند الضرورة، تعديل/توسيع هذه الألوان الافتراضية يدوياً لضمان نسب تباين ألوان كافية.
المحتوى المخفي بصرياً
المحتوى الذي يجب أن يكون مخفياً بصرياً، ولكن يظل قابلاً للوصول إلى التقنيات المساعدة مثل قارئات الشاشة، يمكن تنسيقه باستخدام الفئة .visually-hidden. يمكن أن يكون هذا مفيداً في الحالات التي يلزم فيها نقل معلومات أو إشارات بصرية إضافية (مثل المعنى الذي يتم الدلالة عليه من خلال استخدام اللون) إلى المستخدمين غير البصريين.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
بالنسبة لعناصر التحكم التفاعلية المخفية بصرياً، مثل روابط "التخطي" التقليدية، استخدم الفئة .visually-hidden-focusable. سيضمن ذلك أن يصبح عنصر التحكم مرئياً بمجرد التركيز عليه (لمستخدمي لوحة المفاتيح المبصرين). انتبه، مقارنة بالفئات المكافئة .sr-only و .sr-only-focusable في الإصدارات السابقة، فإن .visually-hidden-focusable في Bootstrap 5 هي فئة مستقلة، ويجب عدم استخدامها بالاقتران مع الفئة .visually-hidden.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
تقليل الحركة
يتضمن Bootstrap دعماً لميزة الوسائط prefers-reduced-motion. في المتصفحات/البيئات التي تسمح للمستخدم بتحديد تفضيله لتقليل الحركة، سيتم تعطيل معظم تأثيرات انتقال CSS في Bootstrap (على سبيل المثال، عند فتح أو إغلاق حوار مشروط، أو الرسوم المتحركة المنزلقة في الـ carousels)، كما سيتم إبطاء الرسوم المتحركة ذات المغزى (مثل الـ spinners).
في المتصفحات التي تدعم prefers-reduced-motion، وحيث لم يشر المستخدم صراحةً إلى تفضيله لتقليل الحركة (أي حيث prefers-reduced-motion: no-preference)، يقوم Bootstrap بتفعيل التمرير السلس باستخدام خاصية scroll-behavior.