إيه الفرق؟
التبويبات أم مؤشّر الخطوات
الفارق هو الترتيب. التبويبات أشقّاء متساوون: تدخل أيّها شئت وبأي ترتيب وتخرج متى شئت. الخطوات رحلة واحدة لها بداية ونهاية، والوصول للخطوة الثالثة يعني أنك أنهيت الأولى والثانية.
اسأل نفسك سؤالاً واحداً
هل يمكن للمستخدم أن يبدأ من العنصر الأخير مباشرة؟
ملخّص الحساب: آخر دخول أمس، والمساحة المستخدمة ٦٤٪.
ثلاثة طلبات قيد التنفيذ، واثنا عشر طلباً مكتملاً هذا الشهر.
فاتورتان غير مسدّدتين، وآخر عملية سداد يوم ٢ أغسطس.
شحنة واحدة في الطريق، ووصلت شحنتان الأسبوع الماضي.
تفضيلات اللغة والإشعارات وطرق الدفع المحفوظة.
تذكرة مفتوحة واحدة، ومتوسّط زمن الردّ أقلّ من ساعتين.
RTLركّز على تبويب وجرّب الأسهم، معناها ينقلب مع الاتجاه
التبويبات
Tabsrole="tablist"استخدمه لما
عرض جوانب مختلفة لنفس الشيء: تفاصيل المنتج والمواصفات والمراجعات. لا شيء منها شرط للآخر.
المدخل الكاملالخطوة 2 من 4 · الشحن
RTLالخطوة الأولى تبدأ من اليمين، وعلامة الصح لا تنعكس
مؤشّر الخطوات
Steps / Stepperaria-current="step"استخدمه لما
عملية متسلسلة يعتمد كل جزء منها على ما قبله: الشحن ثم الدفع ثم المراجعة. لا معنى للدفع قبل معرفة عنوان الشحن.
المدخل الكاملالخطأ الكلاسيكي
بناء نموذج تسجيل متعدّد المراحل بـ role="tablist"، فيسمع مستخدم قارئ الشاشة «تبويب ٣ من ٤ محدّد» بدل «الخطوة ٣ من ٤»، ويظنّ أنه يستطيع القفز مباشرة للأخيرة.
مقارنات أخرى
الإشعار العائم أم النافذة الحواريةمربّع الاختيار أم مفتاح التبديلمربّع الاختيار أم مجموعة أزرار الاختيارالشارة أم الشريحةالتنبيه أم الإشعار العائممؤشّر التقدّم أم هيكل التحميلحقل الإكمال التلقائي أم القائمة المنسدلةالدرج الجانبي أم الورقة السفليةالتبويبات أم الأقسام المطويةمسار التنقّل أم مؤشّر الخطواتالتلميح أم القائمة المنسدلةالأقسام المطوية أم القائمة المنسدلة