| name | ui-analysis-accessibility-analysis |
| description | null |
Accessibility Analysis
Category: ui-analysis · Status: 🟢 Active
When to use
Khi soi một design để phát hiện vấn đề a11y trước khi code.
Steps
- Kiểm tương phản text/nền và icon quan trọng đạt WCAG AA.
- Đo touch target: tối thiểu 44×44px cho phần tử bấm trên mobile.
- Suy thứ tự đọc/tab hợp lý từ bố cục; cảnh báo nếu order visual lệch DOM.
- Soát trạng thái focus có được thiết kế không (không chỉ hover).
- Phát hiện thông tin chỉ truyền bằng màu (cần thêm icon/text).
- Kiểm label cho input, alt cho ảnh, tên cho icon-button.
Template
## A11y review: <màn hình>
| Vấn đề | Vị trí | Mức | Đề xuất |
|--------|--------|-----|---------|
| Contrast 3.1:1 | text phụ | AA fail | tăng độ đậm màu |
| Target 32px | icon button | fail | tăng ≥44px |
| Màu báo lỗi | form | fail | thêm icon + text |
Example
Good: Phát hiện text xám contrast 3.1:1, target 32px, lỗi chỉ báo bằng màu đỏ.
Avoid: Duyệt design chỉ nhìn "đẹp", bỏ qua contrast và target size.
Checklist