דוגמת רכיב פירורי לחם

דוגמת פירורי לחם דו-שכבתיים

זה מציג מסלול פירורי לחם פשוט: ראשי > תכונות (דף נוכחי)

דוגמת פירורי לחם תלת-שכבתיים

זה מציג מסלול פירורי לחם עמוק יותר: ראשי > סוכנות מודיעין אזרחי > תכונות (דף נוכחי)

דוגמת פירורי לחם ארבע-שכבתיים

זה מציג מסלול פירורי לחם עמוק עוד יותר עם ארבע רמות של היררכיית ניווט.

תכונות נגישות

• 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