متغيرات وحالات مسار التصفح :
- الحالات: يحتوي مسار التصفح على سبع حالات للعناصر — المفعلة، التمرير، التركيز، تم زيارته، المعطل، والقابل للقراءة فقط.
- الالتفاف: إذا تجاوز مسار التصفح عرض المحتوى يمكن الالتفاف إلى السطر التالي لاستيعاب الفائض.
- اختصار مسار التصفح: يتم عرض ما يصل إلى خمسة عناصر من مسار التصفح بشكل افتراضي. إذا كان هناك المزيد، يتم اختصار المسار لعرض العناصر الأولى والأخيرة فقط مع علامة الاختصار (…) التي تشير إلى العناصر الإضافية. النقر على علامة الاختصار تعمل على توسيع المسار لعرض جميع العناصر.
في حين أن مسار التصفح يدعم وضوح التنقل، فإن مميزات إمكانية الوصول المحددة ضرورية لضمان قابليتها للاستخدام الكامل من قبل الجميع بما في ذلك الأفراد ذوي الإعاقة. الامتثال لمعايير إمكانية الوصول عند تنفيذ شريط التنقل يعزز تفاعل المستخدم ويتماشى مع إرشادات الوصول إلى موقع الويب.
- تنفيذ مسار التصفح كقائمة من الروابط لتعكس بنيتها بشكل دلالي. يساعد ذلك المستخدمين وتقنيات المساعدة في فهم تخطيط ووظيفة مسار التصفح .
<nav aria-label="Breadcrumb">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li aria-current="page">Current Page</li>
</ul>
</nav>
- استخدم aria-label على عنصر التنقل لتحديد الغرض من كتلة التنقل (مثل،مسار التصفح ).
- استخدم aria-current="page" للإشارة إلى الصفحة الحالية في مسار التصفح . تساعد هذه السمة مستخدمي تقنيات المساعدة في فهم الصفحة النشطة.
- تأكد من أن جميع الروابط في مسار التصفح قابلة للوصول، بما في ذلك النص القابل للتمييز وإمكانية التركيز عليها.
- يجب أن تكون جميع الروابط في مسار التصفح قابلة للتنقل باستخدام مفتاح Tab.
- توفير ردات فعل بصرية لحالات التركيز، التمرير، والتنشيط لتحسين ردود الفعل التفاعلية للمستخدمين الذين يعتمدون على لوحة المفاتيح أو الفأرة.
- استخدام فواصل بصرية بين عناصر مسار التصفح. في حالة استخدام أيقونة مخصصة كفاصل، تأكد بأنها تحتوي على سمة aria-hidden="true" لمنعها من القراءة بواسطة قارئات الشاشة حيث أنها مجرد زينة.