X

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

٤. إعداد جدول زمني لمؤتمر تقني Tech Conference Schedule Table

ورشة عمل

في هذه الورشة، ستتعلم كيفية إنشاء "عناصر جداول تراعي معايير سهولة الوصول" Accessible table elements ، وذلك من خلال إعداد "جدول زمني لمؤتمر تقني" a schedule for a tech conference .

الخطوة 1

ابدأ بإضافة عنصر h1 يحتوي على النص جدول مؤتمر التكنولوجيا لعام 2025 .

الخطوة 2

حان الآن وقت البدء في بناء "الجدول" the table .

ابدأ بإضافة عنصر "جدول" table أسفل عنصر "العنوان" h1 . وداخل عنصر "الجدول" table ، أضف عنصر "تسمية توضيحية" caption يحتوي على النص الجدول الزمني حسب المسار والوقت .

الخطوة 3

الخطوة التالية هي إضافة "رأس الجدول" The table head .

ابدأ بإضافة عنصر thead أسفل عنصر caption . وداخل عنصر thead ، أضف عنصر tr .

الخطوة 4

داخل عنصر tr الخاص بك، أضف أربعة عناصر th . يجب أن يحتوي العنصر th الأول على النص الوقت ، والثاني على النص المسار أ ، والثالث على النص المسار ب ، والرابع على النص المسار ت .

الخطوة 5

تُستخدم السمة scope لتحديد ما إذا كانت "خلية العنوان" a header cell تمثّل عنواناً لـ"صف" row ، أو "عمود" column ، أو مجموعة من الصفوف أو الأعمدة.

إليك مثال:

نموذج للكود


<th scope="col">مثال على العنوان</th>

يساعد هذا "برامج قراءة الشاشة" screen readers على فهم "العلاقة" The relationship بين "خلايا الرأس وخلايا البيانات" header and data cells .

بالنسبة لجميع عناصر th ، أضف السمة scope بقيمة col .

الخطوة 6

في الخطوات القليلة التالية، ستقوم بإنشاء "جسم الجدول" The body of the table.

ابدأ بإضافة عنصر tbody أسفل عنصر thead . ثم أضف عنصر tr داخل عنصر tbody .

الخطوة 7

داخل عنصر tr الخاص بك، أضف عنصر th يحتوي على النص 9:00 صباحاً . ثم أسفل عنصر th هذا، أضف ثلاثة عناصر td تحتوي على النصوص التالية: الكلمة الرئيسية: مستقبل التكنولوجيا و مقدمة في تطوير الويب و تجربة المستخدم للجميع .

الخطوة 8

هناك قيمة أخرى للسمة scope وهي row ، والتي تشير إلى أن "خلية العنوان" a header cell تُعد عنواناً للصف بأكمله.

داخل عنصر th الخاص بك، أضف سمة scope بقيمة row .

الخطوة 9

حان الآن وقت إضافة "صف" row آخر إلى "الجدول" The table .

ابدأ بإضافة عنصر tr آخر. وداخل عنصر tr هذا، أضف عنصر th مع تعيين السمة scope والقيمة row ، واجعل محتواه النصي 10:00 صباحاً .

ثم أضف ثلاثة عناصر td تحتوي على النصوص التالية:

  • دراسة متعمقة في إمكانية الوصول

  • لغة CSS للمبتدئين

  • مبادئ التصميم الشامل

الخطوة 10

بعد ذلك، أضف "صفاً ثالثاً" a third row إلى الجدول. ابدأ بإضافة عنصر tr آخر. وداخل عنصر tr هذا، أضف عنصر th مع ضبط السمة scope على القيمة row وتعيين النص 11:00 صباحاً كمحتوى له. ثم أسفل عنصر th هذا، أضف عنصر td يحتوي على النص استراحة .

الخطوة 11

في الوقت الحالي، يشغل عنصر td الذي يحتوي على النص استراحة عموداً واحداً فقط، ولكن سيكون من الجيد لو كان "يمتد" spanned ليشمل الأعمدة الثلاثة جميعها.

