انتقل إلى محتوى الدرس

Vertical Pills ARIA Roles التبويبات الرأسية وأدوار ARIA

صمّم واجهات التبويبات التفاعلية في بوتستراب 5.3 عبر .nav-tabs و.nav-pills وشريط .nav-underline الحديث ولوحات المحتوى المتبدلة بـ Vanilla JS.
2 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تعتمد لوحات الإعدادات المتقدمة كثيراً على وضع أزرار كبسولية عمودية بجانب منطقة المحتوى عبر حاوية .d-flex .align-items-start تجمع عمود .nav.flex-column.nav-pills مع حاوية .tab-content.

ولتحقيق معايير الإتاحة القياسية للتبويبات التفاعلية، تتكامل ثلاثة أدوار معاً: إسناد role="tablist" للحاوية مع aria-orientation="vertical" في الوضع العمودي، وإسناد role="tab" مع aria-controls وaria-selected لكل زر، وإسناد role="tabpanel" مع aria-labelledby لكل لوحة، فيفعّل بوتستراب التنقل بمفاتيح الأسهم تلقائياً.

الصف 2 ملاحظة هامة