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
Run npx skillmds@latest add fujigo-software/accessibility in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Web accessibility guidelines and implementation It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Fujigo-Software (@fujigo-software) published this skill. Their other Agent Skills are listed on their SkillMD profile.
Fujigo-Software