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

Thực hành tốt nhất về Khả năng tiếp cận (a11y)

Bộ quy tắc giúp Claude viết và rà soát giao diện web theo chuẩn WCAG: HTML ngữ nghĩa, ARIA, bàn phím và độ tương phản.

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

Skill này làm gì

Cung cấp cho Claude một bộ hướng dẫn WCAG để áp dụng khi viết hoặc review mã giao diện web.

  • HTML ngữ nghĩa: dùng <header>, <main>, <nav>, thứ tự heading h1–h6 không nhảy cấp, dùng <button> thay vì <div>
  • Biểu mẫu: gắn label bằng for/id, nhóm bằng <fieldset>/<legend>, thông báo lỗi rõ ràng
  • ARIA: khi nào nên dùng aria-label, aria-live, aria-expanded và khi nào nên ưu tiên HTML gốc
  • Thị giác: tương phản tối thiểu 4.5:1 (chữ thường) và 3:1 (chữ lớn), không dùng màu làm tín hiệu duy nhất
  • Bàn phím: tabindex đúng cách, tránh bẫy bàn phím, vùng chạm tối thiểu 44x44px
  • Tùy chọn người dùng: prefers-reduced-motion, prefers-color-scheme, prefers-contrast
  • Kiểm thử: Lighthouse, axe-core, NVDA/JAWS/VoiceOver, zoom 200%

Phù hợp với ai

  • Lập trình viên frontend dùng React, Vue hoặc HTML thuần
  • Dự án khu vực công, giáo dục, tài chính nơi a11y là yêu cầu bắt buộc
  • Nhóm xây dựng design system muốn nâng chất lượng component dùng chung
  • Dev mới cần một checklist a11y dễ theo dõi

Ví dụ sử dụng

  1. Review component: "Hãy rà soát modal này theo chuẩn a11y và bổ sung ARIA, bẫy focus đúng cách."
  2. Sửa biểu mẫu: "Chỉnh form đăng ký để label và thông báo lỗi đạt chuẩn WCAG."
  3. Chuẩn bị CI: "Liệt kê các lỗi mà axe-core và Lighthouse sẽ báo trong trang này."

· · · 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/Mindrally/skills/HEAD/accessibility-a11y/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 accessibility-a11y từ repo GitHub Mindrally/skills vào ~/.claude/skills/accessibility-a11y/ 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/Mindrally/skills.git /tmp/mindrally-skills && mkdir -p ~/.claude/skills && cp -r /tmp/mindrally-skills/accessibility-a11y ~/.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/Mindrally/skills.git /tmp/mindrally-skills
  3. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  4. Sao chép skill: cp -r /tmp/mindrally-skills/accessibility-a11y ~/.claude/skills/
  5. Kiểm tra: chạy ls ~/.claude/skills/accessibility-a11y và xác nhận có tệp SKILL.md.
  6. Khởi động lại Claude Code; nên yêu cầu rõ ràng như "áp dụng skill accessibility để kiểm tra component này" vì skill không nêu điều kiện kích hoạt tự động.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0