accessibility-compliance – skill Thiết kế & UI cho agent AI
Triển khai giao diện tuân thủ WCAG 2.2 với khả năng tiếp cận trên di động, mẫu thiết kế hòa nhập và hỗ trợ công nghệ trợ năng. Dùng khi kiểm toán khả năng tiếp cận, triển khai mẫu ARIA, xây dựng cho trình đọc màn hình hoặc đảm bảo trải nghiệm hòa nhập.
Cài skill accessibility-compliance bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /accessibility-compliance – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $accessibility-compliance – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /accessibility-compliance – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/accessibility-compliance-05729.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /accessibility-compliance – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
Accessibility Compliance
Master accessibility implementation to create inclusive experiences that work for everyone, including users with disabilities.
When to Use This Skill
- Implementing WCAG 2.2 Level AA or AAA compliance
- Building screen reader accessible interfaces
- Adding keyboard navigation to interactive components
- Implementing focus management and focus trapping
- Creating accessible forms with proper labeling
- Supporting reduced motion and high contrast preferences
- Building mobile accessibility features (iOS VoiceOver, Android TalkBack)
- Conducting accessibility audits and fixing violations
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
1. Use Semantic HTML: Prefer native elements over ARIA when possible
2. Test with Real Users: Include people with disabilities in user testing
3. Keyboard First: Design interactions to work without a mouse
4. Don't Disable Focus Styles: Style them, don't remove them
5. Provide Text Alternatives: All non-text content needs descriptions
6. Support Zoom: Content should work at 200% zoom
7. Announce Changes: Use live regions for dynamic content
8. Respect Preferences: Honor prefers-reduced-motion and prefers-contrast
Common Issues
- Missing alt text: Images without descriptions
- Poor color contrast: Text hard to read against background
- Keyboard traps: Focus stuck in component
- Missing labels: Form inputs without associated labels
- Auto-playing media: Content that plays without user initiation
- Inaccessible custom controls: Recreating native functionality poorly
- Missing skip links: No way to bypass repetitive content
- Focus order issues: Tab order doesn't match visual order
Testing Tools
- Automated: axe DevTools, WAVE, Lighthouse
- Manual: VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android)
- Simulators: NoCoffee (vision), Silktide (various disabilities)
Skill liên quan
- brand-guidelines – Áp dụng màu thương hiệu và kiểu chữ của OpenAI cho bất kỳ sản phẩm nào cần khớp với giao…
- chatgpt-apps – Xây dựng, scaffold, refactor và xử lý sự cố ứng dụng ChatGPT Apps SDK kết hợp máy chủ…
- baoyu-comic – Công cụ tạo truyện tranh kiến thức, hỗ trợ nhiều phong cách nghệ thuật và giọng điệu…
- canvas-design – Tạo tác phẩm hình ảnh đẹp dưới dạng tài liệu .png và .pdf dựa trên triết lý thiết kế…
- image-generator – Tạo hoặc chỉnh sửa ảnh từ văn bản và file cục bộ, URL ảnh hoặc data URL qua image API…
- adversarial-ux-test – Nhập vai người dùng thù địch để tìm và phân loại các điểm đau UX.
- brand-guidelines – Áp dụng màu thương hiệu và kiểu chữ chính thức của Anthropic cho mọi loại sản phẩm có…
- baoyu-compress-image – Nén ảnh sang WebP (mặc định) hoặc PNG với tự động chọn công cụ. Dùng khi người dùng yêu…