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