HTMLaria-live báo cho screen reader biết một vùng sẽ thay đổi nội dung sau khi trang đã tải, để nó đọc lên mà không cần người dùng di chuyển focus tới đó.
html
<!-- polite: đợi screen reader nói hết câu hiện tại rồi mới đọc -->
<div aria-live="polite" id="status"></div>
<!-- assertive: cắt ngang, dùng cho lỗi nghiêm trọng -->
<div aria-live="assertive" id="error"></div>
<!-- role="alert" = aria-live="assertive" + aria-atomic="true" -->
<p role="alert">Phiên đăng nhập đã hết hạn</p>js
status.textContent = 'Đã lưu 3 thay đổi' // screen reader tự đọc| Giá trị | Khi nào |
|---|---|
off | mặc định, không đọc |
polite | trạng thái, kết quả tìm kiếm, "đã lưu", tin nhắn mới |
assertive | lỗi chặn thao tác, cảnh báo hết phiên |
Lưu ý 1: vùng live phải có sẵn trong DOM từ đầu, chỉ nội dung bên trong đổi. Thêm cả <div aria-live> vào DOM cùng lúc với nội dung thì nhiều screen reader không đọc gì.
Lưu ý 2: lạm dụng assertive khiến người dùng bị ngắt liên tục và mất mạch — mặc định nên là polite.