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

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

איך מבצעים בדיקה ידנית

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

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

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

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

איך פותרים את הבעיה

כדי לאפשר למשתמשים להתמקד בתוכן חדש בדף, כדאי למצוא כותרת טובה בתוכן החדש שנטענו ולהתמקד בה. הדרך הקלה ביותר להוציא את זה היא לתת לכותרת tabindex של -1 ולקריאה ל-method של 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>

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

למידע נוסף, ראו ניהול המיקוד לנגישות.

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

מקורות מידע

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