Accessibility Quick Fixes: Copy-Paste Code Snippets

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

<!-- Informative image -->
<img src="chart.png" alt="Sales increased by 25% in Q4" />

<!-- Functional image (button) -->
<img src="search-icon.png" alt="Search" />

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

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

<!-- Using aria-label -->
<input type="search" aria-label="Search products" />

<!-- Good: Native button with text -->
<button>Submit Form</button>

<!-- Good: Button with aria-label -->
<button aria-label="Close dialog">
  <span aria-hidden="true">×</span>
</button>

<!-- Good: Icon button -->
<button aria-label="Delete item">
  <svg aria-hidden="true">...</svg>
</button>

<h1>Page Title</h1>

<h2>Main Section</h2>
<p>Content...</p>

<h3>Subsection</h3>
<p>Content...</p>

<h2>Another Main Section</h2>
<p>Content...</p>

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

<nav>...</nav>

<main id="main-content" tabindex="-1">
  <!-- Main content here (tabindex="-1" lets focus move here) -->
</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}
</style>

/* Modern approach using :focus-visible */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* Custom focus style */
.custom-focus:focus-visible {
  outline: 2px solid transparent; /* still shows in Windows High Contrast, where box-shadow is dropped */
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
  border-color: #4A90E2;
}

/* Bad: Low contrast */
.bad-text {
  color: #777777;
  background-color: #FFFFFF;
  /* Ratio: 4.48:1, fails AA (needs 4.5:1) */
}

/* Good: High contrast */
.good-text {
  color: #595959;
  background-color: #FFFFFF;
  /* Ratio: 7.0:1, passes AAA */
}

/* Large text (24px, or 18.66px bold) needs only 3:1 */
.large-text {
  font-size: 24px;
  color: #949494;
  background-color: #FFFFFF;
  /* Ratio: 3.03:1, passes AA for large text only */
}

<!-- Polite announcement (waits for user to finish) -->
<div aria-live="polite" aria-atomic="true">
  <p id="status-message"></p>
</div>

<!-- Assertive announcement (interrupts immediately) -->
<div aria-live="assertive" role="alert">
  <p id="error-message"></p>
</div>

<script>
// Update status
document.getElementById('status-message').textContent = 
  'Form submitted successfully';

// Show error
document.getElementById('error-message').textContent = 
  'Error: Please fill in all required fields';
</script>

// Modal dialog with keyboard trap prevention
function openModal() {
  const modal = document.getElementById('modal');
  const closeBtn = modal.querySelector('.close-button');
  
  modal.style.display = 'block';
  closeBtn.focus();
  
  // Trap focus within modal
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeModal();
    }
    
    // Handle Tab key
    if (e.key === 'Tab') {
      const focusableElements = modal.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      const firstElement = focusableElements[0];
      const lastElement = focusableElements[focusableElements.length - 1];
      
      if (e.shiftKey && document.activeElement === firstElement) {
        lastElement.focus();
        e.preventDefault();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        firstElement.focus();
        e.preventDefault();
      }
    }
  });
}

import { ButtonHTMLAttributes, ReactNode } from 'react';

interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant?: 'primary' | 'secondary';
  isLoading?: boolean;
}

export function AccessibleButton({ 
  children, 
  variant = 'primary',
  isLoading = false,
  disabled,
  ...props 
}: AccessibleButtonProps) {
  return (
    <button
      {...props}
      disabled={disabled || isLoading}
      aria-disabled={disabled || isLoading}
      aria-busy={isLoading}
      className={`btn btn-${variant} ${disabled ? 'btn-disabled' : ''}`}
    >
      {isLoading ? (
        <>
          <span className="spinner" aria-hidden="true" />
          <span className="sr-only">Loading...</span>
        </>
      ) : children}
    </button>
  );
}