מעקף בלוקים הוא מנגנון שמאפשר למשתמש מקלדת או קורא מסך לדלג על אזורים שחוזרים בכל עמוד, כמו התפריט העליון, ולהגיע ישר לתוכן. הדרך הנפוצה היא קישור "דלג לתוכן הראשי", שמופיע בלחיצת ה-Tab הראשונה בעמוד. זו דרישה של WCAG 2.4.1 ברמה A, ולכן גם של תקן 5568.
למה צריך מעקף בלוקים
תחשבו על אתר מכירות עם תפריט של 40 קטגוריות. משתמש עכבר פשוט גולל. משתמש מקלדת צריך ללחוץ Tab 40 פעמים, בכל עמוד, לפני שהוא מגיע למוצר. מעקף בלוקים חוסך לו את זה בלחיצה אחת.
איך מעקף בלוקים עובד
- המשתמש נכנס לעמוד ולוחץ Tab.
- הרכיב הראשון שמקבל פוקוס הוא קישור "דלג לתוכן הראשי". הוא יכול להיות מוסתר, אבל חייב להופיע על המסך כשהוא מקבל פוקוס.
- המשתמש לוחץ Enter.
- הפוקוס עובר לתחילת התוכן הראשי, וה-Tab הבא ממשיך משם.
5 בדיקות למתכנת
- הוא באמת ראשון. לא אחרי הלוגו, ולא אחרי כפתור צף של תוסף או צ'אט.
- הוא נראה בפוקוס. קישור שמוסתר לגמרי גם כשיש עליו פוקוס לא עוזר למשתמש מקלדת שרואה.
- הפוקוס באמת עובר. לא רק גלילה. היעד צריך להיות אזור שיכול לקבל פוקוס, למשל אזור התוכן הראשי עם tabindex="-1". הסברתי את זה במדריך יצירת פוקוס.
- היעד נכון. תחילת התוכן הראשי, לא תחילת העמוד ולא הכותרת התחתונה.
- הטקסט ברור. "דלג לתוכן הראשי" ולא "Skip" או אייקון.
רוצים לדעת אם מעקף הבלוקים שלכם עובד?
נבדוק אותו, ואת כל הניווט במקלדת באתר.
מעקף בלוקים זה לא רק קישור
WCAG 2.4.1 מאפשר גם דרכים אחרות. אזורי ציון דרך (landmarks), כמו header, nav ו-main, וכותרות בהיררכיה נכונה, מאפשרים למשתמשי קורא מסך לקפוץ ישר לאזור. אבל משתמש מקלדת בלי קורא מסך לא יכול להשתמש בהם. לכן בפועל עושים את שניהם: קישור דילוג, ומבנה עם landmarks.
אם התפריט שלכם ארוך, כדאי לבדוק גם איך הוא עצמו מתנהג במקלדת. כתבתי על זה במדריך איך מנגישים תפריטים. ועוד תיקונים קטנים מהסוג הזה תמצאו במאמר הנגשת אתר בקוד. פרטים על בדיקה מלאה בעמוד הנגשת אתרים.
שאלות נפוצות על מעקף בלוקים
מה זה מעקף בלוקים?
מנגנון שמאפשר לדלג על אזורים שחוזרים בכל עמוד, כמו התפריט, ולהגיע ישר לתוכן. בדרך כלל זה קישור "דלג לתוכן הראשי".
זה חובה?
כן. זה סעיף 2.4.1 ב-WCAG ברמה A, שתקן 5568 מאמץ.
הקישור יכול להיות מוסתר?
כן, עד שהוא מקבל פוקוס. אז הוא חייב להופיע על המסך.
מספיק שיש landmarks וכותרות?
הם עוזרים למשתמשי קורא מסך. משתמש מקלדת בלי קורא מסך צריך קישור דילוג.
איך בודקים שקישור הדילוג עובד?
נכנסים לעמוד, לוחצים Tab פעם אחת, ובודקים שהקישור מופיע. לוחצים Enter, ובודקים שה-Tab הבא נמצא בתוכן הראשי.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.