[Community Skill] A11y

[Dsantiagomj]

Summary

• Add comprehensive web accessibility (a11y) skill for WCAG 2.2 compliance
• Covers essential patterns for building accessible web applications
• Framework-agnostic patterns that work with React, Angular, and other frameworks

What This Skill Covers

• Semantic HTML - Using correct HTML elements for better screen reader support - Keyboard Navigation - Ensuring all interactive elements are keyboard accessible
• Form Accessibility - Proper labels, ARIA attributes, and error handling
• ARIA Patterns - When and how to use ARIA attributes correctly
• Focus Management - Modal focus traps and visible focus indicators
• Color Contrast - WCAG 2.2 AA requirements (4.5:1 for text, 3:1 for UI components)
• Screen Reader Support - Skip links, heading hierarchy, announcements
• Testing Checklist - Manual and automated testing guidance

Why This Skill Is Valuable

• Fills a critical gap in the current skill collection
• Accessibility is essential for modern web development
• Legal requirements in many jurisdictions (WCAG AA compliance)
• Benefits all users, not just those using assistive technologies
• Framework-agnostic patterns work across the entire tech stack

Pattern Style

Follows Gentleman-Skills conventions:

• ✅/❌ pattern for good/bad examples
• (REQUIRED) annotations for critical patterns
• Concise, actionable code snippets
• Quick reference table
• Clear trigger conditions

Related

This skill complements existing frontend skills (react-19, angular/core, tailwind-4) by providing accessibility patterns that apply across all frameworks.

[Alan-TheGentleman]

Review Summary

Hey @Dsantiagomj! Great accessibility skill! Just a couple of small fixes needed:

1. Missing "When to Use" Section

The skill validation expects a ## When to Use section (or ## Trigger / ## Usage). Your SKILL.md goes straight into patterns without this section.

Add something like:

## When to Use

- Building UI components that need keyboard navigation
- Adding ARIA attributes to interactive elements
- Ensuring WCAG 2.2 AA compliance
- Creating accessible forms with proper labels
- Implementing focus management in modals/dialogs
- Testing accessibility with screen readers

2. Remove Non-Standard Frontmatter Field

Remove the license field from frontmatter (not part of the standard):

---
name: accessibility
description: >
  Web accessibility (a11y) patterns and WCAG 2.2 compliance.
  Trigger: When building accessible components, when adding ARIA attributes, when ensuring WCAG compliance.
metadata:
  author: dsantiagomj
  version: "1.0"
---

What's Great

• Excellent WCAG coverage
• Great code examples with ✅/❌ patterns
• Comprehensive testing checklist
• Proper conventional commit format

Almost there! Just add the "When to Use" section and you're good to go. Thanks for the contribution!

[Dsantiagomj]

Thanks for the feedback @Alan-TheGentleman.
Applied the changes suggested and the PR is ready for a new review 👀.

[github-actions]

🗳️ Community Skill Voting

Thank you for submitting accessibility!

How to Vote

Community members, please vote using reactions on this PR:

Vote	Reaction
✅ Approve	👍 👏 🎉 🚀 ❤️ (any positive)
❌ Reject	👎

Voting Period

Ends: Saturday, January 31, 2026 (7 days from now)

Acceptance Criteria

• Minimum 3 total votes required
• More positive votes than negative votes
• Skill follows the contribution guidelines

---

This comment was automatically generated. Maintainers may fast-track exceptional contributions.

[github-actions]

✅ Community Skill Approved!

Final Results: +3 / -0

The community has spoken! This skill has been approved and will be merged.

Thank you to everyone who voted and to the contributor for this addition! 🎉

[github-actions]

⚠️ Auto-merge failed. A maintainer will merge this manually.

Error: Resource not accessible by integration