X

إمكانية الوصول Accessibility

٩. إنشاء صفحة إتمام الشراء Checkout Page

مختبر

الهدف: تنفيذ قصص المستخدم الموضحة أدناه.

نموذج HTML


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحة إتمام الشراء Checkout Page</title>
 </head>
 <body>
  
 </body>
</html>

قصص المستخدم User Stories :

  • ١. يجب أن يكون لديك عنصر h1 يحتوي على النص الدفع .

  • ٢. يجب أن يكون لديك عنصران من نوع section مباشرةً بعد عنصر h1 .

  • ٣. يجب أن يحتوي "القسم الأول" (the first section) على عنصر h2 يتضمن النص عربة التسوق الخاصة بك .

  • ٤. يجب أن يتضمن القسم الأول "صورة" (an image) لعنصر ما مع "نص بديل مناسب" (appropriate alternate text) . يمكنك استخدام هذه الصورة إذا أردت: https://cdn.freecodecamp.org/curriculum/labs/cube.jpg

  • ٥. يجب أن يحتوي "القسم الثاني" (the second section) على عنصر h2 يتضمن النص معلومات الدفع .

  • ٦. يجب أن يكون لديك عنصر "نموذج" form داخل "القسم الثاني" (the second section) .

  • ٧. يجب أن يحتوي "النموذج" (the form) الخاص بك على "حقل إدخال" input من النوع type="text" ، يحمل "المعرف" id و"الاسم" name بالقيمة "card-name" ، بالإضافة إلى "تسمية" label مرتبطة به.

  • ٨. يجب أن يحتوي "النموذج" (the form) الخاص بك على "حقل إدخال" input من النوع type="text" ، يحمل "المعرف" id و"الاسم" name بالقيمة "card-number" ، بالإضافة إلى "تسمية" label مرتبطة به.

  • ٩. يجب أن يكون لديك "عنصرَا إدخال" (two input elements) على الأقل يحتويان على السمة required .

  • ١٠. يجب عليك تضمين عنصر span يحتوي على النص * وضبط السمة aria-hidden على القيمة "true" داخل عنصر label لكل "حقل إدخال إلزامي" (required input) ، وذلك للإشارة بصرياً إلى "الحقول الإلزامية" 5 .

  • ١١. يجب توفير عنصر p يحتوي على "نص إرشادي" (a help text) يوضح "التنسيق المطلوب لرقم البطاقة" (the required card number format) ، بحيث يوضع مباشرةً بعد" حقل إدخال" (input) رقم البطاقة، كما يجب أن يحمل هذا العنصر "المعرِّف" id="card-number-help" وأن تتم الإشارة إليه من قِبل "حقل إدخال رقم البطاقة" (the card number input) باستخدام السمة aria-describedby .

الحل The Solution


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحة إتمام الشراء Checkout Page</title>
 </head>
 <body>
  
  <h1>الدفع</h1>

  <section>
   <h2>عربة التسوق الخاصة بك</h2>
   <img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="مكعب" />
  </section>

  <section>
   <h2>معلومات الدفع</h2>
   <form>
    <label for="card-name">اسم صاحب البطاقة<span aria-hidden="true">*</span></label>
    <input type="text" id="card-name" name="card-name" required>
    <label for="card-number">رقم البطاقة<span aria-hidden="true">*</span></label>
    <input type="text" id="card-number" name="card-number" aria-describedby="card-number-help" required>
    <p id="card-number-help">يجب ان يتكون رقم البطاقة من 14 رقم.</p>
   </form>
  </section>

 </body>
</html>

التطبيق The Application