استخدام عناصر معالم HTML5 لتحسين التنقل

تعمل عناصر HTML5، مثل main وnav وaside، كمعالم أو مناطق خاصة على الصفحة يمكن لبرامج قراءة الشاشة والتقنيات المساعدة الأخرى الانتقال إليها. باستخدام عناصر المعالم، يمكنك تحسين تجربة التنقّل بشكل كبير على موقعك الإلكتروني لمستخدمي التكنولوجيا المساعدة. تعرَّف على مزيد من المعلومات من خلال الاطّلاع على معالم HTML 5 وARIA في جامعة ديكي.

كيفية البحث عن المعالم يدويًا

استخدِم قائمة W3C لعناصر المعالم للتحقّق من أنّ كل قسم رئيسي من صفحتك يتضمّن عنصرًا من المعالم. مثلاً:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

يمكنك أيضًا استخدام أدوات مثل إضافة "إحصاءات تسهيل الاستخدام" من Microsoft لعرض بنية صفحتك والاطّلاع على الأقسام التي لا تتضمّنها المعالم:

لقطة شاشة لموقع web.dev تتضمّن معالم بارزة من خلال الإضافة &quot;إحصاءات تسهيل الاستخدام&quot;

كيفية استخدام المعالم بفعالية

  • استخدِم عناصر المعالم لتحديد الأقسام الرئيسية لصفحتك بدلاً من الاعتماد على عناصر عامة مثل <div> أو <span>.
  • استخدِم المَعالِم لتوضيح بنية صفحتك. على سبيل المثال، يجب أن يشتمل العنصر <main> على كل المحتوى المرتبط مباشرةً بالفكرة الرئيسية للصفحة، وبالتالي يجب ألا يكون هناك أكثر من عنصر واحد لكل صفحة. اطّلِع على ملخّص MDN لعناصر أقسام المحتوى للتعرّف على كيفية استخدام كل معلَم.
  • استخدام المعالم بحكمة. إنّ توفّر عدد كبير جدًا من المعالم قد يجعل التنقّل أكثر صعوبة على مستخدمي التكنولوجيا المساعِدة لأنّه يمنعهم من التخطّي بسهولة إلى الجزء المطلوب من المحتوى.

يمكنك الاطلاع على مشاركة العناوين والمعالم للحصول على مزيد من المعلومات.

المراجِع