Kiểm toán khả năng truy cập (WCAG 2.2)
Quét mã nguồn React, Next.js, Vue, Angular, Svelte hay HTML theo WCAG 2.2 mức A/AA, rồi đưa ra mã sửa và báo cáo tuân thủ.
Lập trìnhTrung cấp★ 26,260⑂ 3,699Điểm AI 8/10Cập nhật lần cuối: 30 thg 8, 2026
Kỹ năng này làm gì
- Tự nhận diện framework (React/Next.js/Vue/Angular/Svelte/HTML thuần) và quét toàn bộ vi phạm WCAG 2.2 mức A và AA.
- Phân loại vi phạm thành Critical / Major / Minor kèm mốc thời gian nên sửa cho từng mức.
- Sinh mã sửa dạng before/after theo đúng framework: thiếu
alt,div onClickkhông dùng được bàn phím, tương phản màu kém, ARIA sai... - Kiểm tra tỷ lệ tương phản màu (AA/AAA), điều hướng bàn phím, quản lý focus và thuộc tính ARIA.
- Cung cấp mẫu báo cáo cho các bên liên quan và cấu hình CI/CD (GitHub Actions, GitLab CI, Azure DevOps, pre-commit).
Phù hợp với ai
- Lập trình viên frontend cần đáp ứng yêu cầu accessibility/pháp lý cho website công, ngân hàng, thương mại điện tử.
- Người xây design system muốn chuẩn hóa bảng màu đạt tỷ lệ tương phản.
- Team lead/QA muốn thêm cổng kiểm tra a11y vào code review hoặc pipeline CI.
Ví dụ sử dụng
- "Kiểm toán thư mục src/ theo WCAG 2.2 AA" → nhận bảng vi phạm kèm mức độ nghiêm trọng.
- "Màu chữ #777777 trên nền trắng có đạt chuẩn không? Gợi ý màu thay thế" → nhận tỷ lệ tương phản và màu đạt chuẩn.
- "Sửa các lỗi accessibility trong component ProductCard" → nhận mã đã thêm alt, chuyển div sang thẻ link/button, đổi màu đạt tương phản.
- "Thiết lập GitHub Actions để fail PR khi có lỗi Critical" → nhận file workflow CI.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/alirezarezvani/claude-skills/HEAD/.gemini/skills/a11y-audit/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục .gemini/skills/a11y-audit từ repo GitHub alirezarezvani/claude-skills vào ~/.claude/skills/a11y-audit/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/alirezarezvani/claude-skills.git /tmp/claude-skills && mkdir -p ~/.claude/skills && cp -r /tmp/claude-skills/.gemini/skills/a11y-audit ~/.claude/skills/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở Terminal.
- Tải repo:
git clone https://github.com/alirezarezvani/claude-skills.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills - Sao chép skill:
cp -r claude-skills/.gemini/skills/a11y-audit ~/.claude/skills/ - Kiểm tra bằng
ls ~/.claude/skills/a11y-auditxem có SKILL.md cùng thư mụcscripts/vàreferences/(nếu thiếu, tìm bản đầy đủ ở đường dẫn khác trong repo). - Đảm bảo đã có Python 3 để chạy script:
python3 --version - Khởi động lại Claude Code và thử yêu cầu: "Kiểm toán accessibility WCAG 2.2 AA cho dự án này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT