מיקוד המקלדת

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

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

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

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

סדר ההתמקדות

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

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

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

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

טאב

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אם אתם מאפשרים לדפדפן לטפל בעיצוב המיקוד, חשוב לבדוק את הקוד כדי לוודא שהעיצוב לא יבטל את עיצוב ברירת המחדל של הדפדפן. בדרך כלל שינוי מברירת המחדל נכתב כך: "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