<!-- Good - semantic structure -->
<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>
 
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>
 
<footer>
  <p>&copy; 2024 My Website</p>
</footer>
 
<!-- Avoid - non-semantic -->
<div class="header">
  <div class="nav">
    <div class="nav-item">
      <a href="/">Home</a>
    </div>
  </div>
</div>

<!-- Good - keyboard accessible -->
<button onclick="submitForm()">Submit</button>
<a href="/contact" tabindex="0">Contact Us</a>
 
<!-- Avoid - non-keyboard accessible -->
<div onclick="submitForm()" class="button">Submit</div>
<div class="link">Contact Us</div>

/* Visible focus indicators */
button:focus,
a:focus,
input:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
 
/* Skip links for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}
 
.skip-link:focus {
  top: 6px;
}

/* Good contrast ratios */
.text-primary {
  color: #000000; /* Black text on white background = 21:1 */
}
 
.text-secondary {
  color: #595959; /* Dark gray on white = 7:1 */
}
 
/* Avoid low contrast */
.text-poor {
  color: #cccccc; /* Light gray on white = 1.6:1 - too low! */
}

/* Don't rely solely on color to convey information */
.success {
  color: #28a745;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}
 
.error {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
 
/* Add icons or text labels */
.success::before {
  content: "✓ ";
}
 
.error::before {
  content: "✗ ";
}

<!-- Good - descriptive alt text -->
<img src="chart.png" alt="Bar chart showing sales growth of 25% from Q1 to Q2 2024">
 
<!-- Avoid - generic alt text -->
<img src="chart.png" alt="chart">
 
<!-- Good - decorative images -->
<img src="decoration.png" alt="" role="presentation">
 
<!-- Video with captions -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

<!-- Good - explicit labels -->
<form>
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>
 
<!-- Good - fieldset for groups -->
<fieldset>
  <legend>Shipping Address</legend>
  <label for="street">Street:</label>
  <input type="text" id="street" name="street">
  
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
</fieldset>

<!-- Good - clear error messages -->
<label for="email">Email:</label>
<input 
  type="email" 
  id="email" 
  name="email" 
  aria-describedby="email-error"
  aria-invalid="true"
>
<div id="email-error" class="error-message">
  Please enter a valid email address.
</div>

<!-- Good - ARIA labels and roles -->
<button aria-label="Close dialog" aria-expanded="false">
  <span class="icon">×</span>
</button>
 
<div role="alert" aria-live="polite">
  Your changes have been saved successfully.
</div>
 
<nav role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Tab interface -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">
    Tab 1
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel2">
    Tab 2
  </button>
</div>
 
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  Content for tab 1
</div>
 
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
  Content for tab 2
</div>

// Using axe-core for automated testing
import axe from 'axe-core';
 
axe.run((err, results) => {
  if (err) {
    console.error('Error running axe:', err);
    return;
  }
  
  console.log('Accessibility violations:', results.violations);
});

// Check if an element is focusable
const element = document.getElementById('my-button');
console.log(element.tabIndex); // Should be 0 or positive
 
// Check ARIA attributes
console.log(element.getAttribute('aria-label'));
console.log(element.getAttribute('role'));

<!-- Good - lazy loading with accessibility -->
<img 
  src="placeholder.jpg" 
  data-src="actual-image.jpg" 
  alt="Description of image"
  loading="lazy"
  onload="this.src = this.dataset.src"
>
 
<!-- Good - preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="fonts.woff2" as="font" crossorigin>

/* Ensure touch targets are large enough */
button, a, input[type="submit"] {
  min-height: 44px;
  min-width: 44px;
}
 
/* Avoid hover-only interactions on mobile */
@media (hover: none) {
  .hover-only {
    display: none;
  }
}
 
/* Ensure sufficient spacing between interactive elements */
nav a {
  margin: 8px;
  padding: 12px;
}