شرح صفوف ومحتوى الفقرة
بدون سمات الإتاحة الصحيحة، تقرأ التقنيات المساندة سلسلة من الأزرار المتتالية دون أن يدرك الكفيف أنها تمثل مجموعة خيارات مترابطة! لذلك يشدد توثيق Bootstrap 5.3 على قاعدتين ذهبيتين لا غنى عنهما: منح كل مجموعة role="group" بينما يأخذ شريط الأدوات الأب role="toolbar"، وتزويد كل مجموعة أو شريط باسم وصفي واضح عبر aria-label أو ربطه بعنوان ظاهر عبر aria-labelledby.
| العنصر المعماري | الكلاس القياسي | الدور والسمة الإلزامية للإتاحة |
|---|---|---|
| مجموعة أفقية مترابطة | .btn-group | role="group" مع aria-label واضح |
| شريط أدوات متعدد المجموعات | .btn-toolbar | role="toolbar" مع aria-label شامل |
| تكبير أو تصغير المجموعة | .btn-group-lg / .btn-group-sm | يوضع على الحاوية الأب بدلاً من تكراره على الأبناء |
| مجموعة أدوات رأسية | .btn-group-vertical | role="group" وتوحيد عرض الأزرار عمودياً |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تجميع الأزرار المترابطة أفقياً بكلاس btn-group ورأسياً بكلاس btn-group-vertical، وبناء أشرطة الأدوات المتعددة عبر btn-toolbar، وضبط الأحجام الموحدة، وتطبيق عقود الإتاحة القياسية role="group" وrole="toolbar". الخطوة التالية: انتقل الآن إلى الدرس الرابع والعشرين لتعلّم تصميم الشارات النسبية والكبسولية وعدادات الإشعارات الزاوية باستخدام مكوّن Badges.