# Accessibility Checker
> Accessibility Checker
- Skill: `meraj-uddin-malik/accessibility-checker` (Agent Skill)
- Install (CLI): `npx skillmds@latest add meraj-uddin-malik/accessibility-checker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/meraj-uddin-malik/accessibility-checker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Meraj-Uddin-Malik (https://skillmd.com/u/meraj-uddin-malik)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/meraj-uddin-malik/accessibility-checker
---
# Accessibility Checker
A skill that audits and improves web accessibility (a11y) to ensure the portfolio website is usable by everyone, including people with disabilities.
## Trigger Phrases
This skill activates when the user wants to check or improve accessibility:
- "check accessibility"
- "audit a11y"
- "fix accessibility issues"
- "make it accessible"
- "accessibility audit"
- "check WCAG compliance"
## Instructions
When this skill is invoked, perform a comprehensive accessibility audit covering these key areas:
### Step 1: Review the File to Audit
If the user specifies a file, read it first. Otherwise, ask which file or component needs to be audited.
### Step 2: Color Contrast Audit (WCAG)
Check that all text meets WCAG color contrast requirements:
#### WCAG Standards
- **WCAG AA (Minimum)**:
- Normal text (< 18pt): 4.5:1 contrast ratio
- Large text (≥ 18pt or ≥ 14pt bold): 3:1 contrast ratio
- UI components and graphics: 3:1 contrast ratio
- **WCAG AAA (Enhanced)**:
- Normal text: 7:1 contrast ratio
- Large text: 4.5:1 contrast ratio
#### What to Check
1. **Text on backgrounds**: Body text, headings, links, buttons
2. **Interactive elements**: Button text, form labels, input text
3. **Dark mode**: Ensure dark theme also meets contrast standards
4. **Disabled states**: Even disabled elements should be distinguishable
5. **Icons and graphics**: Non-decorative icons need sufficient contrast
#### Common Issues
```css
/* ❌ BAD - Insufficient contrast */
.text {
color: #999999; /* Light gray */
background: #ffffff; /* White - only 2.8:1 contrast */
}
/* ✅ GOOD - Meets WCAG AA */
.text {
color: #525252; /* Dark gray */
background: #ffffff; /* White - 7.5:1 contrast */
}
/* ❌ BAD - Primary color might not have enough contrast */
.button {
color: #ffffff;
background: #4d94ff; /* Only 3.1:1 with white text */
}
/* ✅ GOOD - Use darker primary for better contrast */
.button {
color: #ffffff;
background: var(--color-primary-600); /* Better contrast */
}
```
#### Color Contrast Fixes
Provide specific fixes for any contrast issues:
1. **Darken light text** or **lighten dark backgrounds**
2. **Use design system colors** that meet standards
3. **Test in both light and dark modes**
4. **Add text shadows** for text over images (use with caution)
5. **Avoid pure gray (#808080)** - use darker or lighter shades
### Step 3: Keyboard Navigation Audit
Ensure all interactive elements are keyboard accessible:
#### What to Check
1. **Tab order**: Logical flow through interactive elements
2. **Focus indicators**: Visible focus states on all interactive elements
3. **Skip links**: "Skip to main content" link for navigation bypass
4. **Trapped focus**: Modals/dialogs trap and restore focus properly
5. **No keyboard traps**: Users can navigate away from all elements
6. **Keyboard shortcuts**: All mouse actions have keyboard equivalents
#### Common Issues
```html
Click me
...Skip to main content...
```
#### Keyboard Navigation Fixes
1. **Add skip links** for bypassing navigation
2. **Ensure visible focus states** with proper outline or border
3. **Use semantic HTML** (`