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

Accessibility (Khả năng tiếp cận)

Kỹ năng hướng dẫn Claude rà soát và sửa lỗi khả năng tiếp cận của giao diện theo bốn nguyên tắc POUR của WCAG.

Thiết kế · UITrung cấp★ 642⑂ 66Điểm AI 10/10Cập nhật lần cuối: 14 thg 9, 2026

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

  • Tự kích hoạt khi công việc liên quan tới a11y, WCAG, ARIA, trình đọc màn hình, điều hướng bàn phím, độ tương phản màu, alt text, phụ đề, giảm chuyển động hoặc kích thước vùng chạm.
  • Dùng bốn nguyên tắc WCAG (POUR: Perceivable, Operable, Understandable, Robust) làm khung phân loại mọi lỗi tìm được.
  • Chạy checklist kiểm tra nhanh 8 bước theo thứ tự: bàn phím → trình đọc màn hình → tương phản/màu → cấu trúc semantic → form và thông báo lỗi → vùng chạm & giới hạn thời gian → media/chuyển động → zoom 200%.
  • Có tài liệu tham chiếu sâu hơn về khả năng tiếp cận nhận thức (8 mục tiêu W3C COGA) và mẫu prefers-reduced-motion, ngưỡng nhạy sáng.
  • Phân định rõ: vấn đề về ngôn ngữ, văn hóa, thiết bị rẻ, mạng chậm thuộc kỹ năng inclusive-design, không phải kỹ năng này.

Phù hợp với ai

  • Lập trình viên front-end web/mobile (Flutter, React, v.v.)
  • Designer UX và QA phải viết báo cáo kiểm tra khả năng tiếp cận
  • Đội ngũ làm sản phẩm công, ngân hàng, giáo dục cần chứng minh tuân thủ WCAG
  • Người mới, chưa biết bắt đầu kiểm tra accessibility từ đâu

Ví dụ sử dụng

  1. "Làm form thanh toán này accessible đi" → phát hiện thiếu label (chỉ có placeholder), lỗi không gắn với field, thứ tự focus sai và đề xuất cách sửa.
  2. "Audit a11y cho component này" → chạy checklist 8 bước: khả năng tới được bằng Tab, tương phản 4.5:1, toast động có được trình đọc màn hình thông báo hay không.
  3. "Người dùng phản hồi animation gây choáng" → áp dụng mẫu prefers-reduced-motion và giới hạn nhấp nháy dưới ~3 lần/giâ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/evanca/flutter-ai-rules/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 evanca/flutter-ai-rules vào ~/.claude/skills/evanca-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/evanca/flutter-ai-rules.git && mkdir -p ~/.claude/skills && cp -r flutter-ai-rules/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/Linux) hoặc PowerShell/WSL (Windows).
  2. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  3. Tải repo: git clone https://github.com/evanca/flutter-ai-rules.git
  4. Sao chép kỹ năng: cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/
  5. Kiểm tra thư mục references/ (cognitive-accessibility.md, motion-and-sensory.md) đã được copy kèm.
  6. Khởi động lại Claude Code và thử yêu cầu: "Kiểm tra khả năng tiếp cận của màn hình này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT