סימון פוקוס הוא השינוי החזותי שמראה לגולש איפה הוא נמצא בעמוד כשהוא מנווט במקלדת: מסגרת, קו תחתון או שינוי צבע סביב הקישור, הכפתור או השדה הפעיל. לפי WCAG (קריטריון 2.4.7), שת"י 5568 מאמץ, כל רכיב שאפשר להגיע אליו במקלדת חייב להראות סימון פוקוס ברור. בלי סימון כזה, גולש שלא משתמש בעכבר פשוט לא יודע איפה הוא.
נסו את זה עכשיו: היכנסו לאתר שלכם, הניחו את העכבר בצד ולחצו Tab כמה פעמים. אתם רואים איפה אתם? בהרבה אתרים שאני בודק, התשובה היא לא. מישהו כתב פעם בקוד outline: none כי המסגרת "לא הייתה יפה", ומאז הפוקוס נעלם.
מי צריך סימון פוקוס?
- אנשים עם מוגבלות מוטורית שלא יכולים להשתמש בעכבר, ומנווטים במקלדת או במתג.
- אנשים עם לקות ראייה חלקית שמשתמשים במקלדת ובהגדלה.
- משתמשים מתקדמים שפשוט עובדים מהר יותר במקלדת, ממלאים טפסים עם Tab ומדלגים בין שדות.
משתמשים שמנווטים במקלדת כל יום מכירים קיצורים שרובנו לא שמענו עליהם. מה שהם צריכים מהאתר הוא דבר אחד פשוט: לראות איפה הם.
איך צריך להיראות סימון פוקוס?
- בולט. מסגרת ברורה (outline) בצבע שמנוגד גם לרכיב וגם לרקע. ב-WCAG 2.1 ומעלה יש דרישה לניגודיות של 3:1 לפחות לרכיבים גרפיים, וזה כלל טוב גם לסימון הפוקוס.
- לא רק צבע. שינוי צבע עדין לבד לא מספיק. אני ממליץ לשלב שני שינויים, למשל מסגרת וגם שינוי רקע.
- בכל הרכיבים. קישורים, כפתורים, שדות טופס, תיבות סימון, תפריטים נפתחים, סליידרים וחלונות קופצים.
- לא מוסתר. רכיב בפוקוס לא צריך להיות מוסתר מאחורי באנר עוגיות, צ'אט או כותרת דביקה.
- בסדר הגיוני. הפוקוס עובר בסדר שתואם את סדר הקריאה. אם הוא קופץ מהכותרת לפוטר ובחזרה, יש בעיה.
שדות טופס: המקום שבו זה הכי כואב
בטופס יצירת קשר, גולש שלא רואה באיזה שדה הוא נמצא יכתוב את הטלפון בשדה של השם, או פשוט יוותר ויעזוב. בשבילכם זה ליד שהלך לאיבוד. סימון פוקוס ברור בשדות הוא אחד התיקונים הקטנים שמשפיעים הכי הרבה על המרות.
הפוקוס נעלם לכם באתר?
השאירו פרטים ונבדוק את הניווט במקלדת בכל התבניות והטפסים.
איך בודקים סימון פוקוס באתר
- פותחים את האתר, לא נוגעים בעכבר.
- לוחצים Tab שוב ושוב. בכל לחיצה צריך לראות בבירור איזה רכיב פעיל. Shift+Tab חוזר אחורה.
- עוברים על כל העמוד: תפריט ראשי, תפריטי משנה, תוכן, טפסים, פוטר.
- פותחים תפריט נפתח או חלון קופץ ובודקים שהפוקוס נכנס אליו, ושאפשר לצאת ממנו עם Esc.
- רושמים כל מקום שבו הפוקוס נעלם, לא ברור, או קופץ למקום לא הגיוני.
זו בדיקה של חמש דקות, ואפשר לעשות אותה בלי שום כלי. על הניווט במקלדת באופן כללי, כולל קיצורים וסדר המעבר, כתבתי במאמר ניווט באמצעות המקלדת.
טיפ למפתחים
אל תמחקו את ה-outline בלי להחליף אותו. אם המסגרת מפריעה בלחיצת עכבר, השתמשו ב-:focus-visible, שמציג את הסימון רק בניווט מקלדת. ואם יש רכיב מותאם אישית שלא מקבל פוקוס בכלל, הפתרון בדרך כלל מתחיל ב-יצירת פוקוס עם tabindex, בזהירות.
שורה תחתונה
סימון פוקוס הוא אחד הדברים הראשונים שאני בודק באתר, כי הוא מגלה מהר אם מישהו חשב על משתמשי מקלדת. התיקון בדרך כלל פשוט, כמה שורות CSS בתבנית, וההשפעה מיידית. ב-WEB-A אנחנו מתקנים את זה כחלק מהנגשת אתרים מקצועית, יחד עם סדר הניווט וכל הרכיבים האינטראקטיביים. רוצים שנבדוק? דברו איתי.
שאלות נפוצות על סימון פוקוס
מה זה סימון פוקוס?
זה השינוי החזותי, בדרך כלל מסגרת, שמראה איזה רכיב בעמוד פעיל כרגע כשמנווטים במקלדת. בזכותו הגולש יודע איפה הוא ומה יקרה כשילחץ Enter.
האם מותר להסתיר את מסגרת הפוקוס?
לא בלי תחליף. אם מסירים את ה-outline, חייבים להציג סימון אחר ברור לפחות באותה מידה. אפשר להשתמש ב-:focus-visible כדי להציג אותו רק בניווט מקלדת.
איך בודקים סימון פוקוס בלי כלים?
לוחצים Tab שוב ושוב בלי לגעת בעכבר. בכל לחיצה צריך לראות בבירור איזה רכיב פעיל. אם הסימון נעלם או קופץ למקום לא הגיוני, צריך לתקן.
מה ההבדל בין סימון פוקוס לסדר הפוקוס?
סימון הפוקוס הוא איך רואים את הרכיב הפעיל. סדר הפוקוס הוא באיזה סדר עוברים בין הרכיבים. שניהם נדרשים, ושניהם נבדקים יחד.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.