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

Kiểm thử khả năng truy cập (Accessibility Testing)

Skill tham chiếu giúp tích hợp axe-core, đối chiếu checklist WCAG 2.2 AA và viết test bàn phím, screen reader, ARIA cho web.

Lập trìnhTrung cấp★ 526⑂ 45Điểm AI 7/10Cập nhật lần cuối: 8 thg 8, 2026

Skill này làm gì

  • Cung cấp đoạn mã tích hợp axe-core cho ba môi trường: jest-axe (test component), @axe-core/playwright (E2E) và cypress-axe.
  • Đưa ra checklist 20 lỗi WCAG 2.2 AA phổ biến nhất dạng bảng: alt cho ảnh, label cho input, tương phản màu 4.5:1, thứ bậc heading, focus hiển thị, không bẫy bàn phím, reflow ở mức zoom 400%...
  • Mẫu test điều hướng bàn phím: thứ tự Tab trong modal, focus trap và xử lý Escape, skip link, điều khiển listbox/menu bằng phím mũi tên — tất cả bằng code Playwright.
  • Mẫu ARIA chuẩn: live region (role="alert", aria-live), dialog, tabs, combobox, kèm CSS .sr-only.
  • Bảng lỗi thường gặp → cách sửa, workflow GitHub Actions cho test a11y và bảng phím tắt VoiceOver trên macOS.

Phù hợp với ai

  • Lập trình viên frontend (React/Next.js, Vue...) muốn tự động hoá kiểm thử accessibility.
  • Dự án khu vực công, ngân hàng, giáo dục cần bằng chứng tuân thủ WCAG AA.
  • Kỹ sư UI xây design system cần markup ARIA đúng chuẩn.
  • QA/DevOps muốn chặn hồi quy accessibility ở mỗi pull request.

Ví dụ sử dụng

  1. "Thêm test jest-axe cho component LoginForm" → sinh file test với expect.extend(toHaveNoViolations) và assertion đầy đủ.
  2. "Viết test Playwright kiểm tra focus trap và Escape của modal này" → test kiểm tra thứ tự Tab, vòng focus và việc focus quay lại nút mở modal.
  3. "Soát markup trang này theo WCAG AA" → phát hiện nút icon thiếu aria-label, dùng placeholder thay label, báo lỗi chỉ bằng màu và đề xuất bản sửa.

· · · 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/vibeeval/vibecosystem/HEAD/skills/accessibility-testing/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 skills/accessibility-testing từ repo GitHub vibeeval/vibecosystem vào ~/.claude/skills/accessibility-testing/ 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/vibeeval/vibecosystem.git /tmp/vibecosystem && mkdir -p ~/.claude/skills && cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.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 (macOS/Linux) hoặc Git Bash/WSL (Windows).
  2. Tải repo skill: git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem
  3. Tạo thư mục skill của Claude Code: mkdir -p ~/.claude/skills
  4. Sao chép riêng skill này: cp -r /tmp/vibecosystem/skills/accessibility-testing ~/.claude/skills/
  5. Kiểm tra bằng ls ~/.claude/skills/accessibility-testing xem có file SKILL.md.
  6. Khởi động lại Claude Code và thử yêu cầu: "Dùng skill accessibility-testing để kiểm tra component này".
  7. Để chạy test thật, cài package cần thiết trong dự án: npm i -D jest-axe @axe-core/playwright cypress-axe (chọn theo công cụ test bạn dùng).
Xem mã nguồn trên GitHub ↗Giấy phép: MIT