إيه الفرق؟
التبويبات أم الأقسام المطوية
الفارق هو كم قسماً يمكن رؤيته في وقت واحد، وهل يتغيّر ارتفاع الصفحة. التبويبات تعرض قسماً واحداً داخل إطار ثابت الارتفاع؛ الأكورديون يسمح بفتح عدّة أقسام معاً ويدفع ما تحته لأسفل.
اسأل نفسك سؤالاً واحداً
هل يحتاج المستخدم لمقارنة قسمين ببعضهما في نفس اللحظة؟
التبويبات
Tabsrole="tablist"استخدمه لما
أقسام متكافئة في الحجم، والمستخدم ينتقل بينها ولا يقرأها كلها. الإطار الثابت يمنع اهتزاز الصفحة.
المدخل الكاملالتبويبات إطار ثابت الارتفاع؛ القسم يدفع ما تحته.
يعطيك السلوك والوصولية بلا JavaScript، لكن تحريكه متعب.
الأول فقط، أو لا شيء إذا كفت العناوين وحدها.
الأقسام المطوية
Accordionaria-expanded + aria-controlsاستخدمه لما
محتوى طويل غير متساوي الطول يُقرأ انتقائياً، والأسئلة الشائعة مثاله الكلاسيكي، أو مساحة ضيّقة كشاشة الموبايل.
المدخل الكاملالخطأ الكلاسيكي
تحويل التبويبات إلى أكورديون على الموبايل مع الاحتفاظ بأدوار ARIA الخاصة بالتبويبات. الدور يجب أن يتغيّر مع البنية، وإلا صار ما يُنطق مخالفاً لما يُرى.
مقارنات أخرى