X

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

٢. تصحيح أخطاء Debug صفحة "مدونة رحلة البرمجة"

ورشة عمل

أنشأ Camperbot صفحة مدونة توثق رحلته في تعلم "البرمجة" The programming ، ولكن يبدو أن الصفحة تعاني من بعض المشكلات المتعلقة بـ"إمكانية الوصول" Accessibility وتتضمن ممارسات برمجية سيئة. وتتمثل مهمتك في هذه الورشة في "معالجة" fix هذه المشكلات نيابةً عن Camperbot .

كود Camperbot


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مدونة Camperbot</title>
 </head>
 <body>

  <h1>مرحبًا بكم في مدونة Camperbot</h1>

  <h2>التنقل</h2>
  <ul>
   <li><a href="#poste1">رحلتي</a></li>
   <li><a href="#poste2">إمكانية الوصول</a></li>
   <li><a href="#poste3">الخطوات التالية</a></li>
  </ul>

  <div>
   <h1 id="post1">رحلتي في تعلم البرمجة</h1>
   <p>
    بدأتُ تعلُّم البرمجة قبل بضعة أشهر، وكانت تجربةً مليئةً بالإثارة والتقلبات!
   </p>

   <h4>تحديات مبكرة</h4>
   <p>
    في البداية، كان النحو مربكاً للغاية.
   </p>

   <h4>إنجازات نوعية</h4>
   <p>
    وفي النهاية، بدأت الأمور تسير على ما يرام.
   </p>
  </div>

  <div>
   <h1 id="post2">إتاحة الوصول أمرٌ مهم</h1>
   <p>
    تعلمتُ اليوم أن ليس الجميع يستخدمون شبكة الويب بالطريقة نفسها التي أستخدمها بها.
   </p>

   <h5>قارئات الشاشة</h5>
   <p>
    تساعد هذه الأدوات المستخدمين ضعاف البصر على تصفح المواقع الإلكترونية.
   </p>
  </div>

  <div>
   <h1 id="post3">ما الخطوة التالية؟</h1>
   <p>
    أنا متحمس للتعمق في لغة JavaScript وبناء ميزات تفاعلية!
   </p>

   <h3>قريباً: مشروعي الأول بلغة JavaScript !</h3>
   <p>
    قريباً: ترقبوا بعض الميزات التفاعلية المثيرة في المدونة، بالإضافة إلى مشروعي الأول بلغة JavaScript !
   </p>
  </div>

  <h3>تواصل معي</h3>
  <p>راسلني عبر البريد الإلكتروني camperbot@blog.io</p>
  
 </body>
</html>

الخطوة 1

تتعلق المجموعة الأولى من "الأخطاء" errors باستخدام "العناوين" headings . ففي درس سابق، تعلمت أن الممارسة المُثلى تقتضي استخدام وسم عنوان واحد فقط من نوع h1 في كل صفحة، ولكن يبدو أن Camperbot يستخدم أكثر من وسم h1 .

اترك العنصر <h1>مرحبًا بكم في مدونة Camperbot</h1> كما هو، وغيّر عناصر h1 الأخرى إلى عناصر h2 .

الخطوة 2

يبدو أن هناك بعض "المشكلات" issues المتعلقة باستخدام "العناوين" headings في الصفحة، فإذا نظرت إلى عنصر div الأول، ستجد استخداماً لعنصري h4 كـ"عناوين فرعية" subheadings . ومن الأفضل استخدام عناصر h3 لهذه العناوين الفرعية، نظراً لأنها تقع في "مستوى أدنى" a level below من عنصر h2 .

غيّر عنصري h4 إلى عنصري h3 .

الخطوة 3

في "قسم المنشور الثاني" The second post section ، يُستخدم عنصر h5 ، وسيكون "من الأنسب" more appropriate استخدام عنصر h3 هنا.

غيّر عنصر h5 إلى عنصر h3 .

الخطوة 4

أسفل "العنوان الرئيسي" The main title للصفحة، يوجد "قسم للتنقل" navigation section يحتوي على "روابط" links لكل تدوينة.

ينبغي إحاطة هذا "القسم" section بعنصر nav للإشارة إلى الغرض منه كـ"علامة تنقل" navigation landmark .

الخطوة 5

تتضمن صفحة المدونة ما مجموعه ثلاث تدوينات موضوعة داخل عناصر div عامة، ولكن سيكون من الأفضل استخدام "عناصر دلالية" semantic elements لاحتواء كل تدوينة.

