จุดมุ่งเน้นของผู้ใช้จะถูกนำไปยังเนื้อหาใหม่ที่เพิ่มลงในหน้าเว็บ

เมื่อใดก็ตามที่มีการเพิ่มเนื้อหาใหม่ลงในหน้าเว็บ ให้พยายามกำหนดโฟกัสของผู้ใช้ไปยังเนื้อหานั้นเพื่อให้ผู้ใช้ดำเนินการกับเนื้อหาได้

วิธีทดสอบด้วยตนเอง

แอปหน้าเดียวเป็นสิ่งที่ต้องทดสอบ โดยเฉพาะเมื่อต้องจัดการโฟกัสของผู้ใช้ไปยังเนื้อหาใหม่

โดยปกติแล้ว ในแอปที่มีหน้าเดียว การคลิกลิงก์จะไม่ทำให้เกิดการรีเฟรชใหม่ทั้งหมด แต่การเปลี่ยนแปลงเส้นทางจะดึงข้อมูลใหม่สําหรับพื้นที่เนื้อหา <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>

เทคโนโลยีความช่วยเหลือพิเศษจะอ่านออกเสียงส่วนหัวใหม่และพื้นที่จุดสังเกตหลักที่มีส่วนหัวนั้นอยู่

แหล่งข้อมูล

ซอร์สโค้ดสําหรับการตรวจสอบโฟกัสของผู้ใช้มุ่งไปยังเนื้อหาใหม่ที่เพิ่มลงในหน้า