מיקוד המקלדת

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

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

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

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

סדר המיקוד

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

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

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

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

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

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

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

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

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

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

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

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

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

כמו כל הקישורים, חשוב שהקישור לדילוג יכלול הקשר לגבי מטרת הקישור. כשמוסיפים את הביטוי "דילוג לתוכן הראשי", מודיע למשתמש שאליו הקישור לוקח אותם. יש הרבה אפשרויות לקודים שתוכלו לבחור מתוכן מתן הקשר נוסף לקישורים, כמו aria-labellabelby, 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