الخطوات
ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.
تسلسل مرقّم: مراحل إنجاز أمر ما ("اكتشاف، تصميم، بناء، تحسين"). خط فوق كل مرحلة، ورقمها بلون التمييز، وعنوان وفقرة قصيرة. كما في arabesquelabs.com.
CSS: css/components/steps.css. الأصناف: .al-steps، .al-steps__num، .al-steps__title، .al-steps__body.
البنية
<ol class="al-steps">
<li>
<p class="al-steps__num"><bdi>1</bdi></p>
<h3 class="al-steps__title">اكتشاف</h3>
<p class="al-steps__body">نبدأ بالمشكلة الحقيقية لا بالحل المفترض.</p>
</li>
…
</ol>
الأنواع والأحجام
نوع واحد. أعمدة بقدر ما يتسع، لكل منها 13rem على الأقل: أربعة عبر الصفحة العريضة، ثم اثنان، ثم واحد.
الحالات
القواعد:
- الخط فوق كل مرحلة بلون
--al-color-line-strong؛ والرقم بلون--al-color-accent، جدولي؛ والنص بخط النسخ بلون--al-color-text-muted، بعرض 30ch على الأكثر. - استخدم مستوى عنوان يناسب بنية الصفحة (
h3تحتh2القسم).
لوحة المفاتيح
لا شيء؛ والروابط داخلها تتبع ترتيب القراءة.
ARIA
قائمة مرتبة، فيُعلَن التسلسل والعدد؛ والرقم الظاهر يكرره للقارئ المبصر.
من اليمين إلى اليسار
تبدأ المراحل من اليمين؛ والأرقام معزولة في <bdi> لتستقر الأرقام المختارة في مكانها.
افعل ولا تفعل
- اقتصر في كل مرحلة على عنوان وجملتين أو ثلاث.
- استخدامها لما ليس تسلسلًا (الميزات، القيم): استخدم قائمة عادية أو بطاقات.
- استخدامها لخطوات مهمة يؤديها الشخص الآن: استخدم قائمة المهام.
الرموز
الرموز التي يستخدمها (16)
--al-color-line-strong، --al-color-accent، --al-color-text-muted، --al-font-display، --al-font-serif، --al-text-sm، --al-text-xl، --al-weight-medium، --al-leading-heading، --al-leading-prose، --al-border-hairline، --al-space-3، --al-space-4، --al-space-5، --al-space-8، --al-space-12