→ חזרה לבלוג

ניווט מקלדת באתר - למה זה הכרחי ואיך מיישמים

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

למה ניווט מקלדת הוא הכרחי?

ניווט מקלדת הוא לא רק "נחמד שיש" - הוא דרישה מחייבת לפי תקן WCAG ברמת A (הרמה הבסיסית ביותר). קריטריון הצלחה 2.1.1 קובע בצורה חד-משמעית: "כל הפונקציונליות של התוכן ניתנת להפעלה באמצעות ממשק מקלדת". זה אומר שכל דבר שאפשר לעשות עם עכבר חייב להיות אפשרי גם עם מקלדת בלבד.

מי בדיוק תלוי בניווט מקלדת?

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

סדר Tab - הבסיס של ניווט מקלדת

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

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

• CSS משנה את הסדר הוויזואלי: שימוש ב-flexbox עם order, או ב-CSS Grid, יכול לשנות את מיקום האלמנטים על המסך בלי לשנות את סדרם ב-HTML. התוצאה: פוקוס שקופץ ממקום למקום באופן לא צפוי.
• שימוש שגוי ב-tabindex: tabindex עם ערך חיובי (tabindex="1", tabindex="5") שובר את הסדר הטבעי ויוצר חוויה מבלבלת. הכלל: אל תשתמשו לעולם ב-tabindex חיובי.
• תוכן דינמי: אלמנטים שנוספים לדף דינמית (באמצעות JavaScript) עלולים להיכנס למקומות לא צפויים בסדר ה-Tab.

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

מחווני פוקוס (Focus Indicators) - לראות איפה אתה

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

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

איך ליצור מחוון פוקוס טוב:

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

קישורי דילוג (Skip Links) - קיצור דרך חיוני

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

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

מימוש נכון כולל:

1. קישור <a href="#main"> כאלמנט הראשון ב-body.
2. CSS שמסתיר את הקישור ומציג אותו רק ב-:focus.
3. id="main" על אלמנט התוכן הראשי (בדרך כלל <main>).
4. tabindex="-1" על אלמנט היעד (main) בדפדפנים ישנים שלא מעבירים פוקוס לעוגנים.

באתר מנגיש, קישור הדילוג "דלג לתוכן העיקרי" קיים בכל דף ומאפשר לדלג ישירות לתוכן הרלוונטי.

ניהול פוקוס באלמנטים דינמיים

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

פתיחת חלון מודאלי (Modal): כשנפתח חלון מודאלי, הפוקוס חייב לעבור אליו. יש ליצור "מלכודת פוקוס" (focus trap) שמונעת מהמשתמש לנווט באמצעות Tab לאלמנטים מאחורי המודאל. כשהמודאל נסגר, הפוקוס חייב לחזור לאלמנט שפתח אותו.

הוספת תוכן דינמי: כשנטען תוכן חדש (למשל "טען עוד" ברשימה), הפוקוס צריך לעבור לתוכן החדש כדי שמשתמש מקלדת ידע שמשהו השתנה ויוכל לגשת לתוכן החדש.

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

ניווט בין עמודים (SPA): באפליקציות עמוד יחיד (Single Page Application), מעבר בין "עמודים" לא גורם לרענון הדף. הפוקוס חייב לעבור לכותרת העמוד החדש או לתחילת התוכן החדש, ורצוי להכריז על השינוי באמצעות aria-live.

בדיקות ניווט מקלדת - איך לוודא שהכל עובד

הבדיקה הפשוטה והאפקטיבית ביותר לניווט מקלדת: נתקו את העכבר ונסו להשתמש באתר. כן, זה כל כך פשוט. עברו על כל דף ובדקו:

1. האם ניתן להגיע לכל אלמנט אינטראקטיבי? לחצו Tab שוב ושוב ובדקו שהפוקוס מגיע לכל כפתור, קישור ושדה טופס.
2. האם מחוון הפוקוס גלוי? בכל רגע אתם צריכים לראות איפה הפוקוס נמצא. אם הפוקוס "נעלם" - יש בעיה.
3. האם הסדר הגיוני? הפוקוס צריך לנוע בסדר שתואם את המבנה הוויזואלי של הדף.
4. האם ניתן להפעיל כל פונקציה? נסו ללחוץ Enter ו-Space על כפתורים. נסו לפתוח תפריטים נפתחים. נסו לשלוח טפסים.
5. האם אין "מלכודות מקלדת"? ודאו שאתם לא נתקעים באלמנט שאי אפשר לצאת ממנו באמצעות Tab או Escape.

כלים אוטומטיים כמו Lighthouse, axe DevTools ו-WAVE יכולים לזהות חלק מבעיות ניווט המקלדת, אך בדיקה ידנית היא הכרחית. שום כלי אוטומטי לא יכול לבדוק אם סדר ה-Tab "הגיוני" - לזה צריך עין אנושית.

איך מנגיש מסייע לניווט מקלדת

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

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

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