AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Kiểm toán khả năng tiếp cận (a11y-audit)

Kiểm tra UI theo WCAG 2.2 AA/AAA và các 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★ 3,146⑂ 303Điểm AI 8/10Cập nhật lần cuối: 27 thg 10, 2026

Làm được gì

  • Đối chiếu UI/thiết kế với WCAG 2.2 AA/AAA và bộ mẫu ARIA của dự án.
  • Kiểm tra nhóm P0 bắt buộc cho từng component: điều hướ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 chỉ dùng màu để truyền tin.
  • Kiểm tra các tiêu chí mới của WCAG 2.2: 2.4.11, 2.5.8, 3.3.8.
  • Đo thật, không ước lượng: chạy gate.mjs measure_render.mjs, verify_states.mjs hoặc contrast.py và chỉ báo cáo con số đã đo.
  • Kết quả là bảng: tiêu chí WCAG · mức P0/P1/P2 · lỗi · cách sửa.

Phù hợp với ai

  • Lập trình viên front-end, nhà thiết kế UI/UX, QA cần rà soát accessibility.
  • Nhóm xây design system cần chứng minh component đạt chuẩn.
  • Dự án khu vực công / tài chính cần báo cáo trích dẫn mã tiêu chí.

Ví dụ sử dụng

  1. "Kiểm toán modal này theo POUR" → chỉ ra bẫy bàn phím, mất focus, thiếu nhãn ở mức P0.
  2. "Kiểm tra tương phản dark mode của dashboard.html" → chạy measure_render.mjs <file> --dark và báo tỉ lệ thực tế.
  3. "Xem trạng thái hover/focus của nút có đạt không" → verify_states.mjs phát hiện lỗi theo từng trạng thái.

· · · 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 AI 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 && mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/* ~/.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à vào thư mục làm việc.
  2. Tải repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Skill này đọc các thư mục "kit" (tokens/, accessibility/, scripts/). Nếu chỉ copy thư mục skill, nó sẽ báo KIT_MISSING và dừng.
  4. Cách dễ nhất: chạy npx ux-ui-agent-skills init trong repo, hoặc cài theo dạng plugin.
  5. Cài thủ công: mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/ và giữ các thư mục kit đúng vị trí tương đối.
  6. Kiểm tra Node.js và Python3: node -v, python3 -V.
  7. Khởi động lại Claude Code và yêu cầu "kiểm toán accessibility trang này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT