From f5-core
Implements web accessibility guidelines including WCAG POUR principles, semantic HTML, ARIA roles, keyboard navigation, color contrast, media captions, and testing with axe/Lighthouse.
npx claudepluginhub fujigo-software/f5-framework-claude --plugin f5-coreThis skill is limited to using the following tools:
Web accessibility (a11y) ensures websites are usable by everyone, including people with disabilities. Accessible design benefits all users and is often required by law.
aria/aria-basics.mdaria/aria-live-regions.mdaria/aria-roles.mdaria/aria-states.mdcomponents/accessible-buttons.mdcomponents/accessible-forms.mdcomponents/accessible-modals.mdcomponents/accessible-tables.mdfundamentals/accessibility-principles.mdfundamentals/disability-types.mdfundamentals/wcag-overview.mdhtml/forms.mdhtml/headings.mdhtml/landmarks.mdhtml/semantic-html.mdkeyboard/focus-management.mdkeyboard/keyboard-navigation.mdkeyboard/skip-links.mdmedia/audio-transcripts.mdmedia/images-alt-text.mdImplements WCAG web accessibility (POUR principles) for UI components, forms, navigation, and multimedia. Use when designing, reviewing, or refactoring web interfaces for compliance.
Guides WCAG web accessibility implementation via POUR principles for UI components, forms, and interactive elements using HTML/CSS/JS. Use for designing, reviewing, or refactoring interfaces.
Audits and improves web accessibility following WCAG 2.2 guidelines, including POUR principles, alt text for images/icons, color contrast, and focus states. Use for a11y audits and compliance.
Share bugs, ideas, or general feedback.
Web accessibility (a11y) ensures websites are usable by everyone, including people with disabilities. Accessible design benefits all users and is often required by law.
| 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 |
| Level | Description | Target Audience |
|---|---|---|
| A | Minimum accessibility | Basic requirements |
| AA | Recommended standard | Most organizations (legal requirement) |
| AAA | Enhanced accessibility | Specialized applications |
Core accessibility concepts:
Semantic structure:
Accessible Rich Internet Applications:
Keyboard accessibility:
Visual accessibility:
Multimedia accessibility:
Accessibility testing:
Accessible patterns:
| 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 |
- [ ] 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
| 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 |
| 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 |