استخدام عناصر معالم 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 تتضمّن معالم تم تمييزها من خلال الإضافة Accessibility Insights

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

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

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

الموارد