מיקוד המקלדת

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

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

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

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

במודול הזה נתמקד במבנה 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 */
}

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

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

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

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

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

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