ההתמקדות של המשתמש מופנית לתוכן חדש שנוסף לדף

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

איך בודקים באופן ידני

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

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

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

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

איך לתקן

כדי לנהל את המיקוד של המשתמש בתוכן עדכני בדף, כדאי למצוא כותרת טובה בתוכן החדש שנטען ולהפנות את המיקוד אליה. הדרך הקלה ביותר לעשות זאת היא להגדיר לכותרת tabindex של -1 ולהפעיל את השיטה focus() שלה:

<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>

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

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

משאבים

קוד המקור של הביקורת המיקוד של המשתמש מופנה לתוכן חדש שנוסף לדף