من وصف نصي إلى نموذج واجهة

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1الوصف المنظّم

قالب يغطي ما يحتاجه النموذج ليصيب من أول مرة:

Screen: order tracking for a café app (Arabic, right-to-left).
User: a customer who just paid and is waiting, usually on a phone.
Main task: see at a glance where the order is and how long is left.
Content, top to bottom:
  1. Order number and time placed.
  2. A 4-step progress bar: received, preparing, ready, collected.
  3. The items (name, size, quantity).
  4. A "call the café" button.
States: preparing (default), ready (green highlight), cancelled (message + refund note).
Constraints: one HTML file, inline CSS, no libraries, <html dir="rtl" lang="ar">,
  CSS logical properties only, colours as CSS variables, works at 360px wide.
Accessibility: AA contrast, the progress bar readable by screen readers
  (aria-current on the active step), visible focus on the button.

2التكرار بتعديلات صغيرة

بعد المسودة الأولى لا تعيد كتابة الطلب. أعطِ تعديلات محددة وقابلة للتحقق: «شريط التقدم يبدأ من اليسار، اقلبه ليبدأ من اليمين باستخدام flex بدل left»، «زر الاتصال تباينه 3.1:1، اجعله 4.5:1 على الأقل».

3افحص قبل أن تعتمد

قائمة فحص سريعة لكل نموذج: الهيكل دلالي (header، main، button)، كل صورة لها alt، التباين ≥ 4.5:1، التنقل بـ Tab يصل لكل عنصر بترتيب منطقي، يعمل على عرض 360px دون تمرير أفقي، والوضع الداكن إن طُلب. هذا مثال لشريط تقدم يصلح للعربية والشاشة القارئة:

<ol class="steps" aria-label="حالة الطلب">
  <li class="done">استُلم</li>
  <li class="current" aria-current="step">قيد التحضير</li>
  <li>جاهز</li>
  <li>تم الاستلام</li>
</ol>
<style>
  .steps { display: flex; gap: .5rem; padding: 0; list-style: none; }
  .steps li { flex: 1; padding-block: .5rem; border-block-start: 4px solid var(--line); }
  .steps .done, .steps .current { border-color: var(--brand); }
  .steps .current { font-weight: 700; }
</style>

مثال محلول

المسألة: النموذج الأول جميل، لكن Lighthouse أعطى 68 في الوصول: زر بلا اسم (أيقونة فقط)، تباين نص رمادي 2.8:1، وعناوين تقفز من h1 إلى h4. الحل بثلاثة تعديلات: aria-label="اتصل بالمقهى" للزر، لون النص #5b5b66، وتصحيح ترتيب العناوين. النتيجة 100 دون تغيير الشكل.

خرافة مقابل حقيقة

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك