HTMLBốn bước, thiếu bước nào cũng làm người dùng bàn phím lạc chỗ:
1. Nhớ phần tử đang focus trước khi mở (document.activeElement).
2. Chuyển focus vào trong modal ngay khi mở — vào phần tử tương tác đầu tiên, hoặc vào chính container (đặt tabindex="-1") nếu nội dung dài và muốn screen reader đọc từ đầu.
3. Giữ focus trong modal khi đang mở — Tab từ phần tử cuối quay về phần tử đầu, Shift+Tab thì ngược lại. Đồng thời chặn nội dung nền: dùng inert trên phần còn lại của trang.
4. Đóng modal thì trả focus về phần tử đã mở nó, và cho Escape đóng được.
const opener = document.activeElement
openDialog()
// khi đóng:
closeDialog()
opener?.focus()Về mặt ngữ nghĩa, modal cần role="dialog" + aria-modal="true" + một accessible name (aria-labelledby trỏ tới tiêu đề). Dùng <dialog> với showModal() thì trình duyệt lo phần lớn việc này giúp.
Sai hay gặp: modal đóng nhưng focus rơi về <body> — người dùng phải tab lại từ đầu trang; hoặc modal đang mở mà Tab vẫn đi ra được nội dung nền phía sau lớp overlay.