Web Accessibility (a11y)

<!-- Roles -->
<div role="button" tabindex="0">Click me</div>
<nav role="navigation"></nav>
<main role="main"></main>

<!-- States and properties -->
<button aria-pressed="true">Toggle</button>
<input aria-required="true" aria-invalid="false">
<div aria-expanded="false">Expandable content</div>

<!-- Labels -->
<button aria-label="Close dialog">X</button>
<div aria-labelledby="heading-id"></div>
<div aria-describedby="desc-id"></div>

<!-- Live regions -->
<div aria-live="polite">Status updates</div>
<div aria-live="assertive">Critical alerts</div>

<!-- Good semantic structure -->
<header>
  <nav></nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <section>Content</section>
  </article>
</main>
<footer></footer>

<!-- Accessible forms -->
<label for="email">Email:</label>
<input type="email" id="email" required>

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

// Make custom elements keyboard accessible
element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleClick();
  }
});

// Focus management
element.focus();
const focusable = element.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);