דוגמת פירורי לחם דו-שכבתיים
זה מציג מסלול פירורי לחם פשוט: ראשי > תכונות (דף נוכחי)
דוגמת פירורי לחם תלת-שכבתיים
זה מציג מסלול פירורי לחם עמוק יותר: ראשי > סוכנות מודיעין אזרחי > תכונות (דף נוכחי)
דוגמת פירורי לחם ארבע-שכבתיים
זה מציג מסלול פירורי לחם עמוק עוד יותר עם ארבע רמות של היררכיית ניווט.
תכונות נגישות
- HTML סמנטי: משתמש ב-
<nav> עם aria-label="Breadcrumb" ומבנה רשימה <ol> - תכונות ARIA: הדף הנוכחי מסומן עם
aria-current="page" - ניווט במקלדת: כל הקישורים נגישים דרך Tab עם אינדיקטורים נראים למיקוד
- ידידותי לקוראי מסך: מבנה סמנטי תקין מכריז על הקשר הניווט
- ניגודיות צבע: עומד בתקני WCAG 2.1 AA (מינימום 4.5:1)
- עיצוב רספונסיבי: מתאים לתצוגות מובייל, טאבלט ודסקטופ
- תמיכה בערכות נושא: עובד עם מצב בהיר, מצב כהה וערכת Black Trigram
הוראות שימוש
<nav aria-label="Breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/section.html">Section</a>
</li>
<li class="breadcrumb-item" aria-current="page">
Current Page
</li>
</ol>
</nav>
רשימת בדיקה לבדיקות
- ✅ ניווט במקלדת (Tab, Shift+Tab, Enter)
- ✅ הכרזות קורא מסך (בדיקה עם NVDA, JAWS או VoiceOver)
- ✅ ניגודיות צבע עומדת ב-WCAG 2.1 AA (4.5:1 לטקסט רגיל)
- ✅ עיצוב רספונסיבי עובד בכל גדלי תצוגה
- ✅ אינדיקטורי מיקוד נראים בבירור
- ✅ מצבי ריחוף מספקים משוב ויזואלי
- ✅ עובד במצב בהיר ובמצב כהה
- ✅ עובד עם ערכת Black Trigram