HTMLDùng live region: một vùng DOM có aria-live, khi nội dung bên trong thay đổi thì screen reader tự đọc mà không cần chuyển focus.
<!-- có sẵn trong DOM từ đầu, ban đầu rỗng -->
<div id="status" aria-live="polite" aria-atomic="true"></div>
<script>document.getElementById('status').textContent = 'Đã tìm thấy 12 kết quả'</script>Chọn mức độ:
- aria-live="polite" (hoặc role="status"): đợi người dùng ngừng thao tác rồi đọc. Dùng cho hầu hết trường hợp — kết quả tìm kiếm, "đã lưu", số lượng giỏ hàng.
- aria-live="assertive" (hoặc role="alert"): ngắt ngang để đọc ngay. Chỉ dùng cho lỗi nghiêm trọng, hết phiên đăng nhập.
Các lỗi khiến live region "không kêu":
- Chèn cả node chứa aria-live cùng lúc với nội dung. Trợ năng chỉ theo dõi những vùng đã tồn tại từ trước, nên container phải render sẵn (rỗng), rồi mới cập nhật text vào.
- Vùng bị display: none khi cập nhật.
- Đọc lặp liên tục vì ghi đè nội dung quá nhiều lần — nên debounce.
- Nội dung dài: aria-atomic="true" bắt đọc lại toàn vùng, false chỉ đọc phần đổi.
Không cần live region nếu thao tác đã chuyển focus tới nội dung mới — lúc đó screen reader đọc theo focus, thêm live region sẽ thành đọc hai lần.