| name | code-review-accessibility-review |
| description | null |
Accessibility Review
Category: code-review · Status: 🟢 Active
When to use
Khi review a11y: semantic, label, focus, contrast, điều hướng bàn phím.
Steps
- Semantic: dùng
button/a/nav/main/heading đúng; không div onClick cho hành động.
- Label: input có
label/aria-label; icon-button có tên; ảnh có alt ý nghĩa.
- Focus: thao tác được bằng bàn phím, focus order hợp lý, focus thấy rõ, bẫy focus trong modal.
- Contrast: chữ/nền đạt WCAG AA (4.5:1 text thường); không chỉ dùng màu để truyền thông tin.
- ARIA: chỉ thêm khi cần, đúng role/state (
aria-expanded, aria-invalid); ưu tiên HTML semantic.
Template
<button aria-label="Đóng" aria-expanded={open} onClick={close}>
<XIcon aria-hidden />
</button>
<label htmlFor="email">Email</label>
<input id="email" aria-invalid={!!error} />
Example
Good: semantic HTML, label đầy đủ, keyboard + focus rõ, contrast đạt AA.
Avoid: div clickable, input không label, modal không bẫy focus, truyền tin chỉ bằng màu.
Checklist