framework-accessibility

Fix React accessibility pitfalls by replacing div elements with semantic buttons or links and implementing proper focus management. This Skill provides specific bad vs. good code fix templates for React and Next.js components to ensure correct keyboard navigation.

Tailwind CSS does not automatically guarantee WCAG AA color contrast compliance. This Skill provides a contrast-safe utility table mapping specific Tailwind CSS class pairs that meet the required contrast ratios for accessible web development.

Handle focus management on route changes by programmatically moving focus to the new page content or skip links. This Skill offers framework-specific accessibility patterns and code fix templates for Vue and Svelte to maintain keyboard navigation during route transitions.

Implement ARIA attributes in Angular by applying framework-specific accessibility patterns that avoid common anti-patterns. This Skill details common ARIA implementation pitfalls and provides code snippet examples to ensure proper screen reader support.

Yes, you can check keyboard navigation patterns across React, Vue, Angular, and Svelte. This Skill addresses framework-specific keyboard navigation issues and provides code examples to fix inaccessible component interactions.

Accessible web components fail WCAG AA checks due to common framework-specific pitfalls like neglected focus management or incorrect ARIA implementation. This Skill identifies these anti-patterns and provides utility tables to fix contrast and navigation issues.