كما تتذكر من ورش العمل والدروس السابقة، يمكنك استخدام السمة colspan لجعل "خلية الجدول تمتد عبر عدة أعمدة" a table cell span multiple columns .

نموذج للكود


<tr>
 <td colspan="3">إجمالي النقاط</td>
</tr>

أضف السمة colspan إلى العنصر td واضبط قيمتها على 3 .

الخطوة 12

حان الآن وقت إضافة "صف آخر" another row إلى الجدول.

ابدأ بإضافة عنصر tr آخر. وداخل عنصر tr هذا، أضف عنصر th مع ضبط السمة scope على القيمة row وتعيين النص 11:30 صباحاً كمحتوى له.

ثم أضف ثلاثة عناصر td تحتوي على النصوص التالية:

  • AR/VR في التعليم

  • أساسيات JavaScript

  • أنظمة التصميم على نطاق واسع

الخطوة 13

بعد ذلك، أضف "صفاً خامساً" a fifth row إلى الجدول. ابدأ بإضافة عنصر tr آخر. وداخل عنصر tr هذا، أضف عنصر th مع ضبط السمة scope على القيمة row وتعيين النص 12:30 مساءً كمحتوى له. ثم أسفل عنصر th هذا، أضف عنصر td يحتوي على النص استراحة الغداء . يجب أن يتضمن عنصر td أيضاً السمة colspan مضبوطة على القيمة 3 ، بحيث يمتد العنصر ليشمل المسارات الثلاثة جميعها.

الخطوة 14

الخطوة الأخيرة هي إضافة "صف" row آخر إلى الجدول.

ابدأ بإضافة عنصر tr آخر. وداخل عنصر tr هذا، أضف عنصر th مع ضبط السمة scope على القيمة row وتعيين النص 2:00 مساءً كمحتوى له.

ثم أضف ثلاثة عناصر td تحتوي على النصوص التالية:

  • ورشة عمل واجهة المستخدم الصوتية

  • أساسيات Git وGitHub

  • الألوان والتباين في واجهة المستخدم

مع هذه المجموعة الأخيرة من التعديلات، أصبح جدولك مكتملاً الآن!

الحل 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>جدول مؤتمر التكنولوجيا لعام 2025</title>
 </head>
 <body>

  <h1>جدول مؤتمر التكنولوجيا لعام 2025</h1>

  <table>
   <caption>الجدول الزمني حسب المسار والوقت</caption>
   <thead>
    <tr>
     <th scope="col">الوقت</th>
     <th scope="col">المسار أ</th>
     <th scope="col">المسار ب</th>
     <th scope="col">المسار ت</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th scope="row">9:00 صباحاً</th>
     <td>الكلمة الرئيسية: مستقبل التكنولوجيا</td>
     <td>مقدمة في تطوير الويب</td>
     <td>تجربة المستخدم للجميع</td>
    </tr>
    <tr>
     <th scope="row">10:00 صباحاً</th>
     <td>دراسة متعمقة في إمكانية الوصول</td>
     <td>لغة CSS للمبتدئين</td>
     <td>مبادئ التصميم الشامل</td>
    </tr>
    <tr>
     <th scope="row">11:00 صباحاً</th>
     <td colspan="3">استراحة</td>
    </tr>
    <tr>
     <th scope="row">11:30 صباحاً</th>
     <td>AR/VR في التعليم</td>
     <td>أساسيات JavaScript</td>
     <td>أنظمة التصميم على نطاق واسع</td>
    </tr>
    <tr>
     <th scope="row">12:30 مساءً</th>
     <td colspan="3">استراحة الغداء</td>
    </tr>
    <tr>
     <th scope="row">2:00 مساءً</th>
     <td>ورشة عمل واجهة المستخدم الصوتية</td>
     <td>أساسيات Git وGitHub</td>
     <td>الألوان والتباين في واجهة المستخدم</td>
    </tr>
   </tbody>
  </table>

 </body>
</html>

التطبيق The Application