ניווט במקלדת: מה התקן דורש ואיך בודקים ב-5 דקות
ניווט במקלדת הוא הבדיקה הראשונה שאני עושה בכל אתר, והיא לא דורשת שום כלי. מניחים את העכבר בצד, לוחצים Tab, ורואים מה קורה. משתמשים עיוורים, אנשים עם מוגבלות מוטורית או רעד, ומי ששבר יד, כולם גולשים ככה. אם משהו באתר עובד רק בעכבר, בשבילם הוא לא קיים.
מה התקן דורש בניווט במקלדת
| קריטריון (WCAG 2.0) | רמה | מה הוא אומר |
|---|---|---|
| 2.1.1 מקלדת | A | כל פעולה באתר אפשרית במקלדת |
| 2.1.2 בלי מלכודת מקלדת | A | אם נכנסים לרכיב עם Tab, אפשר גם לצאת ממנו |
| 2.4.1 מעקף בלוקים | A | דרך לדלג על תוכן שחוזר בכל עמוד, כמו התפריט |
| 2.4.3 סדר פוקוס | A | סדר הניווט הגיוני ושומר על המשמעות |
| 2.4.7 פוקוס נראה | AA | תמיד רואים איפה הפוקוס |
איך בודקים סדר ניווט ב-5 דקות
- פתחו את דף הבית ולחצו Tab. הפוקוס הראשון צריך להיות קישור "דלג לתוכן", או התפריט.
- המשיכו עם Tab לאורך העמוד. בכל עצירה, רואים איפה אתם? הסדר תואם את מה שרואים על המסך?
- בתפריט: אפשר לפתוח תת-תפריט עם Enter, רווח או חצים? אפשר לצאת ממנו?
- בטופס: מגיעים לכל שדה ולכפתור השליחה? רואים הודעת שגיאה?
- בחלון קופץ: הפוקוס עובר לתוכו? אפשר לסגור עם Esc? הפוקוס חוזר למקום שבו הייתם?
- Shift+Tab מחזיר אחורה באותו סדר.
האתר שלכם עובר את בדיקת ה-Tab?
נבדוק את כל התבניות ונחזיר רשימת תיקונים.
איפה זה נשבר הכי הרבה
תפריטים עליונים שנפתחים רק בריחוף, סליידרים, גלריות, טפסים עם שדות מותאמים, וחלונות קופצים שלוכדים את הפוקוס. ברוב המקרים הסיבה היא רכיב שנבנה מ-div במקום מכפתור או מקישור, או שימוש לא נכון ב-tabindex. וכשהפוקוס עובד אבל לא רואים אותו, הפתרון הוא סימון פוקוס ברור.
בבדיקה מלאה אנחנו עוברים כך על כל תבנית באתר, ולכל ליקוי מצוין איפה הוא ואיך מתקנים. פרטים בעמוד הנגשת אתרים.
שאלות נפוצות על ניווט במקלדת
מה זה ניווט במקלדת?
גלישה באתר בלי עכבר: Tab כדי להתקדם, Shift+Tab כדי לחזור, ו-Enter, רווח וחצים כדי להפעיל.
מי משתמש בניווט במקלדת?
משתמשי קורא מסך, אנשים עם מוגבלות מוטורית או רעד, ומשתמשים זמניים, למשל עם יד שבורה.
מה זו מלכודת מקלדת?
רכיב שנכנסים אליו עם Tab ואי אפשר לצאת ממנו.
איך בודקים סדר ניווט?
לוחצים Tab לאורך העמוד ובודקים שהסדר הגיוני ושהפוקוס תמיד נראה.
איזה קריטריון בתקן?
2.1.1 בעיקר, ואיתו 2.1.2, 2.4.1, 2.4.3 ו-2.4.7.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.