נושא הפוקוס הוא מהחשובים ביותר בהנגשה – אך לצערנו, הוא גם אחד המוזנחים ביותר. פוקוס הוא מצב שבו משתמש מתמקד באלמנט כלשהו בממשק, מבלי לבצע פעולה נוספת. מבחינת התנהגות, זה דומה למצב "ריחוף" (hover) עם העכבר – אך פוקוס מופעל בעיקר באמצעות המקלדת או טכנולוגיות מסייעות, ולא בעזרת עכבר.
פוקוס הוא קריטי עבור אנשים שאינם משתמשים בעכבר – למשל משתמשים עם מגבלות מוטוריות, משתמשי מקלדת בלבד, וכמובן – משתמשים עם עיוורון או לקויות ראייה שמסתייעים בקוראי מסך.
אילו אלמנטים צריכים לקבל פוקוס?
כל אלמנט שהוא אינטראקטיבי – כלומר, דורש מהמשתמש פעולה, תגובה או קבלת החלטה – חייב להיות נגיש באמצעות מקלדת, ולכן חייב לקבל פוקוס תקין וברור.
אלמנטים שחייבים לקבל פוקוס:
- קישורים (<a href="...">)
- כפתורים (<button>, <input type="submit">, וכדומה)
- שדות טפסים
- label כאשר יש בו התנהגות מיוחדת
- אלמנטים מותאמים אישית שמתנהגים כמו כפתור או תפריט (למשל <div role="button">)
- מודאלים, תיבות דיאלוג, טאביים, קומבובוקסים וכו' – כל רכיב שנפתח, נסגר או משפיע על התצוגה בזמן אמת.
- אזורי התראות דינמיים שיש לתקשר איתם.
- אייקונים לחיצים או כפתורי פעולה, כמו כפתור סינון, פתיחת תפריט, "הוסף לעגלה", "הצג עוד" וכו'.
- קישורים בתוך גלריות, קארוסלים, סלאיידרים וכדומה – כל מה שמשמש לניווט בין תכנים.
אם מדובר באלמנט שאינו מקבל פוקוס כברירת מחדל (כמו <div>, <span>), אך משמש לפעולה – יש להוסיף לו tabindex="0" ולוודא שיש לו תפקיד מוגדר (role) ותגובת פוקוס נראית.
אילו אלמנטים לא צריכים לקבל פוקוס?
ישנם אלמנטים שאין טעם או צורך להכניס לרצף הפוקוס – פעולה כזו תכביד על משתמשים, תבלבל את קורא המסך, ותקשה על הניווט במקלדת.
- כותרות (<h1>–<h6>) – אלא אם יש להן התנהגות לחיצה.
- פסקאות (<p>) וטקסטים רגילים.
- תווי קישוט בלבד – כמו אייקון גרפי שאין לו משמעות פעולה.
- תמונות שאינן לחיצות.
- תוויות קבועות כמו <label> או <legend> – אלא אם יש להן אלמנט מקושר לחיץ.
- רכיבי עיצוב בלבד – כמו רקעים, קווים, תיבות נוי, אזורי תוכן שאינם אינטראקטיביים.
- לינקים ריקים או <a> ללא href – אסור להשתמש בהם כלל.
טיפ חשוב:
יש להימנע לחלוטין מהוספת tabindex="0" לאלמנטים רק כדי לאפשר להם להיות "נגישים ויזואלית" – אם האלמנט אינו משמש לפעולה, הוא לא צריך להיות פוקוסבילי.
הוספת פוקוס לאלמנטים נוספים
אם ברצונכם לאפשר לאלמנט שאינו מקבל פוקוס כברירת מחדל (כמו <div> או <span>) להיות נגיש גם במקלדת – יש להשתמש במאפיין:
tabindex="0"
מאפיין זה מכניס את האלמנט לתור הטבעי של מעבר הפוקוס.
לעומת זאת, אם יש אלמנט שאתם רוצים למנוע ממנו קבלת פוקוס, יש להוסיף:
tabindex="-1"
מצב זה שימושי בעיקר עבור אלמנטים זמניים, הודעות מערכת, או כאשר לא רוצים להפריע לרצף הניווט.
פוקוס לפי סדר מותאם
כאשר מוסיפים tabindex עם ערך גבוה מ־0 (למשל: tabindex="1", tabindex="2" וכו') – אנו קובעים סדר פוקוס מותאם לפי עדיפות. שימוש בטכניקה זו עלול לגרום לבלבול חווייתי אם אינו מבוצע בזהירות. לכן, ההמלצה היא להשתמש בכך רק כאשר יש צורך מובהק, ולא ככלל.
עיצוב פוקוס – חובה ולא רשות
מבחינה ויזואלית, כאשר אלמנט נמצא בפוקוס, עליו להיות מובחן באופן ברור. ברירת המחדל של דפדפנים היא להציג מסגרת פוקוס (outline), לרוב בצבע כחול.
חשוב מאוד לא להסיר את הפוקוס בעזרת CSS. אם בכל זאת בוחרים לבטל את ה־outline – חובה לספק תחליף ויזואלי ברור שיאפשר למשתמש לדעת היכן הוא נמצא.
לדוגמה:
a:focus {
outline: 3px dotted #00FF00;
}
ביטול מוחלט של outline מבלי תחליף – מהווה הפרה של תקן נגישות, ומקשה מאוד על משתמשים המנווטים באמצעות מקלדת בלבד.
לסיכום
פוקוס הוא אמצעי חיוני לנגישות, לניווט תקין ולחוויית משתמש שוויונית. אל תזלזלו בו. ודאו שכל אלמנט לחיץ נגיש גם באמצעות מקלדת, והבליטו אותו בצורה ברורה כאשר הוא בפוקוס. כך תבטיחו שימוש נוח ובטוח לכלל המשתמשים – בלי יוצא מן הכלל.