Web Accessibility

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.