مثال على التنقل التفصيلي من مستويين
هذا يوضح مسار تنقل تفصيلي بسيط: الرئيسية > الميزات (الصفحة الحالية)
مثال على التنقل التفصيلي من ثلاثة مستويات
هذا يوضح مسار تنقل تفصيلي أعمق: الرئيسية > وكالة الاستخبارات المدنية > الميزات (الصفحة الحالية)
مثال على التنقل التفصيلي من أربعة مستويات
هذا يوضح مسار تنقل تفصيلي أكثر عمقًا مع أربعة مستويات من التسلسل الهرمي للتنقل.
ميزات إمكانية الوصول
- 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