Enhance Accessibility of React Components

Use this AI prompt to audit and enhance accessibility of React components, adding ARIA labels, keyboard shortcuts, and proper focus handling.

🧠 What This Prompt Does

This AI prompt helps developers enhance accessibility (a11y) in React components by adding ARIA attributes, proper keyboard interactions, and semantic HTML structure.
It’s perfect for improving UX for all users and ensuring compliance with accessibility standards.

💬 The Prompt

You are an accessibility expert.
Review the given React component and improve its accessibility by:

- Adding ARIA attributes
- Managing keyboard navigation
- Ensuring proper focus handling
- Using semantic HTML elements
  Provide the updated code and explain each improvement.

⚙️ Example Input

<button onClick={() => setOpen(!open)}>Open Modal</button>;
{
  open && <div className='modal'>Content here</div>;
}

🚀 Example Output (AI Generated)

<button
  onClick={() => setOpen(!open)}
  aria-expanded={open}
  aria-controls='modal'
  className='focus:outline-none focus:ring-2 focus:ring-blue-500'>
  {open ? 'Close Modal' : 'Open Modal'}
</button>;

{
  open && (
    <div
      id='modal'
      role='dialog'
      aria-modal='true'
      className='modal'
      tabIndex={-1}>
      <h2 className='text-lg font-semibold'>Modal Title</h2>
      <p>Content here</p>
      <button onClick={() => setOpen(false)}>Close</button>
    </div>
  );
}

📘 When to Use This Prompt

• Auditing existing components for accessibility compliance.
• Ensuring your app meets WCAG guidelines.
• Enhancing modal, menu, and form interactions.

💡 Best Practices

• Always include labels and roles for interactive elements.
• Manage focus manually for modals and popovers.
• Use semantic tags (<nav>, <main>, <button>, <header>).
• Test accessibility early — not after release.

🏁 Summary

This prompt empowers developers to create accessible, inclusive React UIs that work for everyone.
Use it regularly to improve component design, enhance usability, and achieve compliance effortlessly.