Accessibility trong HTML/CSS: khi nào dùng ARIA, và quản lý focus ra sao?

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email" />

<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

<button aria-label="Đóng"><svg aria-hidden="true">...</svg></button>

:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

• role="button" trên div chưa đủ: vẫn phải tự thêm tabindex="0" và xử lý Enter/Space; dùng button là xong.
• Với modal: chuyển focus vào trong, giữ focus trong modal (focus trap), đóng bằng Esc, trả focus về nút mở. Phần tử dialog native và thuộc tính inert hỗ trợ việc này.
• Tương phản màu tối thiểu theo WCAG AA: 4.5:1 cho text thường.
• Trạng thái động (toast, lỗi form) dùng aria-live hoặc role="alert".