Bất cứ khi nào nội dung mới được thêm vào một trang, hãy cố gắng đảm bảo rằng người dùng tập trung vào nội dung đó để họ có thể hành động đối với nội dung đó.
Cách kiểm thử thủ công
Bạn cần kiểm thử các ứng dụng một trang, đặc biệt là khi quản lý tiêu điểm của người dùng đối với nội dung mới.
Thông thường, trong ứng dụng trang đơn, việc nhấp vào một đường liên kết sẽ không gây ra lượt làm mới hoàn toàn.
Thay vào đó, thay đổi tuyến đường sẽ tìm nạp dữ liệu mới cho khu vực nội dung <main>.
Người dùng điều hướng bằng trình đọc màn hình hoặc công nghệ hỗ trợ khác có thể không biết rằng nội dung mới đã được thêm vào trang.
Không có chỉ báo nào cho biết người dùng nên quay lại khu vực <main>.
Khi điều này xảy ra, bạn nên quản lý tiêu điểm của người dùng để giữ cho ngữ cảnh mà người dùng nhận thấy luôn đồng bộ với nội dung hình ảnh của trang web.
Cách khắc phục
Để quản lý tiêu điểm của người dùng đến nội dung mới trên một trang, hãy tìm một tiêu đề phù hợp trong nội dung mới tải và chuyển tiêu điểm đến tiêu đề đó.
Cách dễ nhất để thực hiện việc này là đặt tabindex của tiêu đề thành -1 và gọi phương thức focus() của tiêu đề:
<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>
Công nghệ hỗ trợ sẽ thông báo tiêu đề mới và khu vực điểm mốc chính chứa tiêu đề đó.