התכונה 'נקודת ההתחלה של ניווט רצוף לפי מיקוד' קובעת איפה נתחיל לחפש רכיבים שניתן להעביר אליהם את המיקוד לצורך ניווט רצוף לפי מיקוד ([Tab] או [Shift-Tab]) כשאין אזור מודגש. האפשרות הזו שימושית במיוחד לתכונות נגישות כמו 'קישורי דילוג' וניהול המיקוד במסמך.
ב-HTML יש הרבה תמיכה מובנית לטיפול באינטראקציות עם מקלדת, כך שקל מאוד לכתוב דפים שאפשר להשתמש בהם באמצעות המקלדת – בין אם יש פגיעה מוטורית שמונעת מאיתנו להשתמש בעכבר, ובין אם אנחנו פשוט יעילים כל כך והסרת הידיים מהמקלדת מבזבזת אלפיות שנייה יקרות.
הטיפול במקלדת מתבסס על מוקד ההקלדה, שמגדיר לאן אירועי המקלדת יישלחו בדף. עד עכשיו היו כמה מצבים שבהם נדרשנו לבצע עבודה נוספת כדי שהדברים יפעלו בצורה טובה למשתמשים עם מקלדת. השיטה focus() מאפשרת לנו לנהל את המיקוד על ידי בחירה סלקטיבית של רכיב להתמקד בו בתגובה לפעולה של משתמש. עם זאת, השיטה המומלצת הזו כוללת הרבה מלכודות, ונדרש קצת קוד JavaScript מתוחכם כדי לספק חוויית שימוש בסיסית.
השיטה הזו לא תיעלם בקרוב, אבל ב-Chrome 50 היא תהיה נחוצה בפחות מקרים, בזכות נקודת ההתחלה של ניווט המיקוד הרצוף. בעקבות השינוי הזה, דפים שנוצרו בצורה טובה יהיו נגישים יותר באופן אוטומטי, בלי צורך בניהול נוסף של המיקוד באופן ידני. נבחן דוגמה.
קישור בתוך דף
באתרים עם טקסט רב, לרוב יש קישורים פנימיים באותו דף כדי לעזור למשתמשים לעבור במהירות לקטע חשוב.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
אם הייתי משתמש במקלדת (וגם חובב אוכל אוסטרלי), סדר הפעולות הבא שלי היה נראה בערך כך:
- מקישים פעמיים על
Tabכדי להתמקד בקישור 'מתכונים'. - מקישים על
Enterכדי לעבור לקטע 'מתכונים' - מקישים שוב על
Tabכדי להתמקד בקישור 'קריאה נוספת'.
נראה איך זה עובד ב-Chrome 49.
אוי. זה לא בדיוק הלך לפי התוכנית, נכון?
במקום להתמקד בקישור 'מידע נוסף', לחיצה על Tab בפעם האחרונה העבירה את המיקוד לפריט הבא בתוכן עניינים. הסיבה לכך היא שהמפתח לא הגדיר את tabindex="-1" בכותרת כדי שאפשר יהיה להתמקד בה. לכן, לחיצה על העוגן בשם #recipes לא העבירה את המיקוד. זוהי טעות עדינה, ולא בעיה גדולה אם אתם משתמשים בעכבר. אבל אם אתם משתמשים במקלדת או במכשיר עם מתג, זה יכול להיות מאוד חשוב. נסו לחשוב על כמות הקישורים ההדדיים בדף טיפוסי בוויקיפדיה. זה יהיה מתסכל מאוד אם תצטרכו ללחוץ כל הזמן על Tab כדי לעבור קדימה ואחורה בין כל הווידג'טים האלה.
עכשיו נבחן את אותה חוויה ב-Chrome 50.
וואוו, זה בדיוק מה שרצינו, והכי טוב, לא היינו צריכים לשנות את הקוד שלנו. הדפדפן פשוט הבין לאן צריך להעביר את המיקוד על סמך המיקום שלנו במסמך.
איך זה עובד?
לפני ההטמעה של נקודת ההתחלה של המיקוד, המיקוד תמיד הועביר מהרכיב הקודם שהיה ממוקד או מהחלק העליון של הדף. כלומר, בחירת האלמנט הבא שיקבל את המיקוד עשויה לגרום להעברת המיקוד לאלמנט שלא אמור לקבל מיקוד, כמו אלמנט מאגר או כותרת. זה גורם לכל מיני דברים מוזרים, כולל הצגת טבעת מיקוד אם במקרה לוחצים על רכיב כזה.
נקודת ההתחלה של המיקוד, כפי שרומז השם שלה, מספקת מנגנון להצעה של מקום ההתחלה לחיפוש הרכיב הבא שניתן להתמקד בו כשמקישים על Tab או על Shift-Tab.
אפשר להגדיר אותה בכמה דרכים:
אם יש משהו שמתמקדים בו, הוא גם נקודת ההתחלה של ניווט המיקוד, בדיוק כמו קודם.
כמו כן, בדיוק כמו קודם, אם לא הוגדר נקודה אחרת להתחלת הניווט במוקד, היא תהיה document הנוכחי או, אם הוא זמין ונתמך, dialog הפעיל הנוכחי.
אם מנווטים לקטע של דף כמו בדוגמה שלמעלה, זה יהיה עכשיו נקודת ההתחלה של המיקוד.
בנוסף, אם נלחץ על אלמנט כלשהו בדף, גם אם לא ניתן להתמקד בו, הוא יוגדר כנקודת ההתחלה של ניווט המיקוד.
לבסוף, אם הרכיב שהיה נקודת ההתחלה של המיקוד יוסר מה-DOM, ההורה שלו יהפוך לנקודת ההתחלה של המיקוד. אין יותר מצב של 'התמקדות בבעיה אחת ואז מעבר לבעיה הבאה'.
תרחישים אחרים לדוגמה
מלבד הדוגמה שלמעלה, יש הרבה תרחישים אחרים שבהם התכונה הזו יכולה להיות שימושית.
הסתרת רכיבים
יכול להיות שמשתמשים יתמקדו בפריט שצריך להגדיר כ-visibility: hidden או כ-display: none. דוגמה לכך היא פריטים שניתן ללחוץ עליהם בקרוסלה. בגרסאות קודמות של Chrome, הסתרת הפריט שבו מופעל המיקוד באופן הזה הייתה מאפסת את המיקוד לנקודת ההתחלה שמוגדרת כברירת מחדל, והופכת את קרוסלת התמונות שצוינה למעלה למלכודת מסוכנת למשתמשים עם מוגבלויות מוטוריות. עם נקודת התחלה של התמקדות רציפה, זה כבר לא המצב. אם רכיב מוסתר באחת מהשיטות שלמעלה, לחיצה על המקש Tab פשוט תעביר את המיקוד לפריט הבא שאפשר להתמקד בו.
דילוג על קישורים
קישורים לדילוג הם עוגנים בלתי נראים שאפשר להגיע אליהם רק באמצעות המקלדת. הן מאפשרות למשתמשים "לדלג" על רכיבי הניווט כדי לעבור ישירות לתוכן של הדף, והן יכולות להיות מאוד מועילות למשתמשים במקלדת ובמכשירי מעבר. כפי שמוסבר באתר WebAIM
אתרים פופולריים רבים משתמשים בקישורים לדילוג, אבל יכול להיות שמעולם לא שמתם לב אליהם.
קישורי דילוג הם עוגנים עם שם, ולכן הם פועלים באותו אופן כמו בדוגמה המקורית שלנו לטבלת תוכן.
אזהרות ותמיכה
נקודת ההתחלה של ניווט רצוף לפי המיקוד נתמכת כרגע רק ב-Chrome 50, ב-Firefox וב-Opera. עד שהתכונה הזו תהיה נתמכת בכל הדפדפנים, עדיין תצטרכו להוסיף את tabindex="-1" (ולהסיר את קווי ההתמקדות) ליעדי עוגן עם שם.
הדגמה (דמו)
נקודת ההתחלה של ניווט עם רצפי התמקדות היא תוספת נהדרת לקבוצת הרכיבים הבסיסיים של הנגישות בדפדפן. קל להבין את המשמעות שלו, והוא מאפשר לנו להסיר קוד מהאפליקציה תוך שיפור החוויה של המשתמשים. כך כולם מרוויחים! מומלץ לצפות בדמוה כדי להבין את התכונה הזו לעומק.