<!-- Good: Semantic headings -->
<h1>Main page heading</h1>
<h2>Section heading</h2>
<h3>Subsection heading</h3>

<!-- Good: Semantic form elements -->
<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

<!-- Good: Semantic navigation -->
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<!-- Custom component with ARIA -->
<div role="tablist">
  <button 
    role="tab" 
    aria-selected="true" 
    aria-controls="panel1"
    id="tab1"
  >
    Tab 1
  </button>
  <div 
    role="tabpanel" 
    aria-labelledby="tab1"
    id="panel1"
  >
    Content for tab 1
  </div>
</div>

<!-- Progress indicator -->
<div role="progressbar" 
     aria-valuenow="75" 
     aria-valuemin="0" 
     aria-valuemax="100">
  75% complete
</div>

/* Make focus visible */
*:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

/* Skip links for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 6px;
}

// Custom keyboard handling
const handleKeyDown = (event) => {
  switch(event.key) {
    case 'Enter':
    case ' ':
      // Activate button
      handleClick();
      break;
    case 'Escape':
      // Close modal
      closeModal();
      break;
    case 'ArrowDown':
      // Move focus to next item
      focusNextItem();
      break;
  }
};

/* Good contrast ratios */
.text-primary {
  color: #1a1a1a; /* High contrast on white background */
}

.text-secondary {
  color: #666666; /* Still readable */
}

/* Don't rely on color alone */
.error-message {
  color: #d32f2f;
  font-weight: bold;
}

/* Use icons or text in addition to color */
.status-success::before {
  content: "✓";
  color: #2e7d32;
}

<!-- Descriptive alt text -->
<img src="team-photo.jpg" alt="Our development team posing together at the annual conference">

<!-- Decorative images -->
<img src="divider.png" alt="" role="presentation">

<!-- Complex images -->
<img src="chart.png" alt="Bar chart showing user growth: January 1,000 users, February 1,500 users, March 2,200 users">

<!-- Video with captions -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

<form>
  <div>
    <label for="email">Email Address *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      required
      aria-describedby="email-help email-error"
    >
    <span id="email-help">We'll never share your email with anyone else.</span>
    <span id="email-error" class="error" role="alert">Please enter a valid email address.</span>
  </div>
  
  <button type="submit">Subscribe</button>
</form>

// Announce dynamic content changes
const announceChange = (message) => {
  const announcement = document.createElement('div');
  announcement.setAttribute('aria-live', 'polite');
  announcement.setAttribute('aria-atomic', 'true');
  announcement.style.position = 'absolute';
  announcement.style.left = '-10000px';
  announcement.style.width = '1px';
  announcement.style.height = '1px';
  announcement.style.overflow = 'hidden';
  
  document.body.appendChild(announcement);
  announcement.textContent = message;
  
  setTimeout(() => {
    document.body.removeChild(announcement);
  }, 1000);
};

// Update loading states
const showLoading = (button) => {
  button.setAttribute('aria-disabled', 'true');
  button.textContent = 'Loading...';
  announceChange('Loading, please wait.');
};

# Install accessibility testing tools
npm install --save-dev axe-core jest-axe

# Run accessibility tests
npx jest --testPathPattern=accessibility

import { axe, toHaveNoViolations } from 'jest-axe';
import { render } from '@testing-library/react';

expect.extend(toHaveNoViolations);

test('Homepage is accessible', async () => {
  const { container } = render(<HomePage />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

// Lazy load images with proper alt text
import { useState, useRef, useEffect } from 'react';

function LazyImage({ src, alt, ...props }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          imgRef.current.src = src;
          setIsLoaded(true);
          observer.disconnect();
        }
      }
    );
    
    if (imgRef.current) {
      observer.observe(imgRef.current);
    }
    
    return () => observer.disconnect();
  }, [src]);

  return (
    <img
      ref={imgRef}
      alt={alt}
      {...props}
      aria-hidden={!isLoaded}
    />
  );
}