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

Kiểm toán Khả năng Truy cập Web (a11y)

Kiểm toán và sửa khả năng truy cập web theo chuẩn WCAG 2.2, kèm ví dụ mã cụ thể.

Thiết kế · UITrung cấp★ 2,833⑂ 247Điểm AI 9/10Cập nhật lần cuối: 24 thg 8, 2026

Làm được gì

  • Quy trình audit dựa trên bằng chứng: chạy Lighthouse Accessibility (dùng lighthouse_audit nếu có Chrome DevTools MCP), dùng các node lỗi để khoanh vùng component, sửa nguồn rồi chạy lại để xác nhận.
  • Soi cây khả năng truy cập: dùng take_snapshot để kiểm tra name/role/state, landmark và cấu trúc heading, đồng thời thử luồng bằng bàn phím.
  • Checklist WCAG 2.2: nguyên tắc POUR, mức A/AA/AAA, alt text, bảng tỉ lệ tương phản màu, focus-visible, kích thước vùng bấm 24×24px, thay thế cho hành vi kéo, không nhập lại dữ liệu, xác thực dễ tiếp cận — tất cả kèm snippet HTML/CSS/JS.
  • Kiểm thử: lệnh npx lighthouse, axe CLI, danh sách kiểm tra thủ công với VoiceOver/NVDA/TalkBack và thứ tự ưu tiên lỗi theo mức nghiêm trọng.

Phù hợp với ai

  • Lập trình viên front-end cần sửa lỗi a11y ngay trong mã nguồn
  • Đội làm sản phẩm phải đạt WCAG AA vì yêu cầu pháp lý (khu vực công, ngân hàng, giáo dục)
  • Designer/QA muốn kiểm chứng tương phản, focus và kích thước vùng bấm theo tiêu chuẩn

Ví dụ sử dụng

  1. "Audit a11y trang chủ giúp mình" → chạy Lighthouse, chỉ ra ảnh thiếu alt và nút thiếu tên rồi đề xuất bản sửa.
  2. "Không Tab ra khỏi modal được" → áp dụng mẫu focus trap hoặc chuyển sang thẻ <dialog> native.
  3. "Form đăng nhập có đạt WCAG 2.2 chưa?" → kiểm tra 3.3.8 (cho phép dán mật khẩu, passkey, đăng nhập qua email) và 3.3.7 (không nhập lại).

· · · 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/addyosmani/web-quality-skills/HEAD/skills/accessibility/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 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 /tmp/web-quality-skills && mkdir -p ~/.claude/skills && cp -r /tmp/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.
  2. Tải repo: git clone https://github.com/addyosmani/web-quality-skills.git
  3. Tạo thư mục skills: mkdir -p ~/.claude/skills
  4. Copy skill: cp -r web-quality-skills/skills/accessibility ~/.claude/skills/
  5. Kiểm tra thư mục references/ (A11Y-PATTERNS.md, WCAG.md) đã được copy kèm, vì nội dung có tham chiếu tới chúng.
  6. Khởi động lại Claude Code và thử yêu cầu: "kiểm tra accessibility trang này".
  7. (Tùy chọn) Để audit thực tế, kết nối Chrome DevTools MCP hoặc cài npm i -g @axe-core/cli và dùng npx lighthouse.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT