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
Decision gist · record as of 2025-12-25
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.
Use it when
- Accessibility Engineer covers screen reader testing as a critical part of auditing and fixing accessibility issues in existing UIs.
- Accessibility Engineer emphasizes building keyboard-navigable interfaces as a core competency.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
daffy0208/ai-dev-standards/accessibility-engineer · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 3 files
skills/accessibility-engineer/README.md
skills/accessibility-engineer/SKILL.md
skills/accessibility-engineer/manifest.yaml
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn and implement WCAG 2.1 AA accessibility standards for web applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips developers with practical guidance on WCAG standards and techniques for creating accessible web interfaces. Explore proven patterns and implementation strategies that ensure your components work for all users, regardless of ability or assistive technology.
This skill equips you to systematically evaluate web applications for accessibility compliance, pinpointing WCAG 2.1 violations and usability barriers that affect users with disabilities. It provides structured auditing capabilities to assess color contrast, keyboard navigation, semantic markup, and assistive technology compatibility, helping teams build more inclusive digital experiences.
This skill equips you to construct inclusive web forms using React and Next.js, emphasizing semantic HTML structure and proper ARIA attributes. Learn to implement accessible error messaging, validation feedback, and label associations that meet WCAG standards and improve user experience across assistive technologies.
This skill helps you evaluate your website's accessibility posture by detecting common compliance violations and usability barriers. It surfaces issues that impact visitors with disabilities, then provides clear recommendations to improve inclusivity and meet standards like WCAG.
This skill equips you to evaluate and improve digital experiences for users with disabilities, ensuring your interfaces meet modern accessibility standards. Leverage WCAG 2.2 guidelines and assistive technology best practices to create inclusive web applications that work for everyone.
This skill helps you systematically test websites and applications against WCAG accessibility standards, pinpointing areas where your digital properties fall short of inclusive design principles. By running structured audits, you can identify compliance gaps and prioritize remediation efforts to ensure your content reaches all users effectively.
More skills Accessibility Expert (unlicensed) · Security Engineer (MIT) · UX Designer (MIT) · form-accessibility (MIT)