מיקוד המקלדת

אנשים רבים משתמשים במקלדת – או בתוכנה או בחומרה שמחקות את הפונקציונליות של מקלדת, כמו מכשיר מתג – כאמצעי הניווט העיקרי שלהם. הסיבות לכך יכולות להיות העדפה אישית, יעילות או חומרה שבורה.

אנשים עם מגבלות פיזיות זמניות, כמו נקע בשורש כף היד או לקויות מוטוריות עדינות כמו תסמונת תעלת שורש כף היד, יכולים לבחור להשתמש במקלדת כדי לנווט. משתמשים עם לקות ראייה או עיוורים יכולים להשתמש במקלדת לניווט בשילוב עם תוכנת ההגדלה או קורא המסך שלהם. עם זאת, הם עשויים להשתמש בפקודות מקשי קיצור שונות כדי לנווט במסך, בהשוואה למשתמשים שרואים.

גם אנשים ללא מוגבלויות יכולים לבחור לנווט באמצעות מקלדת.

תמיכה במקלדת לכל הנסיבות והמגבלות האלה היא קריטית. חלק גדול מנגישות המקלדת מתמקד במיקוד. המונח 'מוקד' מתייחס למרכיב במסך שמקבל קלט באופן פעיל מהמקלדת.

במודול הזה אנחנו מתמקדים במבנה HTML ובסגנון CSS לרכיבים שניתנים להדגשה ולמיקוד באמצעות מקלדת. מודול JavaScript כולל מידע נוסף על ניהול המיקוד ועל הקשות למרכיבים אינטראקטיביים.

סדר התמקדות

האלמנטים שמשתמשים במקלדת יכולים לנווט אליהם נקראים אלמנטים שניתן להתמקד בהם. סדר המיקוד, שנקרא גם סדר Tab או סדר ניווט, הוא הסדר שבו האלמנטים מקבלים מיקוד. סדר המיקוד שמוגדר כברירת מחדל צריך להיות לוגי, אינטואיטיבי ותואם לסדר החזותי של הדף.

ברוב השפות, סדר המיקוד מתחיל בחלק העליון של הדף ומסתיים בחלק התחתון, תוך תנועה משמאל לימין. עם זאת, בשפות מסוימות קוראים מימין לשמאל, ולכן יכול להיות שהשפה הראשית של הדף תחייב סדר אחר של התמקדות.

כברירת מחדל, סדר ההתמקדות כולל אלמנטים של HTML שאפשר להתמקד בהם באופן טבעי, כמו קישורים, תיבות סימון ומקורות קלט של טקסט. אלמנטים של HTML שאפשר להתמקד בהם באופן טבעי כוללים תמיכה מובנית בסדר הכרטיסיות וטיפול בסיסי באירועים של מקלדת.

אפשר לעדכן את סדר ההתמקדות כך שיכלול רכיבים שלא מקבלים בדרך כלל את המיקוד, כמו רכיבי HTML לא אינטראקטיביים, רכיבים מותאמים אישית או רכיבים עם ARIA, ולעקוף את הסמנטיקה הטבעית של המיקוד.

Tabindex

סדר ההעברה של המיקוד מתחיל ברכיבים עם מאפיין tabindex חיובי (אם יש כאלה), וממשיך מהמספר החיובי הקטן ביותר למספר החיובי הגדול ביותר (למשל 1, 2, 3). לאחר מכן הוא ממשיך לרכיבים עם tabindex של אפס לפי הסדר שלהם ב-DOM. כל הרכיבים עם tabindex שלילי יוסרו מרצף ההתמקדות הטבעי.

כשמחילים tabindex של אפס (tabindex="0") על רכיבים שלא ניתן להעביר אליהם את המיקוד בדרך כלל, הם מתווספים לסדר המיקוד הטבעי של הדף בהתאם לאופן שבו הם מופיעים ב-DOM. עם זאת, בניגוד לרכיבי HTML שאפשר להתמקד בהם באופן טבעי, צריך לספק תמיכה נוספת במקלדת כדי שהם יהיו נגישים באופן מלא.

באופן דומה, אם יש לכם רכיב שאפשר להתמקד בו בדרך כלל אבל הוא לא פעיל – למשל לחצן שלא פועל עד ששדה קלט מתמלא – צריך להוסיף לרכיב הזה tabindex שלילי (tabindex="-1"). הוספת ערך שלילי ל-tabindex מאותת לטכנולוגיות מסייעות ולמקלדות שצריך להסיר את הכפתור הזה מסדר המיקוד הטבעי. אבל אל דאגה – אפשר להשתמש ב-JavaScript כדי להחזיר את המיקוד לאלמנט במקרה הצורך.

בדוגמה הזו, מאפיין tabindex נוסף לאלמנטים שלא מקבלים באופן טבעי את המיקוד. שינינו את סדר הרכיבים באמצעות tabindex כדי להמחיש את ההשפעה שלו על סדר המיקוד. זוהי דוגמה למה לא לעשות!

דילוג על קישורים

ברוב האתרים היום יש רשימה ארוכה של קישורי תפריט בכותרת הראשית של הדף, שתמיד זהה בכל הדפים. האפשרות הזו נהדרת לניווט כללי, אבל יכול להיות שהיא תגרום לבעיות אצל משתמשים שמשתמשים רק במקלדת, כי הם לא יוכלו להגיע בקלות לתוכן הראשי של האתר בלי ללחוץ על Tab כמה פעמים.

