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

Tuân thủ khả năng truy cập web (Accessibility Compliance)

Skill hướng dẫn kiểm toán WCAG 2.2 AA, viết alt text, làm biểu đồ và biểu mẫu accessible cho các site tin tức, học thuật.

Lập trìnhTrung cấp★ 403⑂ 66Điểm AI 9/10Cập nhật lần cuối: 25 thg 9, 2026

Làm được gì

  • Checklist WCAG 2.2 AA theo 4 nguyên tắc POUR, kèm các tiêu chí mới của 2.2: kích thước target tối thiểu 24×24px, focus không bị header dính che, xác thực không dùng bài kiểm tra nhận thức.
  • Quy tắc viết alt text cho ảnh báo chí, ảnh chân dung, biểu đồ dạng ảnh và ảnh do AI tạo, có ví dụ "tốt / không tốt" rõ ràng.
  • Trực quan hóa dữ liệu accessible: mẫu HTML figure + bảng dữ liệu ẩn trong <details>, bảng màu an toàn cho người mù màu (Paul Tol), hàm Python tính tỉ lệ tương phản theo WCAG.
  • Mẫu bàn phím, chuyển động, form: skip link, chống bẫy focus trong modal, tôn trọng prefers-reduced-motion, thông báo lỗi qua aria-invalid và role="alert".
  • Kiểm thử: cài axe-core ghim phiên bản rồi audit bằng Playwright, xuất danh sách vi phạm; kèm checklist kiểm thử tay (screen reader, zoom 200%/400%).
  • Tóm tắt pháp lý Mỹ (Section 508, ADA Title II/III, HHS 504) và EU (EAA, EN 301 549) với mốc thời hạn.

Phù hợp với ai

  • Lập trình viên frontend làm website báo chí, tạp chí học thuật, cơ quan công
  • Biên tập viên số phải viết alt text cho ảnh bài viết
  • Nhà báo dữ liệu làm biểu đồ tương tác
  • QA hoặc người phụ trách web cần báo cáo kiểm toán accessibility

Ví dụ sử dụng

  1. "Audit trang bài viết của mình theo WCAG 2.2 AA" → chạy checklist và script axe-core + Playwright, xuất danh sách lỗi theo mức tác động.
  2. "Viết alt text cho ảnh người biểu tình trước tòa án" → câu mô tả AI/WHO-WHAT-WHERE dưới 125 ký tự, không lặp caption.
  3. "Làm biểu đồ tỉ lệ thất nghiệp đọc được bằng screen reader" → cấu trúc figure với aria-describedby và bảng dữ liệu kèm theo.

· · · 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/jamditis/claude-skills-journalism/HEAD/dev-toolkit/skills/accessibility-compliance/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 dev-toolkit/skills/accessibility-compliance từ repo GitHub jamditis/claude-skills-journalism vào ~/.claude/skills/accessibility-compliance/ 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/jamditis/claude-skills-journalism.git && mkdir -p ~/.claude/skills && cp -r claude-skills-journalism/dev-toolkit/skills/accessibility-compliance ~/.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 PowerShell (Windows).
  2. Tải repo: git clone https://github.com/jamditis/claude-skills-journalism.git
  3. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  4. Copy skill này: cp -r claude-skills-journalism/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra bằng /skills.
  6. Nếu muốn dùng phần audit tự động: npm install --save-dev --save-exact axe-core@4.12.1 và pip install playwright && playwright install chromium.
  7. Gõ yêu cầu như "kiểm tra accessibility trang này" để skill tự kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT