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

Mẫu Accessibility (Accessibility Patterns)

Bộ tham chiếu web accessibility gói gọn tiêu chí WCAG 2.2 AA, mẫu ARIA, điều hướng bàn phím và kiểm thử bằng axe-core.

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

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

  • Bảng tiêu chí WCAG 2.2 AA: liệt kê theo nhóm Perceivable / Operable / Understandable kèm mã tiêu chí (alt text, tương phản 4.5:1, focus hiển thị, vùng chạm tối thiểu 24×24px...).
  • Mẫu ARIA chuẩn: dialog (role="dialog", aria-modal), tabs (role="tablist"), live region (aria-live) — những chỗ dev hay làm sai.
  • Điều hướng bàn phím: hook React useFocusTrap sẵn dùng để giữ focus trong modal.
  • Skip link & giảm chuyển động: mẫu liên kết bỏ qua điều hướng và CSS prefers-reduced-motion.
  • Kiểm thử & checklist: lệnh npx @axe-core/cli, Lighthouse audit, checklist 10 mục và danh sách anti-pattern thường gặp.

Phù hợp với ai

  • Lập trình viên frontend (React/Next.js, HTML/CSS)
  • Dự án cần tuân thủ chuẩn accessibility (chính phủ, ngân hàng, giáo dục)
  • Người xây dựng hoặc review design system, thư viện UI component
  • Nhóm mới bắt đầu làm accessibility và chưa biết kiểm tra từ đâu

Ví dụ sử dụng

  1. Sửa modal: "Chỉnh Dialog này theo accessibility-patterns" → được bổ sung aria-modal, aria-labelledby và áp dụng focus trap.
  2. Rà soát trước khi release: "Audit HTML trang này theo checklist" → phát hiện thiếu alt, thông tin chỉ bằng màu, xoá focus outline.
  3. Tự động hoá CI: "Tạo bước kiểm tra accessibility bằng axe-core và Lighthouse" → sinh script pipeline dựa trên các lệnh CLI trong tài liệu.

· · · 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-patterns/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-patterns từ repo GitHub vibeeval/vibecosystem vào ~/.claude/skills/accessibility-patterns/ 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-patterns ~/.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 về thư mục tạm: git clone https://github.com/vibeeval/vibecosystem.git /tmp/vibecosystem
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép riêng skill này: cp -r /tmp/vibecosystem/skills/accessibility-patterns ~/.claude/skills/
  5. Kiểm tra: chạy ls ~/.claude/skills/accessibility-patterns và xem có file SKILL.md không.
  6. Khởi động lại Claude Code, rồi thử yêu cầu: "Kiểm tra accessibility component này theo WCAG 2.2 AA".
  7. (Tuỳ chọn) Nếu muốn chạy kiểm thử tự động, xác nhận công cụ bằng npx @axe-core/cli --version.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT