Accessible Web Design in 2026: WCAG 2.2 Complete Implementation Guide

<!-- Good: Semantic structure -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Page Title</h1>
    <p>Content...</p>
  </article>
</main>

<footer>
  <nav aria-label="Footer navigation">...</nav>
</footer>

<!-- Form accessibility -->
<form>
  <div>
    <label for="email">Email address</label>
    <input 
      id="email" 
      type="email" 
      required
      aria-describedby="email-hint"
    />
    <span id="email-hint">We'll never share your email</span>
  </div>
  
  <button type="submit">Subscribe</button>
</form>

// Accessible modal component
function Modal({ isOpen, onClose, title, children }) {
  const modalRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    if (isOpen) {
      // Trap focus in modal
      modalRef.current?.focus();
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);
  
  if (!isOpen) return null;
  
  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      tabIndex={-1}
      onKeyDown={(e) => e.key === 'Escape' && onClose()}
    >
      <h2 id="modal-title">{title}</h2>
      {children}
      <button onClick={onClose} aria-label="Close modal">
        <XIcon aria-hidden="true" />
      </button>
    </div>,
    document.body
  );
}