מיקוד המקלדת

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

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

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

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

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

סדר המיקוד

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

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

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

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

אינדקס כרטיסיות

סדר ההעברה של המיקוד מתחיל ברכיבים שיש להם מאפיין 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-labeledby , 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 */
}

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

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

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

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

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

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

בדיקת ההבנה

בודקים את הידע שלכם ב-ARIA וב-HTML.