web-accessibility

name	web-accessibility
description	Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.

Web Accessibility Skill

Ensures the MapRecruit interface is accessible to all users, including those using assistive technologies.

When to use this skill

• When building new React components.
• When auditing existing UI for accessibility regressions.
• When creating complex interactive elements (modals, dropdowns, calendars).

How to use it

1. Semantic Structure

• Use <nav>, <main>, <section>, and Proper Header hierarchy (h1-h6).
• Ensure all interactive elements use the correct tags (e.g., <button> for actions, <a> for navigation).

2. Visual & Interactive

• Contrast: Maintain a minimum contrast ratio of 4.5:1 for text.
• Focus States: Never hide focus rings (outline-none) unless you are providing a clear alternative focus indicator.
• Tap Targets: Ensure all buttons and links are at least 44x44px for touch accessibility.

3. ARIA Compliance

• Use aria-label or aria-labelledby for icons or elements without visible text.
• Manage focus for modals: return focus to the trigger element when the modal is closed.