accessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
Security Assessment
About accessibility
The accessibility skill provides comprehensive guidance and tools to audit and improve web accessibility according to WCAG 2.2 standards. It addresses common accessibility issues such as missing text alternatives, insufficient color contrast, inaccessible media, and non-keyboard-operable interfaces. By following the POUR principles—Perceivable, Operable, Understandable, Robust—this skill ensures that web content is accessible to all users, including those with disabilities, helping organizations achieve compliance with legal accessibility requirements and creating more inclusive digital experiences.
Key features of this skill include detailed guidance on adding descriptive alt text for images, ensuring icon buttons have accessible names, maintaining adequate color contrast ratios for text and UI elements, providing captions and transcripts for multimedia content, and implementing keyboard navigation support for all interactive elements. The skill also provides code examples in HTML, CSS, and JavaScript to demonstrate best practices and to help developers integrate accessibility directly into their projects. Conformance levels A, AA, and AAA are outlined to guide developers on minimum, standard, and enhanced accessibility requirements.
This skill is useful for web developers, designers, QA engineers, and accessibility auditors who want to improve the inclusivity of their websites or applications. It is applicable in scenarios such as conducting accessibility audits, preparing for legal compliance assessments, optimizing content for screen readers, enhancing keyboard navigation, and educating teams on accessibility standards. Ultimately, it empowers organizations to deliver content that is usable and understandable by a wider audience, ensuring that digital experiences are equitable for everyone.
FAQ
How do I use this skill to improve my website's accessibility?
You can use the skill to audit your website against WCAG 2.2 principles, follow the provided code examples, and implement the recommended practices for images, buttons, color contrast, and multimedia content.
Which platforms or frameworks are compatible with this accessibility guidance?
The guidance is platform-agnostic and can be applied to any web project using HTML, CSS, and JavaScript. It supports standard web development environments, including React, Vue, and other frontend frameworks.
Are there any limitations to what this skill can address?
While the skill covers a wide range of accessibility issues, it cannot automatically fix all issues. Developers must manually implement alt text, captions, and other recommendations, and some complex interactive components may require additional custom solutions.
Does the skill cover legal compliance requirements?
Yes, it outlines conformance levels A, AA, and AAA, which help ensure compliance with common accessibility regulations, although organizations should verify requirements specific to their jurisdiction.
Install accessibility
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
addyosmani/web-quality-skills