إمكانية الوصول

نظرة عامة مختصرة على ميزات Bootstrap والقيود الخاصة بإنشاء محتوى يمكن الوصول إليه.

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

نظرة عامة والقيود

تعتمد إمكانية الوصول الإجمالية لأي مشروع تم إنشاؤه باستخدام Bootstrap إلى حد كبير على ترميز المؤلف والتصميم الإضافي والبرمجة النصية التي تم تضمينها. ومع ذلك ، شريطة أن يتم تنفيذها بشكل صحيح ، يجب أن يكون من الممكن تمامًا إنشاء مواقع الويب والتطبيقات باستخدام Bootstrap التي تفي WCAG 2.0 (A / AA / AAA) ، والقسم 508 ومعايير ومتطلبات الوصول المماثلة.

الترميز الهيكلي

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

مكونات تفاعلية

تم تصميم مكونات Bootstrap التفاعلية - مثل مربعات الحوار النموذجية والقوائم المنسدلة وتلميحات الأدوات المخصصة - للعمل مع مستخدمي اللمس والماوس ولوحة المفاتيح. من خلال استخدام أدوار وسمات WAI - ARIA ذات الصلة ، يجب أن تكون هذه المكونات مفهومة وقابلة للتشغيل باستخدام التقنيات المساعدة (مثل قارئات الشاشة).

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

تباين اللون

تؤدي معظم الألوان التي تشكل حاليًا لوحة Bootstrap الافتراضية - المستخدمة في إطار العمل لأشياء مثل تنويعات الأزرار وتنوعات التنبيه ومؤشرات التحقق من صحة النموذج - إلى تباين ألوان غير كافٍ (أقل من نسبة تباين ألوان WCAG 2.0 الموصى بها وهي 4.5: 1 ) عند استخدامها مقابل خلفية فاتحة. سيحتاج المؤلفون إلى تعديل / تمديد هذه الألوان الافتراضية يدويًا لضمان نسب تباين ألوان مناسبة.

يمكن تصميم المحتوى الذي يجب أن يكون مخفيًا بصريًا ، ولكن يظل في متناول التقنيات المساعدة مثل برامج قراءة الشاشة ، باستخدام .sr-onlyالفصل الدراسي. يمكن أن يكون هذا مفيدًا في المواقف التي يلزم فيها نقل معلومات أو إشارات مرئية إضافية (مثل المعنى الذي يتم الإشارة إليه من خلال استخدام اللون) للمستخدمين غير المرئيين.

<p class="text-danger">
  <span class="sr-only">Danger: </span>
  This action is not reversible
</p>

بالنسبة لعناصر التحكم التفاعلية المخفية بصريًا ، مثل روابط "التخطي" التقليدية ، .sr-onlyيمكن دمجها مع .sr-only-focusableالفصل. سيضمن ذلك أن يصبح عنصر التحكم مرئيًا بمجرد التركيز (لمستخدمي لوحة المفاتيح المبصرين).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

انخفاض الحركة

يتضمن Bootstrap دعمًا prefers-reduced-motionلميزة الوسائط . في المتصفحات / البيئات التي تسمح للمستخدم بتحديد تفضيلاته للحركة المنخفضة ، سيتم تعطيل معظم تأثيرات انتقال CSS في Bootstrap (على سبيل المثال ، عند فتح أو إغلاق مربع حوار مشروط). حاليًا ، يقتصر الدعم على Safari على نظامي macOS و iOS.