<!-- Bad: Divs for everything -->
<div onclick="submit()">Submit</div>

<!-- Good: Semantic HTML -->
<button type="submit">Submit</button>

<!-- Headings -->
<h1>Main Title</h1>
<h2>Section Title</h2>

<!-- Navigation -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<!-- Main content -->
<main>
  <article>
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
</main>

<!-- Forms -->
<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit</button>
</form>

<!-- Bad: Custom button without ARIA -->
<div class="button" onclick="handleClick()">Click me</div>

<!-- Good: Use button -->
<button onclick="handleClick()">Click me</button>

<!-- When you must use div, add ARIA -->
<div 
  role="button" 
  tabindex="0"
  onclick="handleClick()"
  onkeydown="handleKeyDown(event)"
>
  Click me
</div>

<!-- Labels -->
<button aria-label="Close dialog">×</button>

<!-- Descriptions -->
<input 
  type="text"
  aria-describedby="email-help"
/>
<span id="email-help">Enter your email address</span>

<!-- States -->
<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<div id="menu" aria-hidden="true">
  <!-- Menu items -->
</div>

<!-- Live regions -->
<div aria-live="polite" aria-atomic="true">
  <!-- Dynamic content updates -->
</div>

// Ensure all interactive elements are keyboard accessible
function handleKeyDown(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    handleClick();
  }
}

// Manage focus
function openModal() {
  modal.show();
  // Focus first interactive element
  modal.querySelector('input').focus();
}

function closeModal() {
  modal.hide();
  // Return focus to trigger
  triggerButton.focus();
}

<!-- Logical tab order -->
<button>First</button>
<button>Second</button>
<button>Third</button>

<!-- Skip links -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Bad: No label -->
<input type="text" name="email" />

<!-- Good: Explicit label -->
<label for="email">Email</label>
<input type="email" id="email" name="email" />

<!-- Good: Implicit label -->
<label>
  Email
  <input type="email" name="email" />
</label>

<!-- Associate errors with inputs -->
<label for="email">Email</label>
<input 
  type="email" 
  id="email"
  name="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Please enter a valid email address
</span>

<label for="name">
  Name
  <span aria-label="required">*</span>
</label>
<input 
  type="text" 
  id="name"
  name="name"
  required
  aria-required="true"
/>

<!-- Decorative image -->
<img src="decoration.jpg" alt="" />

<!-- Informative image -->
<img 
  src="chart.jpg" 
  alt="Sales increased 25% from Q1 to Q2"
/>

<!-- Complex image -->
<img 
  src="diagram.jpg" 
  alt=""
  aria-describedby="diagram-description"
/>
<p id="diagram-description">
  System architecture showing three tiers: frontend, API, database
</p>

/* Good: High contrast */
.button {
  background: #0066cc;
  color: #ffffff; /* Contrast: 7:1 */
}

/* Bad: Low contrast */
.button {
  background: #cccccc;
  color: #ffffff; /* Contrast: 1.6:1 - fails */
}

<!-- Bad: Color only -->
<span style="color: red">Error</span>

<!-- Good: Color + icon/text -->
<span style="color: red" aria-label="Error">
  <span aria-hidden="true">⚠️</span> Error: Invalid input
</span>

/* Good: Visible focus */
button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Bad: Remove focus */
button:focus {
  outline: none; /* Don't do this! */
}

<!-- Use headings for structure -->
<h1>Page Title</h1>
<h2>Section Title</h2>

<!-- Use landmarks -->
<nav aria-label="Main navigation">
  <!-- Navigation -->
</nav>

<main>
  <!-- Main content -->
</main>

<aside aria-label="Related articles">
  <!-- Sidebar -->
</aside>

<!-- Bad -->
<img src="photo.jpg" />

<!-- Good -->
<img src="photo.jpg" alt="Team meeting in conference room" />

/* Bad */
.text { color: #999999; } /* Low contrast */

/* Good */
.text { color: #333333; } /* High contrast */

<!-- Bad -->
<input type="text" name="email" />

<!-- Good -->
<label for="email">Email</label>
<input type="email" id="email" name="email" />

<!-- Bad -->
<div onclick="handleClick()">Click me</div>

<!-- Good -->
<button onclick="handleClick()">Click me</button>

// axe-core
const axe = require('axe-core');

async function testAccessibility() {
  const results = await axe.run();
  console.log(results.violations);
}