Accessibility Engineer
This skill equips developers with the knowledge and techniques needed to design and build web applications that meet WCAG 2.1 AA accessibility standards. Learn how to identify barriers, implement inclusive patterns, and verify compliance across your projects. Gain hands-on experience making digital experiences usable for everyone.
Accessibility Engineer teaches you to implement WCAG 2.1 AA accessibility standards systematically across your web applications. Start by understanding the four core principles—perceivable, operable, understandable, and robust—then apply semantic HTML, ARIA attributes where needed, ensure keyboard navigation works throughout your interface, maintain sufficient color contrast ratios, and provide descriptive alt text for images. The skill guides you through both automated testing tools and manual verification to confirm your site meets these standards.
AI-generated summary based on this skill's SKILL.md
Install
daffy0208/ai-dev-standards/accessibility-engineer · repository language: TypeScript
git clone https://github.com/daffy0208/ai-dev-standards
cp -r ai-dev-standards/skills/accessibility-engineer ~/.claude/skills/accessibility-engineerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to make website accessible WCAG?
Accessibility Engineer teaches you to implement WCAG 2.1 AA accessibility standards systematically across your web applications. Start by understanding the four core principles—perceivable, operable, understandable, and robust—then apply semantic HTML, ARIA attributes where needed, ensure keyboard navigation works throughout your interface, maintain sufficient color contrast ratios, and provide descriptive alt text for images. The skill guides you through both automated testing tools and manual verification to confirm your site meets these standards.
What are screen reader testing best practices?
Accessibility Engineer covers screen reader testing as a critical part of auditing and fixing accessibility issues in existing UIs. Best practices include testing with actual screen readers (NVDA, JAWS, VoiceOver) rather than relying solely on automated tools, navigating your interface using only keyboard controls to simulate real user workflows, verifying that all interactive elements are announced correctly, checking that form labels and instructions are properly associated, and testing dynamic content updates with aria-live announcements to ensure users are notified of changes.
How should I implement keyboard navigation in my web application?
Accessibility Engineer emphasizes building keyboard-navigable interfaces as a core competency. Implement logical tab order through semantic HTML and the tabindex attribute, ensure all interactive elements (buttons, links, form fields) are reachable via keyboard, provide visible focus indicators so users know where they are, manage focus properly in modals and dynamic content, and implement skip links to help users bypass repetitive navigation. Test thoroughly using only your keyboard to navigate the entire application without a mouse.
What is the correct way to use ARIA attributes and semantic HTML patterns?
Accessibility Engineer teaches you to understand and correctly apply ARIA attributes and semantic HTML patterns to enhance accessibility. Prefer semantic HTML elements (nav, main, article, button, form) over generic divs whenever possible, as they provide built-in accessibility. Use ARIA attributes like aria-label, aria-describedby, and aria-live only when semantic HTML cannot convey the necessary information. Apply ARIA roles carefully to match user expectations, and always test with screen readers to confirm your implementation communicates the intended meaning.
What should I include in a web accessibility audit checklist?
Accessibility Engineer provides a comprehensive framework for auditing and fixing accessibility issues. Your checklist should cover semantic HTML structure, keyboard navigation completeness, color contrast ratios meeting WCAG AA standards (4.5:1 for normal text), descriptive alt text for all images, proper form labels and error messages, focus management and visible focus indicators, ARIA attributes used correctly, skip links present, accessible buttons and links with meaningful text, and dynamic content announcements via aria-live. Use both automated tools and manual testing to verify each item.
How do I ensure inclusive design by addressing color contrast, alt text, and form accessibility?
Accessibility Engineer equips you to ensure inclusive design by addressing these three critical areas. For color contrast, maintain at least 4.5:1 ratio for normal text and 3:1 for large text to meet WCAG 2.1 AA standards. For alt text, write concise, descriptive alternatives that convey the image's purpose and content—avoid redundant phrases like 'image of' and include relevant context. For form accessibility, associate every input with a visible label using the label element, provide clear error messages linked to fields, group related inputs with fieldset and legend, and ensure the tab order follows a logical flow through the form.
SKILL.md
rendered from the published skill — quoted content, verbatim
Accessibility Engineer
Build for everyone - accessibility is not optional.
Core Principle
Accessibility is a civil right, not a feature.
1 in 4 adults in the US has a disability. Accessible design benefits everyone:
- Blind users (screen readers)
- Low vision users (zoom, high contrast)
- Deaf users (captions)
- Motor disabilities (keyboard-only)
- Cognitive disabilities (clear language)
- Temporary disabilities (broken arm)
- Situational limitations (bright sunlight, noisy environment)
WCAG Compliance Levels
Level A: Minimum (legal requirement) Level AA: Industry standard (aim for this) Level AAA: Gold standard (difficult to achieve for all content)
Target: WCAG 2.1 AA compliance
Pillar 1: Semantic HTML
Use the Right Elements
```jsx // ❌ Bad: Divs for everything (no semantic meaning) <div
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
skills/accessibility-engineer/README.md
skills/accessibility-engineer/SKILL.md
skills/accessibility-engineer/manifest.yaml