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ể thực hiện hành động đối với nội dung đó.
Cách kiểm thử theo cách thủ công
Ứng dụng trang đơn rất quan trọng để kiểm thử, đặc biệt là khi quản lý sự tập trung của người dùng vào nội dung mới.
Thông thường, trong một ứng dụng trang đơn, việc nhấp vào một đường liên kết sẽ không gây ra quá trình làm mới hoàn toàn.
Thay vào đó, việc thay đổi tuyến sẽ tìm nạp dữ liệu mới cho vùng nội dung <main>.
Đối với người dùng bình thường,
điều này rất hữu ích.
Tuy nhiên, những người dùng sử dụ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ó dấu hiệu nào cho thấy chúng sẽ 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 để đảm bảo ngữ cảnh cảm nhận được của người dùng đồng bộ với nội dung hình ảnh của trang web.
Cách khắc phục
Để quản lý việc người dùng tập trung vào 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à tập trung vào nội dung đó.
Cách dễ nhất để thực hiện việc này là cung cấp cho tiêu đề tabindex của -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 mốc chính có tiêu đề đó.
Hãy xem thêm bài viết Quản lý tiêu điểm cho tính năng hỗ trợ tiếp cận.