ניווט במקלדת: מיקוד, סדר ומלכודות
אנשים רבים מנווטים בלי עכבר: עם מקלדת, מתג או תוכנת דיבור. לכן WCAG דורש שכל פעולה באתר תהיה אפשרית במקלדת (2.1.1), שהמיקוד ייראה בכל רגע (2.4.7), שהסדר שלו יהיה הגיוני (2.4.3), ושאף רכיב לא "ילכוד" את המיקוד (2.1.2). את כל אלה בודקים בעשר דקות עם מקש Tab.
נבדק מול המקורות:
בקצרה
- 2.1.1: כל פעולה אפשרית במקלדת.
- 2.1.2: אין מלכודת מקלדת.
- 2.4.3: סדר מיקוד הגיוני.
- 2.4.7: מיקוד נראה. outline: none בלי חלופה הוא כשל.
המקשים
| מקש | מה אמור לקרות |
|---|---|
| Tab / Shift+Tab | מעבר לרכיב הבא / הקודם |
| Enter | הפעלת קישור או כפתור |
| רווח | הפעלת כפתור, סימון תיבת סימון |
| חיצים | מעבר בתוך קבוצת כפתורי רדיו, תפריט או לשוניות |
| Esc | סגירת חלון קופץ או תפריט |
מיקוד נראה
הכשל הנפוץ: עיצוב שמוחק את מסגרת המיקוד של הדפדפן. הפתרון הוא לא להחזיר את המסגרת הכחולה, אלא לעצב מסגרת משלכם:
:focus-visible {
outline: 3px solid #3a2a8c;
outline-offset: 2px;
}טיפ: focus-visible מציג את המסגרת רק למי שמנווט במקלדת, ולא אחרי לחיצת עכבר. כך שני הצדדים מרוצים.
חלונות קופצים ותפריטים
- כשחלון נפתח, המיקוד עובר אליו.
- Tab לא יוצא מהחלון אל הדף שמאחוריו כל עוד הוא פתוח.
- Esc סוגר, והמיקוד חוזר לכפתור שפתח את החלון.
- תפריט מובייל: כפתור ההמבורגר מוכרז בשם ומדווח אם התפריט פתוח (aria-expanded).
<button aria-expanded="false" aria-controls="menu">תפריט</button>קישור דילוג
הדבר הראשון שמקבל מיקוד בדף צריך להיות קישור "דילוג לתוכן" שמוביל לתוכן הראשי. הוא יכול להיות מוסתר עד שמגיעים אליו במקלדת. זה עונה על סעיף 2.4.1.
<a href="#main" class="skip">דילוג לתוכן</a>
...
<main id="main">שאלות נפוצות
איך בודקים נגישות מקלדת?
לוחצים Tab מתחילת הדף עד סופו: בכל רגע רואים איפה המיקוד, הסדר הגיוני, וכל תפריט, טופס וחלון עובדים עם Enter, רווח ו-Esc.
מותר להסתיר את מסגרת המיקוד?
רק אם מחליפים אותה במסגרת אחרת שנראית היטב. מחיקה בלי חלופה היא כשל בסעיף 2.4.7.
מה זו מלכודת מקלדת?
רכיב שנכנסים אליו עם Tab ואי אפשר לצאת ממנו במקלדת, למשל נגן וידאו מוטמע או חלון קופץ שבור.
מקורות
המידע בדף מבוסס על: WCAG 2.0 (W3C, 2008) (נפתח בחלון חדש) · תרגום WCAG 2.0 לעברית (איגוד האינטרנט הישראלי) (נפתח בחלון חדש)