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

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

على هذه الصفحة

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

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

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

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

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

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

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

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

تباين اللون

قد تؤدي بعض مجموعات الألوان التي تشكل حاليًا لوحة Bootstrap الافتراضية - المستخدمة في إطار العمل لأشياء مثل اختلافات الأزرار وتنوعات التنبيه ومؤشرات التحقق من صحة النموذج - إلى تباين ألوان غير كافٍ (أقل من نسبة تباين ألوان النص WCAG 2.1 الموصى بها وهي 4.5: 1 ونسبة تباين الألوان غير النصية لـ WCAG 2.1 تبلغ 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في الإصدارات السابقة ، يعد Bootstrap 5 .visually-hidden-focusableفئة قائمة بذاتها ، ويجب عدم استخدامها مع .visually-hiddenالفصل.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

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

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

في المتصفحات التي تدعم prefers-reduced-motion، وحيث لم يشر المستخدم صراحةً إلى أنه يفضل الحركة المنخفضة (أي أين prefers-reduced-motion: no-preference) ، يتيح Bootstrap التمرير السلس باستخدام scroll-behaviorالخاصية.