מהו מצב :focus?
כאשר אתם רוצים ללחוץ על כפתור או קישור באתר אתם רואים איפה העכבר ואז מזיזים אותו לכפתור הרצוי. אתם יודעים שהגעתם למקום הנכון כאשר אתם רואים את סמן העכבר מעל הכפתור או הקישור שבחרתם. כאשר משתמשים רק במקלדת ורוצים להפעיל קישור או כפתור לא רואים את סמן העכבר כי הוא לא בשימוש ולכן צריך אלטרנטיבה אחרת שתראה למשתמש איכן הוא נמצא.
:focus הוא מצב שבו אלמנט בממשק נמצא במוקד הפעולה – כלומר, המשתמש מתמקד בו לצורך לחיצה או הפעלה. זה קורה בדרך כלל כאשר:
- המשתמש לוחץ על האלמנט בעזרת העכבר
- המשתמש מנווט אליו באמצעות מקלדת (למשל TAB)
- האלמנט מקבל פוקוס תכנותי דרך JavaScript
כאשר אלמנט נמצא במצב :focus, הדפדפן מציג סימן חזותי – לרוב מסגרת כחולה או קו תחתי – שמראה למשתמש היכן הוא נמצא כרגע בעמוד.
למה :focus חשוב לנגישות?
עבור משתמשים רבים, ובעיקר:
- אנשים המנווטים בעזרת מקלדת בלבד
- משתמשים עם מוגבלויות מוטוריות
- עיוורים המשתמשים ב־קורא מסך
- מי שמתקשים בשימוש בעכבר (כולל משתמשי טאץ')
היכולת לדעת "איפה אני נמצא" בממשק – קריטית. הפוקוס הוא הדרך שלהם להתמצא, לנווט, ולהשתמש באתר באופן עצמאי.
טעויות נפוצות שגורמות לפגיעה בנגישות
- ביטול מוחלט של outline
רבים מסירים את ההדגשה ברירת המחדל של הפוקוס (outline) מטעמי עיצוב. פעולה זו מונעת ממשתמשים לזהות את מיקומם, ומהווה הפרת תקן נגישות (WCAG 2.1 – סעיף 2.4.7). - התמקדות רק בעיצוב עכבר (hover)
עיצוב אינטראקטיבי שלא מגיב גם ל־:focus – לא נגיש למשתמשי מקלדת. - אלמנטים שלא מקבלים פוקוס
למשל: <div> או <span> שכוללים פעולות, אך לא מוגדרים עם tabindex="0" – אינם נגישים למקלדת.
המלצות מעשיות לשימוש ב־:focus
- תמיד שמרו על הדגשה ברורה לפוקוס
אם אתם מעצבים מחדש את הפוקוס, עשו זאת בצורה נראית וברורה: - אל תשתמשו ב־outline: none בלי תחליף ברור
הסרת הפוקוס לחלוטין מונעת ממשתמשים לנווט באתר. - הוסיפו tabindex="0" לרכיבים אינטראקטיביים בהתאמה אישית
אלמנטים שאינם נגישים כברירת מחדל – אך משמשים לפעולה (למשל <div role="button">) – צריכים לקבל פוקוס במפורש. - ודאו שהפוקוס נראה גם במצבי ניגודיות גבוהה
משתמשים שמפעילים מצב High Contrast במערכת ההפעלה נשענים לעיתים על outline, משום שהוא נותר גלוי גם כששאר הצבעים נעלמים.
לסיכום
מצב :focus הוא עמוד תווך בנגישות דיגיטלית. לא מדובר בפיצ’ר עיצובי – אלא בצורך בסיסי המאפשר למשתמשים להתמצא, לנווט ולבצע פעולות. עיצוב נכון לפוקוס משדרג את חוויית השימוש – לכולם.