| name | react-accessibility |
| description | null |
Accessibility
Category: react · Status: 🟢 Active
When to use
Khi render UI tương tác trong React để đảm bảo dùng được bằng bàn phím & screen reader.
Steps
- Dùng element semantic (
button, nav, label) thay cho div click giả.
- Bổ sung
aria-* chỉ khi semantic không đủ (vd aria-expanded, aria-label).
- Liên kết label-input qua
htmlFor/id; nhóm bằng fieldset/legend.
- Quản lý focus: trap trong modal, trả focus về trigger khi đóng.
- Hỗ trợ bàn phím: Enter/Space kích hoạt, Esc đóng, Tab di chuyển hợp lý.
Template
<button
type="button"
aria-expanded={open}
aria-controls="menu"
onClick={() => setOpen((o) => !o)}
>
Menu
</button>
<ul id="menu" hidden={!open} role="menu">{/* items */}</ul>
Example
Good: <button> thật, aria-expanded đồng bộ state, Esc đóng, focus trả về trigger.
Avoid: <div onClick> không focusable, thiếu label cho input, modal không trap focus.
Checklist