התכונה 'נקודת התחלה של ניווט רציף עם התמקדות' מגדירה מתי להתחיל לחפש רכיבים שניתן להתמקד בהם עבור ניווט רציף במיקוד ([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 לא העבירה את המיקוד. זו טעות קלה, ולא עניין גדול אם אתם משתמשים בעכבר. אבל זה עשוי להיות חשוב מאוד אם אתם משתמשים במקלדת או בהחלפת מכשיר. לקחת בחשבון את כמות הקישורים המשולבים בדף ויקיפדיה טיפוסי? זה יהיה מתסכל לדחוף כל הזמן את כל העוגנים האלה קדימה ואחורה!
נמחיש את אותה חוויית השימוש ב-Chrome 50.
וואו זה בדיוק מה שרצינו, ומה שהכי טוב – לא היה צורך לשנות את הקוד. הדפדפן הבין בדיוק איפה המוקד צריך להתמקד, על סמך המקום שבו היינו במסמך.
איך זה עובד?
לפני ההטמעה של נקודת ההתחלה של המיקוד, המיקוד תמיד יעבור מהרכיב הקודם שהיה מודגש או מהחלק העליון של הדף. כלומר, כדי לבחור את הפריט הבא שיתמקדו, ייתכן שיהיה צורך להעביר את המיקוד למשהו שלא אמור לאפשר באמת להתמקד בו, כמו רכיב מאגר או כותרת. הדבר גורם לכל מיני סוגים של מוזרות, כולל הצגה של טבעת מיקוד במקרה של לחיצה על אלמנט כזה ללא פעילות.
כשלוחצים על Tab או על Shift-Tab, נקודת ההתחלה של המיקוד מספקת מנגנון שמאפשר להציע את המקום שבו כדאי להתחיל לחפש את הרכיב הבא שניתן להתמקד.
אפשר להגדיר אותה בכמה דרכים:
אם הפריט מתמקדים, זו גם נקודת ההתחלה של הניווט הקולי, בדיוק כמו קודם.
בנוסף, בדיוק כמו קודם, אם שום דבר אחר לא קבע את נקודת ההתחלה של הניווט עם המיקוד, היא תהיה ה-document הנוכחית או, אם היא זמינה ונתמכת, היא תהיה dialog שפעילה כרגע.
אם נעבור לקטע דף כמו בדוגמה שלמעלה, עכשיו הוא תגדיר את נקודת ההתחלה של המיקוד.
כמו כן, לחיצה על רכיב כלשהו בדף תגדיר את נקודת ההתחלה של הניווט באמצעות המיקוד גם אם לא ניתן להתמקד בו.
לבסוף, אם מסירים מה-DOM את הרכיב שהיה נקודת ההתחלה של המיקוד, ההורה שלו הופך לנקודת ההתחלה של המוקד. אין יותר צורך להתרכז בכיף!
תרחישים אחרים לדוגמה
מלבד הדוגמה שלמעלה, יש עוד תרחישים רבים שבהם התכונה הזו יכולה להיות שימושית.
הסתרת רכיבים
יכול להיות שבמקרים מסוימים המשתמש יתמקד בפריט שצריך להגדיר לערך visibility: hidden או display: none. דוגמה לכך: פריטים לחיצים בקרוסלה. בגרסאות קודמות של Chrome, הסתרת הפריט שנמצא כרגע במוקד באופן זה תאפס את המיקוד בחזרה לנקודת ההתחלה של ברירת המחדל, ותהפוך את הקרוסלה שהוזכרה למלכודת מגעילה עבור משתמשים עם לקות מוטורית. כשהמיקוד הוא ברצף, זה כבר לא המקרה. אם רכיב מוסתר באמצעות אחת מהשיטות שלמעלה, לחיצה על המקש Tab פשוט תעביר לפריט הבא שניתן להתמקד בו.
דילוג על קישורים
קישורים לדילוג למקום מסוים בדף הם עוגנים בלתי נראים שאפשר להגיע אליהם רק באמצעות המקלדת. הם מאפשרים למשתמשים "לדלג" על רכיבי ניווט כדי לעבור ישירות לתוכן של דף, והם יכולים להועיל מאוד למשתמשים במקלדת ובהחלפת מכשירים. כפי שמוסבר באתר WebAIM
אתרים פופולריים רבים מטמיעים קישורי דילוג, אם כי ייתכן שמעולם לא הבחנת בהם.
מאחר שקישורים לדילוג למקום מסוים בדף נקראים עוגנים, הם פועלים באותו אופן כמו הדוגמה המקורית של תוכן העניינים.
אזהרות ותמיכה
נקודת ההתחלה של ניווט ברצף נתמכת רק בגרסאות Chrome 50, Firefox ו-Opera. עד שהמערכת תתמוך בה בכל הדפדפנים, עדיין צריך להוסיף tabindex="-1" (ולהסיר את קווי המתאר של המיקוד) ליעדי העוגן המוגדרים.
הדגמה (דמו)
נקודת ההתחלה של ניווט עם מיקוד רציף היא תוספת מעולה לפרימיטיבים של נגישות בדפדפן. קל למחוק אותם, ולמעשה לאפשר לנו להסיר קוד מהאפליקציה שלנו ובמקביל לשפר את החוויה עבור המשתמשים שלנו. ניצחון כפול! כדאי לצפות בהדגמה כדי לקבל מידע מפורט יותר על התכונה הזו.