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 truy cập (a11y-audit)

Đối chiếu UI hoặc thiết kế với WCAG 2.2 AA/AAA và các mẫu ARIA, trả về báo cáo có mã tiêu chí, mức độ nghiêm trọng và cách sửa cụ thể.

Thiết kế · UITrung cấp★ 1,458⑂ 151Điểm AI 7/10Cập nhật lần cuối: 16 thg 9, 2026

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

  • Rà soát UI theo WCAG 2.2, gồm cả các tiêu chí mới: Focus Not Obscured (2.4.11), Target Size (2.5.8), Accessible Authentication (3.3.8).
  • Kiểm tra bộ P0 bắt buộc cho từng thành phần: điều hướng bằng bàn phím, focus thấy rõ (≥3:1), name/role/state cho screen reader, độ tương phản 4.5:1 cho chữ và 3:1 cho UI, vùng chạm ≥24×24, không truyền tin chỉ bằng màu.
  • Đo tương phản bằng script thật chứ không ước lượng bằng mắt (measure_render.mjs, verify_states.mjs, contrast.py), kiểm cả trạng thái default/hover/focus.
  • Kết quả là bảng: mã tiêu chí WCAG · mức P0/P1/P2 · lỗi gì · cách sửa cụ thể, kèm xác nhận các mục đã đạt.

Phù hợp với ai

  • Lập trình viên front-end, nhà thiết kế UI/UX, người phụ trách design system.
  • Nhóm làm sản phẩm cho khu vực công, ngân hàng hay nơi buộc tuân thủ tiêu chuẩn truy cập.
  • Ai muốn thêm cổng kiểm tra accessibility vào quy trình QA trước khi phát hành.

Ví dụ sử dụng

  1. "Kiểm định accessibility cho component modal này" → báo cáo về focus trap, tên có thể truy cập của nút đóng, xử lý phím ESC kèm mã WCAG.
  2. "Nút bấm ở dark mode có đủ tương phản không?" → chạy verify_states.mjs --dark và chỉ ra chính xác trạng thái nào không đạt.
  3. "Cặp màu này có đạt AA?" → contrast.py "#767676" "#ffffff" cho tỉ lệ đo được 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 && 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.
  2. Tải repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r ux-ui-agent-skills/.claude/skills/* ~/.claude/skills/
  5. Skill tham chiếu tài liệu trong accessibility/, taste/ và script trong scripts/, nên hãy giữ nguyên nội dung repo trong project hoặc copy cả các thư mục đó.
  6. Đảm bảo đã có 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 định accessibility cho trang này" để skill tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT