נגישות 7 במאי 2026

Skip Link בוורדפרס: דלג לתוכן ראשי בלחיצת Tab

Skip link מאפשר לגולשי מקלדת לדלג מעל ניווט חוזר. כך מוסיפים אותו לתבנית עם CSS שמופיע רק ב-focus.

Skip link הוא הקישור הראשון בעמוד, שמופיע רק כשגולש מקלדת לוחץ Tab בפעם הראשונה. הוא מאפשר לדלג מעל header, תפריט וסיידבר ולהגיע ישר לתוכן הדף - חוויה הכרחית לעיוור עם קורא מסך, וגם למשתמש שמנווט במקלדת בלעדית.

למה זה משנה

כשגולש מקלדת לוחץ Tab בפעם הראשונה בדף, ה-focus עובר לקישור הראשון. בלי skip link, הקישור הראשון הוא הלוגו, אחר כך פריט תפריט ראשון, אחר כך פריט שני... וכך הלאה דרך 30-50 פריטים בכל דף. אם המשתמש ביקר ב-10 דפים באתר, הוא עבר 300+ Tab רק כדי לדלג על תוכן שהוא כבר ראה.

זוהי דרישה ב-תקני נגישות בינלאומיים רמה A, תקן 2.4.1 Bypass Blocks. הפתרון הסטנדרטי: שים את הקישור "דלג לתוכן הראשי" כקישור הראשון, מקושר ל-#main. בכל דף, Tab ראשון יחשוף את הקישור; Enter יקפיץ ל-<main id="main">; משם המשתמש ממשיך לקרוא את התוכן.

איך לזהות

פתח את האתר ולחץ Tab פעם אחת. אם רואה קישור "דלג לתוכן" שמופיע - יש לך skip link. אם הקישור הראשון הוא הלוגו או פריט תפריט - אין skip link. כלי בדיקה: axe DevTools מסמן "Page should have a skip link". בדיקה אוטומטית של RankPlus מחפשת בשורות הראשונות של ה-HTML קישור עם href="#main" או href="#content" או טקסט שמכיל "skip" / "דלג".

איך לתקן

פתח את header.php של התבנית הפעילה (wp-content/themes/THEME/header.php).
הוסף את הקישור מיד אחרי <body> ולפני <header> או <nav>:
```
<a class="skip-link" href="#main">
    דלג לתוכן הראשי
</a>
```
ודא שלאלמנט התוכן הראשי יש id="main" ו-tabindex="-1" כדי שיוכל לקבל focus:
```
<main id="main" tabindex="-1">
    
</main>
```

הוסף ל-style.css של תבנית הילד את ה-CSS שמסתיר את הקישור עד focus:

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #ffd700;
    outline-offset: 2px;
}

בדוק עם המקלדת: לחץ Tab בעמוד הבית - הקישור הראשון אמור להופיע למעלה. לחץ Enter - הקפיצה ל-main.
תבניות מודרניות (Astra, GeneratePress, Twenty Twenty-Four, Twenty Twenty-Five) כבר כוללות skip link מובנה. אל תוסיף עוד אחד - תקבל כפילות.
ב-FSE (block themes) ב-WordPress 6.0+: ערוך את parts/header.html או הוסף block קוד HTML עם הקישור.

טעויות נפוצות

display:none על skip link: זה גם מסתיר אותו מקורא מסך. השתמש ב-position: absolute; top: -40px שמסתיר ויזואלית בלבד.
קישור ל-id שלא קיים: href="#main" אבל אין id="main" בדף. בדוק את התבנית.
Skip link אחרי header: מאבד את התועלת. חייב להיות הקישור הראשון בדף.
שני skip links: התבנית מספקת אחד ואתה הוספת עוד. בדוק לפני הוספה.
צבע נמוך-ניגוד ב-focus: הקישור צריך להיות ברור ומובחן. שחור-לבן או צבע מותג עם ניגודיות 7:1.

בדיקה לאחר תיקון

פתח את האתר, לחץ Tab. הקישור "דלג לתוכן" אמור להופיע. לחץ Enter - הקפיצה ל-main. הרץ axe DevTools - הקטגוריה "Bypass Blocks" אמורה להיות ירוקה. ב-NVDA - לחץ Tab, אמור להישמע "דלג לתוכן הראשי, קישור". RankPlus יחזור לירוק.

טיפ: אם תבנית מודרנית כבר מספקת skip link אבל הוא לא מופיע - לעיתים זה כי תוסף page builder עוטף את כל הדף ב-div שמסתיר את ה-position absolute. בדוק את ה-z-index ו-overflow של ה-wrapper.

עוד בקטגוריה זו ← חזרה לכל המדריכים