אחת מהדרכים לדלג על קבוצות של קישורים מיותרים או לא שימושיים היא להוסיף קישור דילוג. קישורי דילוג הם קישורי עוגן שמאפשרים לדלג לקטע אחר באותו דף באמצעות מזהה הקטע, במקום לשלוח את המשתמש לדף אחר באתר או למשאב חיצוני. קישורי דילוג מוסיפים בדרך כלל כרכיב הראשון שאפשר להתמקד בו שמשתמשים נתקלים בו כשהם מגיעים לאתר. הם יכולים להיות גלויים או מוסתרים באופן חזותי עד שמשתמשים מקישים על Tab כדי לעבור אליהם, בהתאם לצורכי העיצוב.

כשמשתמש לוחץ על מקש Tab, והקישור לדילוג פעיל, המיקוד במקלדת עובר לקישור לדילוג. המשתמש יכול ללחוץ על הקישור לדילוג ולדלג על הקטע של הכותרת ועל הניווט הראשי. אם הם לא ילחצו על הקישור לדילוג וימשיכו ללחוץ על Tab ב-DOM, הם יועברו לרכיב הבא שאפשר להתמקד בו.

כמו כל הקישורים, חשוב שקישור הדילוג יכלול הקשר לגבי מטרת הקישור. הוספת הביטוי 'דילוג לתוכן הראשי' מאפשרת למשתמש לדעת לאן הקישור יפנה אותו. יש הרבה אפשרויות קוד לבחירה כשאתם מספקים הקשר נוסף לקישורים, כמו aria-labelledby,‏ aria-label או הוספה לתוכן הטקסט של רכיב <a>, כפי שמוצג בדוגמה.

אינדיקטור של מיקוד

כפי שלמדתם, סדר ההתמקדות הוא היבט חשוב של נגישות למקלדת. חשוב גם להחליט איזה סגנון יתאים לנושא הזה. כי גם אם סדר המיקוד מצוין, איך המשתמש יכול לדעת איפה הוא נמצא בדף בלי עיצוב מתאים?

אינדיקטור מרכז תשומת הלב גלוי הוא חיוני כדי להודיע למשתמשים איפה הם נמצאים בדף בכל שלב. הדבר חשוב במיוחד למשתמשים зряחים שמשתמשים רק במקלדת. ההגדרה המיקוד לא מוסתר (מינימום) מבטיחה שאינדיקטור המיקוד לא מוסתר מתחת לרכיבים אחרים.

עיצוב ברירת המחדל של הדפדפן

כיום, לכל דפדפן אינטרנט מודרני יש סגנון חזותי שונה שמוגדר כברירת מחדל, שחלה על רכיבים שאפשר להתמקד בהם באתר או באפליקציה, וחלקם גלויים יותר מאחרים. כשהמשתמש מקשיב על Tab בדף, הסגנון הזה מוחל כשהרכיב מקבל את המיקוד מהמקלדת.

אם מאפשרים לדפדפן לטפל בסגנון של המיקוד, חשוב לבדוק את הקוד כדי לוודא שהעיצוב של העיצוב לא יחליף את סגנון ברירת המחדל של הדפדפן. בדרך כלל, שינוי מברירת המחדל כתוב בתור "outline: 0" או "outline: none" בגיליון הסגנונות. קטע הקוד הקטן הזה יכול להסיר את סגנון הסימון של מיקום המיקוד שמוגדר כברירת מחדל בדפדפן, וכתוצאה מכך למשתמשים יהיה קשה מאוד לנווט באתר או באפליקציה.

לא מומלץ – ללא קווים כלליים

a:focus {
  outline: none; /* don't do this! */
}

מומלץ – קו מתאר בסגנון

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

סגנונות מותאמים אישית

כמובן, אתם יכולים לחרוג מסגנון ברירת המחדל של הדפדפן וליצור אינדיקטור התמקדות מותאם אישית שמתאים לעיצוב שלכם. כשאתם יוצרים אינדיקטור התמקדות בהתאמה אישית, יש לכם הרבה חופש לבטא את היצירתיות שלכם.

צורת האינדיקטור של המיקוד יכולה להיות בצורות רבות, למשל קו מתאר, גבול, קו תחתון, תיבה, שינוי רקע או שינוי סגנוני בולט אחר שלא מסתמך על צבע בלבד כדי לציין שהמיקוד של המקלדת פעיל על אותו רכיב.

אפשר לשנות את הסגנון של מחוון המיקוד כדי לוודא שהוא גלוי. לדוגמה, אם לדף יש רקע לבן, אפשר להגדיר ללחצן אינדיקטור של מיקוד עם רקע כחול. אם לדף יש רקע כחול, אפשר להגדיר את אותו סגנון של לחצן להתמקד ברקע לבן.

אפשר לשנות את סגנון רכיב המיקוד על סמך סוג הרכיב. לדוגמה, אפשר להשתמש בקו תחתון מקווקו לקישורים בגוף ההודעה, אבל לבחור גבול מעוגל לרכיב של לחצן.

אין כלל לגבי מספר הסגנונות של סמלי ההתמקדות בדף אחד, אבל חשוב להשתמש במספר סביר כדי למנוע בלבול מיותר.

בדיקת ההבנה

בודקים את הידע שלכם בנושא פוקוס.