Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Kiểm tra Khả năng Tiếp cận Web (a11y)

Kỹ năng rà soát và cải thiện khả năng tiếp cận website theo chuẩn WCAG 2.2, kèm ví dụ mã cụ thể.

Lập trìnhTrung cấp★ 2,599⑂ 238Điểm AI 9/10Cập nhật lần cuối: 14 thg 6, 2026

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

Dựa trên WCAG 2.2 và các mục kiểm tra accessibility của Lighthouse, Claude sẽ soi HTML/CSS/JS của bạn và đề xuất cách sửa.

  • Bốn nguyên tắc POUR và các cấp độ A / AA / AAA
  • Văn bản thay thế, độ tương phản màu (4.5:1 và 3:1), phụ đề & bản ghi
  • Điều hướng bằng bàn phím, hiển thị focus, tránh focus bị che (2.4.11), skip link
  • Tiêu chí mới của WCAG 2.2: kích thước vùng bấm 24×24px, thay thế cho kéo-thả, tránh nhập lại dữ liệu, xác thực dễ tiếp cận
  • Dùng ARIA đúng cách, live region, nhãn form và xử lý lỗi
  • Lệnh kiểm tra tự động (Lighthouse, axe-core) và checklist kiểm tra thủ công

Phù hợp với ai

  • Lập trình viên frontend cần đạt mức AA theo yêu cầu pháp lý hoặc hợp đồng
  • Nhóm chưa có kinh nghiệm a11y, không biết bắt đầu từ đâu
  • Người xây dựng design system / thư viện component
  • QA muốn ngăn lỗi accessibility tái xuất hiện sau refactor

Ví dụ sử dụng

  1. "Audit a11y trang landing này" → phát hiện thiếu alt, màu tương phản thấp, CSS xóa outline focus và đề xuất bản sửa
  2. "Cải thiện điều hướng bàn phím cho modal này" → chuyển sang <dialog> gốc hoặc áp dụng mẫu focus trap
  3. "Đưa form thanh toán về chuẩn WCAG 2.2 AA" → gắn label đúng, thông báo lỗi bằng role="alert"/aria-invalid, bỏ nhập lại thông tin, đặt kích thước nút tối thiểu 24×24px

· · · Hướng dẫn cài đặt · · ·

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 từ repo GitHub addyosmani/web-quality-skills vào ~/.claude/skills/accessibility/ 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/addyosmani/web-quality-skills.git && cp -r web-quality-skills/skills/accessibility ~/.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) hoặc PowerShell/WSL (Windows).
  2. Tạo thư mục skills nếu chưa có: mkdir -p ~/.claude/skills
  3. Tải repo về: git clone https://github.com/addyosmani/web-quality-skills.git
  4. Copy toàn bộ thư mục (gồm cả references): cp -r web-quality-skills/skills/accessibility ~/.claude/skills/
  5. Kiểm tra: ls ~/.claude/skills/accessibility — phải thấy SKILL.md và thư mục references.
  6. Khởi động lại Claude Code, rồi yêu cầu "audit accessibility trang này" hoặc "kiểm tra WCAG 2.2" để kỹ năng tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT