How do you ensure accessibility (a11y) in React applications?

// BAD: Div soup
function BadNav() {
  return (
    <div className="nav">
      <div onClick={goHome}>Home</div>
      <div onClick={goAbout}>About</div>
    </div>
  );
}

// GOOD: Semantic HTML
function GoodNav() {
  return (
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  );
}

// Accessible form with error messages
function AccessibleForm() {
  const [error, setError] = useState('');
  
  return (
    <form>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        type="email"
        aria-describedby={error ? 'email-error' : 'email-hint'}
        aria-invalid={!!error}
      />
      <span id="email-hint" className="hint">
        We'll never share your email
      </span>
      {error && (
        <span id="email-error" className="error" role="alert">
          {error}
        </span>
      )}
      <button type="submit">Subscribe</button>
    </form>
  );
}