קריטריון 2.4.1: דילוג על גושים רמה A

בקצרה

קריטריון 2.4.1 דילוג על גושים (Bypass Blocks, רמה A) דורש שיהיה מנגנון לדילוג מעל גושי תוכן חוזרים - כמו תפריט ניווט - כדי שמשתמשי מקלדת יוכלו להגיע ישירות לתוכן הראשי. הפתרון הנפוץ הוא קישור "דלג לתוכן" בראש העמוד. זהו קריטריון מחייב לפי ת"י 5568.

פרטי הקריטריון

מספר2.4.1
שםדילוג על גושים (Bypass Blocks)
רמהA
גרסהWCAG 2.0
עיקרון2 - ניתן לתפעול (Operable)
הנחיה2.4 - ניווט
מחייב לפי ת"י 5568כן

מה דורש קריטריון 2.4.1?

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

  • קישור "דלג לתוכן" - קישור בראש הדף (לרוב הראשון בסדר ה-Tab) שמוביל ישירות לאזור התוכן הראשי.
  • עיקרי עמוד (landmarks) - שימוש בתגי HTML5 כמו <main>, <nav>, <header> ותפקידי ARIA, המאפשרים לקוראי מסך לנווט בין אזורים.
  • כותרות היררכיות - מבנה כותרות ברור (h1, h2) שמאפשר קפיצה לחלקים שונים בעמוד.

למי זה עוזר?

בעיקר למשתמשי מקלדת בלבד - לרבות אנשים עם מוגבלויות מוטוריות שאינם משתמשים בעכבר, ומשתמשי קורא מסך (עיוורים וכבדי ראייה). ניווט מקלדת רציף דרך תפריטים ארוכים הוא מאמץ עצום ועלול להרתיע מגישה לתוכן. מנגנון דילוג מפחית משמעותית את עומס הלחיצות וחוסך זמן.

איך עומדים בקריטריון?

  • הוסיפו קישור "דלג לתוכן המרכזי" כאלמנט הראשון בגוף הדף (<a class="skip-link" href="#main">).
  • ודאו שהקישור מוביל ל-id="main" על אלמנט <main> או לאזור התוכן הראשי.
  • הקישור יכול להיות מוסתר חזותית ולהופיע רק בעת פוקוס - זה נפוץ ומקובל.
  • השתמשו בתגי מבנה סמנטיים: <header>, <nav>, <main>, <footer>.
  • אם יש מספר אזורי ניווט, תנו לכל <nav> שם ייחודי באמצעות aria-label.

טיפ

קישור הדילוג יכול להיות מוסתר חזותית (באמצעות CSS) ולהופיע רק כאשר הוא מקבל פוקוס. כך הוא אינו מפריע למשתמשים ב-CSS, אך נגיש לחלוטין למשתמשי מקלדת.

איך בודקים?

  • בדיקה ידנית: לחצו Tab בראש עמוד כלשהו ובדקו אם הקישור הראשון (או הקרוב לראשון) מציע דילוג לתוכן.
  • לחצו Enter על הקישור ובדקו שהפוקוס אכן עובר לאזור התוכן הראשי.
  • בדקו בכלי פיתוח שהעמוד כולל <main> ותגי landmark נוספים.
  • קורא מסך (NVDA / VoiceOver): השתמשו בקיצור "d" (NVDA) או "w" (VoiceOver) לניווט בין landmarks ובדקו שכולם מסומנים.
  • כלים אוטומטיים כמו axe יכולים לזהות היעדר landmark ראשי, אך בדיקה ידנית הכרחית לאימות פונקציונלי.

שאלות נפוצות

מה דורש קריטריון 2.4.1?

הקריטריון דורש שיהיה מנגנון שמאפשר למשתמשים לדלג מעל גושי תוכן חוזרים - כמו תפריט ניווט - ולהגיע ישירות לתוכן הראשי. הפתרון הנפוץ הוא קישור "דלג לתוכן" בראש העמוד.

מהי רמת הקריטריון 2.4.1?

רמה A - הרמה הבסיסית ביותר. הקריטריון נכלל ב-WCAG 2.0 ולכן הוא מחייב לפי ת"י 5568.

האם כותרות HTML מספיקות כדי לעמוד בקריטריון 2.4.1?

שימוש עקבי בכותרות היררכיות (h1, h2 וכן הלאה) ובעיקרי עמוד (landmarks) של HTML5 ו-ARIA יכול לספק מענה לדרישה, כיוון שהם מאפשרים לקורא מסך לנווט ישירות לאזורים. עם זאת, קישור דילוג גלוי הוא הפתרון הנגיש ביותר לכלל המשתמשים.

מקורות

צריכים לעמוד בקריטריון הזה באתר שלכם?

ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.

לצ'ק-ליסט הנגישות