Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Kiểm định khả năng tiếp cận (a11y-audit)

Rà soát UI hoặc thiết kế theo WCAG 2.2 AA/AAA và mẫu ARIA, trả về bảng lỗi kèm mã tiêu chí, mức độ nghiêm trọng và cách sửa cụ thể.

Thiết kế · UITrung cấp★ 494⑂ 42Điểm AI 8/10Cập nhật lần cuối: 22 thg 6, 2026

Kỹ năng này làm gì

  • Đối chiếu giao diện với WCAG 2.2 (1.4.3 tương phản, 2.4.11 focus bị che, 2.5.8 kích thước vùng chạm, 3.3.8 xác thực dễ tiếp cận...).
  • Kiểm tra bộ P0 bắt buộc cho mỗi component: điều hướng bằng bàn phím, focus nhìn thấy (≥3:1), name/role/state cho trình đọc màn hình, tương phản 4.5:1 (chữ) / 3:1 (UI), vùng chạm ≥24×24, không dùng riêng màu để truyền tin.
  • Bắt buộc đo tương phản bằng script thật (measure_render.mjs, verify_states.mjs, contrast.py) thay vì ước lượng bằng mắt.
  • Xuất bảng kết quả: mã tiêu chí · mức P0/P1/P2 · lỗi · cách khắc phục, đồng thời nêu rõ các mục đã đạt.

Phù hợp với ai

  • Lập trình viên frontend web/app, nhà thiết kế UI, nhân sự QA.
  • Đội làm sản phẩm bắt buộc tuân thủ tiêu chuẩn tiếp cận (khu vực công, ngân hàng, giáo dục).
  • Nhóm duy trì design system muốn kiểm tra hồi quy về accessibility định kỳ.

Ví dụ sử dụng

  1. "Kiểm tra modal này có đạt WCAG 2.2 AA không" → nhận báo cáo về focus trap, phím ESC, tỉ lệ tương phản đo được.
  2. "Xem trạng thái hover của nút ở chế độ tối" → chạy verify_states.mjs <file> --dark để đo default/hover/focus.
  3. "Chữ #7A7A7A trên nền trắng có ổn không?" → contrast.py tính tỉ lệ và gợi ý màu thay thế.

· · · 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/plugin87/ux-ui-agent-skills/HEAD/.claude/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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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 .claude/skills/a11y-audit từ repo GitHub plugin87/ux-ui-agent-skills vào ~/.claude/skills/plugin87-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/plugin87/ux-ui-agent-skills.git /tmp/ux-ui-agent-skills && mkdir -p ~/.claude/skills && cp -r /tmp/ux-ui-agent-skills/.claude/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.

  1. Mở terminal và chuyển tới thư mục làm việc.
  2. Tải repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r ux-ui-agent-skills/.claude/skills/a11y-audit ~/.claude/skills/
  5. Skill tham chiếu các file accessibility/, scripts/, taste/ trong repo — hãy giữ chúng ở gốc dự án hoặc làm việc trực tiếp trong repo.
  6. Đảm bảo đã cài Node.js và Python 3 để chạy script đo (node -v, python3 -V).
  7. Khởi động lại Claude Code và yêu cầu "kiểm tra accessibility cho màn hình này" để kích hoạt.
Xem mã nguồn trên GitHub ↗