{"enrichment":{"faq":[{"a":"Accessibility Engineer teaches you to implement WCAG 2.1 AA accessibility standards systematically across your web applications. Start by understanding the four core principles\u2014perceivable, operable, understandable, and robust\u2014then 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.","q":"How to make website accessible WCAG?"},{"a":"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.","q":"What are screen reader testing best practices?"},{"a":"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.","q":"How should I implement keyboard navigation in my web application?"},{"a":"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.","q":"What is the correct way to use ARIA attributes and semantic HTML patterns?"},{"a":"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.","q":"What should I include in a web accessibility audit checklist?"},{"a":"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\u2014avoid 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.","q":"How do I ensure inclusive design by addressing color contrast, alt text, and form accessibility?"}],"shadow_tags":["wcag-compliance","assistive-technology","universal-design","disability-inclusion","keyboard-first","screen-reader-ready","semantic-markup","focus-management","contrast-standards","inclusive-ux"],"summary_rewrite":"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."},"files":[{"bytes":12553,"path":"skills/accessibility-engineer/SKILL.md","sha256":"92533a4398fd8cf3d41066bae2dcea0283fed1e2d9935de2ae2242ef89df79a9","url":"https://skillfed.io/files/daffy0208/ai-dev-standards/accessibility-engineer/6bb99c21/SKILL.md"}],"id":"daffy0208/ai-dev-standards/accessibility-engineer","links":{"html":"https://skillfed.io/daffy0208/ai-dev-standards/accessibility-engineer","md":"https://skillfed.io/daffy0208/ai-dev-standards/accessibility-engineer.md","repo":"https://github.com/daffy0208/ai-dev-standards"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":7,"language":"TypeScript","last_updated":"2025-12-25","license":"MIT","name":"Accessibility Engineer","publisher":"daffy0208","stars":32},"relations":{"similar":[{"id":"patricio0312rev/skills/accessibility-auditor"},{"id":"affaan-m/ECC/frontend-a11y"},{"id":"hoodini/ai-agents-skills/web-accessibility"},{"id":"travisjneuman/.claude/accessibility-a11y"},{"id":"DanielPodolsky/ownyourcode/accessibility"},{"id":"organvm/a-i--skills/accessibility-patterns"},{"id":"eyadsibai/ltk/accessibility"},{"id":"Community-Access/accessibility-agents/framework-accessibility"},{"id":"rohitg00/awesome-claude-code-toolkit/accessibility-wcag"},{"id":"warpdotdev/oz-skills/web-accessibility-audit"}]},"slug":{"owner":"daffy0208","repo":"ai-dev-standards","skill":"accessibility-engineer"},"version":"6bb99c21"}