قم بتغيير كل عنصر div يحيط بكل تدوينة إلى عنصر article .

الخطوة 6

بما أن "القسم بأكمله" The entire section الذي يحتوي على تدوينات المدونة يمثل "المحتوى الرئيسي" The main content للصفحة، فينبغي وضعه داخل عنصر رئيسي main . ويساعد ذلك "قارئات الشاشة" screen readers وغيرها من "التقنيات المساعدة" assistive technologies على فهم "هيكلية الصفحة" structure of the page بشكل أفضل.

الخطوة 7

بالنسبة للجزء الأخير من "ورشة العمل" workshop ، هناك بعض "التعديلات" changes المطلوبة على "قسم الاتصال" contact section الموجود في الأسفل.

يتمثل التغيير الأول في وضع "قسم الاتصال" contact section داخل عنصر التذييل footer . وسيساعد ذلك "برمجيات قراءة الشاشة" screen readers على تحديد هذا القسم باعتباره "تذييل الصفحة" the footer of the page .

الخطوة 8

يحتوي "قسم التذييل" footer حالياً على عنوان من المستوى h3 ، ولكن ينبغي أن يكون العنوان من المستوى h2 للحفاظ على "التسلسل الهرمي السليم للعناوين" a proper heading hierarchy .

غيّر h3 إلى h2 .

الخطوة 9

سيتمثل التغيير الأخير في نص البريد الإلكتروني الموجود داخل "التذييل" the footer . ففي الدروس و"ورش العمل" workshops السابقة، تعلمت كيفية التعامل مع رابط mailto على النحو التالي:

نموذج للكود


<p>راسلني عبر البريد الإلكتروني <a href="mailto:janedoe@email.com">janedoe@email.com</a></p>

ابدأ بوضع عنوان البريد الإلكتروني camperbot@blog.io داخل "عنصر الرابط" anchor element . ثم أضف السمة href إلى هذا العنصر واضبط قيمتها لتكون mailto:camperbot@blog.io .

بهذا التغيير الأخير، تكون قد "عالجت بنجاح" successfully resolved جميع "المشكلات" the issues الموجودة في صفحة المدونة!

الحل 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>مدونة Camperbot</title>
 </head>
 <body>

  <h1>مرحبًا بكم في مدونة Camperbot</h1>

  <main>
   <nav>
    <h2>التنقل</h2>
    <ul>
     <li><a href="#post1">رحلتي</a></li>
     <li><a href="#post2">إمكانية الوصول</a></li>
     <li><a href="#post3">الخطوات التالية</a></li>
    </ul>
   </nav>
 
   <article>
    <h2 id="post1">رحلتي في تعلم البرمجة</h2>
    <p>
     بدأتُ تعلُّم البرمجة قبل بضعة أشهر، وكانت تجربةً مليئةً بالإثارة والتقلبات!
    </p>
 
    <h3>تحديات مبكرة</h3>
    <p>
     في البداية، كان النحو مربكاً للغاية.
    </p>
 
    <h3>إنجازات نوعية</h3>
    <p>
     وفي النهاية، بدأت الأمور تسير على ما يرام.
    </p>
   </article>
 
   <article>
    <h2 id="post2">إتاحة الوصول أمرٌ مهم</h2>
    <p>
     تعلمتُ اليوم أن ليس الجميع يستخدمون شبكة الويب بالطريقة نفسها التي أستخدمها بها.
    </p>
 
    <h3>قارئات الشاشة</h3>
    <p>
     تساعد هذه الأدوات المستخدمين ضعاف البصر على تصفح المواقع الإلكترونية.
    </p>
   </article>
 
   <article>
    <h2 id="post3">ما الخطوة التالية؟</h2>
    <p>
     أنا متحمس للتعمق في لغة JavaScript وبناء ميزات تفاعلية!
    </p>
 
    <h3>قريباً: مشروعي الأول بلغة JavaScript !</h3>
    <p>
     قريباً: ترقبوا بعض الميزات التفاعلية المثيرة في المدونة، بالإضافة إلى مشروعي الأول بلغة JavaScript !
    </p>
   </article>
  </main>

  <footer>
   <h2>تواصل معي</h2>
   <p>راسلني عبر البريد الإلكتروني <a href="mailto:camperbot@blog.io">camperbot@blog.io</a></p>
  </footer>

 </body>
</html>

التطبيق The Application