مثال على مكون التنقل التفصيلي

مثال على التنقل التفصيلي من مستويين

هذا يوضح مسار تنقل تفصيلي بسيط: الرئيسية > الميزات (الصفحة الحالية)

مثال على التنقل التفصيلي من ثلاثة مستويات

هذا يوضح مسار تنقل تفصيلي أعمق: الرئيسية > وكالة الاستخبارات المدنية > الميزات (الصفحة الحالية)

مثال على التنقل التفصيلي من أربعة مستويات

هذا يوضح مسار تنقل تفصيلي أكثر عمقًا مع أربعة مستويات من التسلسل الهرمي للتنقل.

ميزات إمكانية الوصول

• HTML دلالي: يستخدم <nav> مع aria-label="التنقل التفصيلي" وبنية القائمة <ol>
• سمات ARIA: الصفحة الحالية محددة بـ aria-current="page"
• التنقل بلوحة المفاتيح: جميع الروابط يمكن الوصول إليها بزر Tab مع مؤشرات تركيز مرئية
• متوافق مع قارئ الشاشة: البنية الدلالية المناسبة تعلن عن سياق التنقل
• تباين الألوان: يلبي معايير WCAG 2.1 AA (4.5:1 كحد أدنى)
• التصميم المستجيب: يتكيف مع منافذ عرض الهاتف المحمول والأجهزة اللوحية وسطح المكتب
• دعم السمات: يعمل مع الوضع الفاتح والوضع الداكن وسمة Black Trigram

تعليمات الاستخدام

<nav aria-label="التنقل التفصيلي">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">الرئيسية</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/section.html">القسم</a>
    </li>
    <li class="breadcrumb-item" aria-current="page">
      الصفحة الحالية
    </li>
  </ol>
</nav>

قائمة الاختبار

• ✅ التنقل بلوحة المفاتيح (Tab، Shift+Tab، Enter)
• ✅ إعلانات قارئ الشاشة (اختبر باستخدام NVDA أو JAWS أو VoiceOver)
• ✅ تباين الألوان يلبي معيار WCAG 2.1 AA (4.5:1 للنص العادي)
• ✅ التصميم المستجيب يعمل على جميع أحجام منافذ العرض
• ✅ مؤشرات التركيز واضحة ومرئية
• ✅ حالات التمرير توفر ردود فعل بصرية
• ✅ يعمل في الوضع الفاتح والوضع الداكن
• ✅ يعمل مع سمة Black Trigram