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

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

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

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

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

เทคโนโลยีความช่วยเหลือพิเศษจะประกาศส่วนหัวใหม่ และพื้นที่หลักสำคัญที่ส่วนหัวนั้นอยู่

ดูเพิ่มเติมที่การจัดการโฟกัสสำหรับการช่วยเหลือพิเศษ

แหล่งข้อมูล

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