קריטריון 2.4.3: סדר פוקוס רמה A
בקצרה
קריטריון 2.4.3 סדר פוקוס (Focus Order, רמה A) דורש שכאשר ניתן לנווט ברצף בעמוד (למשל באמצעות Tab), סדר הפוקוס ישמר את המשמעות ואת יכולת התפעול. לחיצות Tab צריכות לעבור בין אלמנטים בסדר הגיוני ועקבי עם הצגת התוכן. זהו קריטריון מחייב לפי ת"י 5568.
פרטי הקריטריון
| מספר | 2.4.3 |
|---|---|
| שם | סדר פוקוס (Focus Order) |
| רמה | A |
| גרסה | WCAG 2.0 |
| עיקרון | 2 - ניתן לתפעול (Operable) |
| הנחיה | 2.4 - ניווט |
| מחייב לפי ת"י 5568 | כן |
מה דורש קריטריון 2.4.3?
הקריטריון דורש שבעמוד שניתן לנווט בו ברצף (כלומר שיש בו יותר ממספר אלמנטים אינטראקטיביים), סדר קבלת הפוקוס ישמר את המשמעות ואת יכולת התפעול. הכוונה היא שכאשר המשתמש לוחץ Tab שוב ושוב, הפוקוס עובר בין האלמנטים בסדר הגיוני - בדרך כלל מלמעלה למטה ומימין לשמאל בדפי RTL. בעיות נפוצות שעלולות לשבש זאת:
- שימוש בערכי
tabindexחיוביים (tabindex="1",tabindex="2"...) שיוצרים רצף שונה ממבנה ה-DOM. - אלמנטים ממוקמים ב-CSS בצורה שאינה עקבית עם סדרם במקור ה-HTML.
- חלונות קופצים (modals) שנפתחים מבלי שהפוקוס עובר אליהם.
- תוכן שנטען דינמית (AJAX) ללא ניהול פוקוס מכוון.
למי זה עוזר?
הקריטריון מסייע למשתמשי מקלדת בלבד - לרבות אנשים עם מוגבלויות מוטוריות שאינם משתמשים בעכבר. הוא חשוב גם למשתמשי קורא מסך שמאזינים לתוכן ברצף ומסתמכים על סדר הגיוני, וכן לאנשים עם לקויות קוגניטיביות שצפויות לניווט עקבי ומשתבשים מקפיצות לא צפויות.
איך עומדים בקריטריון?
- שמרו על סדר DOM עקבי עם הסדר החזותי - אל תסמכו על CSS לבדו לשינוי סדר הצגה.
- הימנעו משימוש בערכי
tabindexחיוביים; השתמשו ב-tabindex="0"בלבד להוספת אלמנטים לרצף הטבעי. - בפתיחת חלון קופץ (modal/dialog) - העבירו את הפוקוס לתוכו באמצעות JavaScript.
- בסגירת חלון קופץ - החזירו את הפוקוס לאלמנט שפתח אותו.
- בתוכן המוזן דינמית - ניהלו את הפוקוס בצורה מכוונת כדי שהמשתמש יידע שמשהו השתנה.
טיפ
כלי הפיתוח של הדפדפן מאפשרים לראות את סדר ה-DOM בפועל - זה אינו בהכרח תואם לסדר החזותי כאשר נעשה שימוש נרחב ב-CSS flexbox/grid עם order.
איך בודקים?
- בדיקה ידנית: נווטו בכל העמוד עם Tab בלבד ובדקו שהפוקוס עובר בסדר הגיוני ועקבי עם הצגה החזותית.
- בדקו שחלונות קופצים מקבלים פוקוס בפתיחה ומחזירים אותו לאלמנט הפותח בסגירה.
- קורא מסך: הקשיבו לרצף ש-NVDA או VoiceOver מקריאים - האם הוא הגיוני?
- בדקו ש-
tabindexחיוביים אינם בשימוש (חיפוש בקוד המקור).
שאלות נפוצות
מה דורש קריטריון 2.4.3?
הקריטריון דורש שבעמוד הניתן לניווט ברצף, סדר הפוקוס של האלמנטים ישמר את המשמעות ואת יכולת התפעול. כלומר, לחיצות Tab עוקבות צריכות לעבור בין אלמנטים בסדר הגיוני ועקבי עם הצגת התוכן.
מהי רמת הקריטריון 2.4.3?
רמה A - הרמה הבסיסית ביותר. הקריטריון נכלל ב-WCAG 2.0 ולכן הוא מחייב לפי ת"י 5568.
האם tabindex משפיע על סדר הפוקוס?
כן. שימוש בערכי tabindex חיוביים (1, 2, 3...) יכול לשבש את סדר הפוקוס הטבעי ולגרום לניווט לא צפוי. מומלץ להשתמש רק ב-tabindex="0" להוספת אלמנט לרצף הטבעי, ו-tabindex="-1" להסרתו ממנו.
מקורות
- W3C - Understanding SC 2.4.3 Focus Order (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות