accessibility
Scannednpx machina-cli add skill Fujigo-Software/f5-framework-claude/accessibility --openclawAccessibility Skills
Overview
Web accessibility (a11y) ensures websites are usable by everyone, including people with disabilities. Accessible design benefits all users and is often required by law.
WCAG Principles (POUR)
| Principle | Description | Examples |
|---|---|---|
| Perceivable | Info must be presentable to users | Alt text, captions, contrast |
| Operable | UI must be operable by everyone | Keyboard access, timing |
| Understandable | Info and UI must be understandable | Clear labels, error handling |
| Robust | Content must work with assistive tech | Valid HTML, ARIA |
WCAG Conformance Levels
| Level | Description | Target Audience |
|---|---|---|
| A | Minimum accessibility | Basic requirements |
| AA | Recommended standard | Most organizations (legal requirement) |
| AAA | Enhanced accessibility | Specialized applications |
Key Statistics
- 15% of world population has a disability
- 1 in 4 adults in the US has a disability
- 8% of men have color blindness
- By 2030, 1.4 billion people will be over 60
Categories
Fundamentals
Core accessibility concepts:
- WCAG Overview - Understanding the guidelines
- Accessibility Principles - POUR principles in detail
- Disability Types - Understanding user needs
HTML
Semantic structure:
- Semantic HTML - Using proper elements
- Landmarks - Page regions for navigation
- Headings - Document structure
- Forms - Accessible form design
ARIA
Accessible Rich Internet Applications:
- ARIA Basics - When and how to use ARIA
- ARIA Roles - Element roles
- ARIA States - Dynamic state attributes
- Live Regions - Announcing dynamic content
Keyboard
Keyboard accessibility:
- Keyboard Navigation - Tab order and shortcuts
- Focus Management - Focus indicators and trapping
- Skip Links - Bypassing repeated content
Visual
Visual accessibility:
- Color Contrast - Contrast ratios and tools
- Text Sizing - Responsive typography
- Motion Reduction - Respecting user preferences
Media
Multimedia accessibility:
- Images & Alt Text - Descriptive alternatives
- Video Captions - Synchronized text
- Audio Transcripts - Text alternatives
Testing
Accessibility testing:
- Manual Testing - Keyboard and visual testing
- Automated Testing - axe, Lighthouse, Pa11y
- Screen Reader Testing - NVDA, VoiceOver, JAWS
Components
Accessible patterns:
- Accessible Buttons - Button best practices
- Accessible Forms - Form patterns
- Accessible Modals - Dialog accessibility
- Accessible Tables - Data table patterns
Quick Reference
Minimum Requirements (WCAG 2.1 AA)
| Requirement | Guideline | Check |
|---|---|---|
| Color contrast (normal text) | 4.5:1 | Tools |
| Color contrast (large text) | 3:1 | Tools |
| Focus visible | 2.4.7 | Manual |
| Keyboard accessible | 2.1.1 | Manual |
| Alt text for images | 1.1.1 | Automated |
| Form labels | 1.3.1 | Automated |
| Error identification | 3.3.1 | Manual |
| Page titled | 2.4.2 | Automated |
Testing Checklist
- [ ] Can navigate with keyboard only
- [ ] Focus indicator is visible
- [ ] Color contrast meets requirements
- [ ] Images have alt text
- [ ] Forms have labels
- [ ] Headings are hierarchical
- [ ] Links are descriptive
- [ ] Errors are announced
- [ ] Works with screen reader
Legal Requirements
| Region | Law | Standard |
|---|---|---|
| USA | ADA, Section 508 | WCAG 2.1 AA |
| EU | European Accessibility Act | WCAG 2.1 AA |
| UK | Equality Act | WCAG 2.1 AA |
| Canada | AODA | WCAG 2.0 AA |
Tools
| Tool | Purpose | Type |
|---|---|---|
| axe DevTools | Browser testing | Extension |
| WAVE | Visual inspection | Extension |
| Lighthouse | Audit | Browser |
| Pa11y | CI integration | CLI |
| NVDA | Screen reader | Application |
| VoiceOver | Screen reader | macOS/iOS |
Related Skills
- Frontend Architecture - Component design
- Testing - Test automation
- Code Quality - ESLint a11y plugin
Source
git clone https://github.com/Fujigo-Software/f5-framework-claude/blob/main/plugins/f5-core/skills/accessibility/SKILL.mdView on GitHub Overview
Web accessibility (a11y) ensures websites are usable by everyone, including people with disabilities. Accessible design benefits all users and is often required by law.
How This Skill Works
The skill centers on WCAG principles (POUR) and conformance levels (A, AA, AAA), then maps practical techniques across Fundamentals, HTML, ARIA, Keyboard, Visual, Media, Testing, and Components. It emphasizes semantic HTML, proper ARIA usage, keyboard navigation, focus management, and thorough testing with manual checks and automated tools to verify accessibility.
When to Use It
- Auditing a new or existing site to meet WCAG 2.1 AA
- Building forms, navigation, modals, and interactive components to be accessible
- Ensuring content is operable with keyboard, screen readers, and other assistive tech
- Regulatory compliance and risk management for accessibility laws and standards
- Designing and testing media with captions, transcripts, alt text, and accessible controls
Quick Start
- Step 1: Audit for POUR alignment and WCAG 2.1 AA basics
- Step 2: Implement semantic HTML, landmarks, alt text, labels, and appropriate ARIA
- Step 3: Test with keyboard, screen readers (NVDA, VoiceOver, JAWS), and automated tools; fix issues and iterate
Best Practices
- Start with semantic HTML and landmarks to establish a solid structure
- Maintain proper color contrast and scalable text for readability
- Ensure keyboard accessibility with visible focus indicators and logical focus order
- Provide accurate alt text, clear labels, and use ARIA only when necessary
- Combine manual testing with automated tools (axe, Lighthouse, Pa11y) and screen reader testing
Example Use Cases
- Using landmarks and skip links to simplify navigation for assistive tech
- Providing descriptive alt text for images and captions for video content
- Accessible forms with labeled controls and clear error messaging
- Accessible modals with proper focus management and ARIA attributes
- Live regions and ARIA updates for dynamic content changes
Frequently Asked Questions
Related Skills
api-design
Fujigo-Software/f5-framework-claude
API design principles for REST, GraphQL, and gRPC
database
Fujigo-Software/f5-framework-claude
Database design, SQL, NoSQL, and data management
performance
Fujigo-Software/f5-framework-claude
Performance optimization strategies and techniques
code-quality
Fujigo-Software/f5-framework-claude
Code quality practices, linting, and refactoring
devops
Fujigo-Software/f5-framework-claude
DevOps practices, CI/CD, and infrastructure management
git
Fujigo-Software/f5-framework-claude
Git version control and collaboration workflows
