Touch Target Demo

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0a0a;
  color: #e4e4e7;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ---- Header ---- */
.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f4f4f5;
  letter-spacing: -0.02em;
}

.header__desc {
  font-size: 0.875rem;
  color: #71717a;
  max-width: 55ch;
  margin-top: 0.25rem;
}

.grid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #a1a1aa;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.grid-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}

.grid-toggle[aria-pressed="true"] {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

/* ---- Comparison layout ---- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .comparison {
    grid-template-columns: 1fr;
  }
}

.section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.5rem;
}

.section--bad {
  border-color: rgba(239, 68, 68, 0.2);
}

.section--good {
  border-color: rgba(16, 185, 129, 0.2);
}

.section__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.section__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
}

.section__badge--bad {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.section__badge--good {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.section__subtitle {
  font-size: 0.8125rem;
  color: #52525b;
}

/* ---- Examples ---- */
.example {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.example:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.example__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #a1a1aa;
  margin-bottom: 0.75rem;
}

.example__demo {
  margin-bottom: 0.5rem;
}

.example__note {
  font-size: 0.6875rem;
  color: #52525b;
  font-style: italic;
}

/* ---- Fake modal (close button demo) ---- */
.fake-modal {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.25rem;
  width: 180px;
}

.fake-modal__text {
  font-size: 0.8125rem;
  color: #71717a;
}

/* Tiny close button (violation) */
.close-btn--tiny {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-size: 10px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Proper close button */
.close-btn--proper {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  font-size: 20px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.close-btn--proper:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Checkboxes ---- */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #a1a1aa;
  cursor: pointer;
}

.checkbox-label--small {
  margin-bottom: 0.25rem;
}

.checkbox-input--small {
  width: 13px;
  height: 13px;
}

.checkbox-label--proper {
  min-height: 44px;
  padding: 0.5rem 0;
  margin-bottom: 0.125rem;
}

.checkbox-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.2s;
  /* The label itself gives 44px hit area */
}

.checkbox-label--proper:hover .checkbox-custom {
  border-color: #8b5cf6;
}

/* ---- Nav links ---- */
.nav-links {
  display: flex;
  flex-wrap: wrap;
}

.nav-links--cramped {
  gap: 4px;
}

.nav-link--small {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  line-height: 1.6;
}

.nav-links--proper {
  gap: 0.5rem;
}

.nav-link--proper {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: background 0.2s;
}

.nav-link--proper:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}

/* ---- Icon buttons ---- */
.icon-row {
  display: flex;
  gap: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-btn--tiny {
  width: 20px;
  height: 20px;
}

.icon-btn--proper {
  width: 44px;
  height: 44px;
}

.icon-btn--proper:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #e4e4e7;
}

/* ---- Link list ---- */
.link-list {
  list-style: none;
}

.link-list--tight li {
  margin-bottom: 2px;
}

.link-list__link--small {
  display: inline;
  font-size: 0.75rem;
  color: #60a5fa;
  line-height: 1.2;
}

.link-list--proper li {
  margin-bottom: 2px;
}

.link-list__link--proper {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: #60a5fa;
  border-radius: 8px;
  transition: background 0.2s;
}

.link-list__link--proper:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* ---- Size tooltip ---- */
.size-tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #e4e4e7;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}

.size-tooltip.visible {
  opacity: 1;
}

.size-tooltip .fail {
  color: #f87171;
}

.size-tooltip .pass {
  color: #34d399;
}

/* ---- Measurement outline on hover ---- */
.target-measure {
  position: relative;
}

.target-measure.measuring {
  outline: 2px dashed rgba(139, 92, 246, 0.6);
  outline-offset: 1px;
}

/* ---- Grid overlay ---- */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 43px,
      rgba(139, 92, 246, 0.12) 43px,
      rgba(139, 92, 246, 0.12) 44px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 43px,
      rgba(139, 92, 246, 0.12) 43px,
      rgba(139, 92, 246, 0.12) 44px
    );
  background-size: 44px 44px;
}

.grid-overlay.visible {
  opacity: 1;
}

(() => {
  const gridToggle = document.getElementById("grid-toggle");
  const gridOverlay = document.getElementById("grid-overlay");
  const tooltip = document.getElementById("size-tooltip");
  const measurables = document.querySelectorAll(".target-measure");

  // Grid overlay toggle
  gridToggle.addEventListener("click", () => {
    const active = gridOverlay.classList.toggle("visible");
    gridToggle.setAttribute("aria-pressed", String(active));
  });

  // Show dimensions on hover/click
  let activeEl = null;

  function showTooltip(el, e) {
    const rect = el.getBoundingClientRect();
    const w = Math.round(rect.width);
    const h = Math.round(rect.height);
    const passes = w >= 44 && h >= 44;

    tooltip.innerHTML = `<span class="${passes ? "pass" : "fail"}">${w} &times; ${h}px</span> ${passes ? " Pass" : " Fail"}`;
    tooltip.classList.add("visible");

    // Position tooltip near cursor
    const tx = e.clientX + 14;
    const ty = e.clientY - 10;
    tooltip.style.left = tx + "px";
    tooltip.style.top = ty + "px";

    // Ensure tooltip doesn't go off-screen
    requestAnimationFrame(() => {
      const tr = tooltip.getBoundingClientRect();
      if (tr.right > window.innerWidth) {
        tooltip.style.left = e.clientX - tr.width - 10 + "px";
      }
      if (tr.bottom > window.innerHeight) {
        tooltip.style.top = e.clientY - tr.height - 10 + "px";
      }
    });
  }

  function hideTooltip() {
    tooltip.classList.remove("visible");
    if (activeEl) {
      activeEl.classList.remove("measuring");
      activeEl = null;
    }
  }

  measurables.forEach((el) => {
    el.addEventListener("mouseenter", (e) => {
      if (activeEl) activeEl.classList.remove("measuring");
      activeEl = el;
      el.classList.add("measuring");
      showTooltip(el, e);
    });

    el.addEventListener("mousemove", (e) => {
      if (activeEl === el) {
        const tx = e.clientX + 14;
        const ty = e.clientY - 10;
        tooltip.style.left = tx + "px";
        tooltip.style.top = ty + "px";
      }
    });

    el.addEventListener("mouseleave", () => {
      hideTooltip();
    });

    // Also show on click for touch devices
    el.addEventListener("click", (e) => {
      e.preventDefault();
      if (activeEl === el && tooltip.classList.contains("visible")) {
        hideTooltip();
      } else {
        if (activeEl) activeEl.classList.remove("measuring");
        activeEl = el;
        el.classList.add("measuring");
        showTooltip(el, e);
      }
    });
  });

  // Hide tooltip when clicking elsewhere
  document.addEventListener("click", (e) => {
    if (!e.target.closest(".target-measure") && !e.target.closest(".grid-toggle")) {
      hideTooltip();
    }
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Touch Target Demo</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="container">
    <header class="header">
      <div class="header__text">
        <h1 class="header__title">Touch Target Sizes</h1>
        <p class="header__desc">WCAG 2.5.5 requires a minimum target size of 44&times;44 CSS pixels. Hover or click any element to see its actual dimensions.</p>
      </div>
      <button class="grid-toggle" id="grid-toggle" aria-pressed="false">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <rect x="1" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/>
          <rect x="10" y="1" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/>
          <rect x="1" y="10" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/>
          <rect x="10" y="10" width="7" height="7" rx="1" stroke="currentColor" stroke-width="1.5"/>
        </svg>
        44px Grid Overlay
      </button>
    </header>

    <div class="comparison">
      <!-- ============ VIOLATIONS ============ -->
      <section class="section section--bad">
        <div class="section__header">
          <span class="section__badge section__badge--bad">Violations</span>
          <span class="section__subtitle">Common sizing mistakes</span>
        </div>

        <!-- Tiny close button -->
        <div class="example">
          <h3 class="example__title">Close Button</h3>
          <div class="example__demo">
            <div class="fake-modal fake-modal--small">
              <span class="fake-modal__text">Modal Content</span>
              <button class="close-btn close-btn--tiny target-measure" aria-label="Close">&times;</button>
            </div>
          </div>
          <p class="example__note">16&times;16px -- too small to tap accurately</p>
        </div>

        <!-- Small checkboxes -->
        <div class="example">
          <h3 class="example__title">Checkboxes</h3>
          <div class="example__demo">
            <label class="checkbox-label checkbox-label--small">
              <input type="checkbox" class="checkbox-input checkbox-input--small target-measure" />
              <span>Accept terms</span>
            </label>
            <label class="checkbox-label checkbox-label--small">
              <input type="checkbox" class="checkbox-input checkbox-input--small target-measure" />
              <span>Subscribe</span>
            </label>
          </div>
          <p class="example__note">13&times;13px native checkboxes -- hard to tap</p>
        </div>

        <!-- Cramped navigation -->
        <div class="example">
          <h3 class="example__title">Navigation Links</h3>
          <div class="example__demo">
            <nav class="nav-links nav-links--cramped">
              <a href="#" class="nav-link nav-link--small target-measure">Home</a>
              <a href="#" class="nav-link nav-link--small target-measure">About</a>
              <a href="#" class="nav-link nav-link--small target-measure">Services</a>
              <a href="#" class="nav-link nav-link--small target-measure">Blog</a>
              <a href="#" class="nav-link nav-link--small target-measure">Contact</a>
            </nav>
          </div>
          <p class="example__note">24px height, 4px gaps -- targets overlap</p>
        </div>

        <!-- Small icon buttons -->
        <div class="example">
          <h3 class="example__title">Icon Buttons</h3>
          <div class="example__demo">
            <div class="icon-row">
              <button class="icon-btn icon-btn--tiny target-measure" aria-label="Like">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 10.5S1 7.5 1 4.5a2.5 2.5 0 015 0 2.5 2.5 0 015 0c0 3-5 6-5 6z" fill="currentColor"/></svg>
              </button>
              <button class="icon-btn icon-btn--tiny target-measure" aria-label="Share">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="9" cy="3" r="1.5" stroke="currentColor"/><circle cx="3" cy="6" r="1.5" stroke="currentColor"/><circle cx="9" cy="9" r="1.5" stroke="currentColor"/><path d="M4.5 5.2l3-1.4M4.5 6.8l3 1.4" stroke="currentColor"/></svg>
              </button>
              <button class="icon-btn icon-btn--tiny target-measure" aria-label="Bookmark">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M3 1h6v10L6 8.5 3 11V1z" stroke="currentColor" stroke-width="1.2"/></svg>
              </button>
            </div>
          </div>
          <p class="example__note">20&times;20px -- below minimum</p>
        </div>

        <!-- Tight link list -->
        <div class="example">
          <h3 class="example__title">Link List</h3>
          <div class="example__demo">
            <ul class="link-list link-list--tight">
              <li><a href="#" class="link-list__link link-list__link--small target-measure">Getting Started Guide</a></li>
              <li><a href="#" class="link-list__link link-list__link--small target-measure">API Reference</a></li>
              <li><a href="#" class="link-list__link link-list__link--small target-measure">FAQ &amp; Troubleshooting</a></li>
              <li><a href="#" class="link-list__link link-list__link--small target-measure">Community Forum</a></li>
            </ul>
          </div>
          <p class="example__note">No padding, 2px spacing -- tap targets overlap</p>
        </div>
      </section>

      <!-- ============ CORRECT ============ -->
      <section class="section section--good">
        <div class="section__header">
          <span class="section__badge section__badge--good">Correct</span>
          <span class="section__subtitle">Proper 44&times;44px targets</span>
        </div>

        <!-- Proper close button -->
        <div class="example">
          <h3 class="example__title">Close Button</h3>
          <div class="example__demo">
            <div class="fake-modal">
              <span class="fake-modal__text">Modal Content</span>
              <button class="close-btn close-btn--proper target-measure" aria-label="Close">&times;</button>
            </div>
          </div>
          <p class="example__note">44&times;44px -- easy to tap on any device</p>
        </div>

        <!-- Proper checkboxes -->
        <div class="example">
          <h3 class="example__title">Checkboxes</h3>
          <div class="example__demo">
            <label class="checkbox-label checkbox-label--proper">
              <span class="checkbox-custom target-measure"></span>
              <input type="checkbox" class="sr-only" />
              <span>Accept terms</span>
            </label>
            <label class="checkbox-label checkbox-label--proper">
              <span class="checkbox-custom target-measure"></span>
              <input type="checkbox" class="sr-only" />
              <span>Subscribe</span>
            </label>
          </div>
          <p class="example__note">44&times;44px tap area via padding on label</p>
        </div>

        <!-- Proper navigation -->
        <div class="example">
          <h3 class="example__title">Navigation Links</h3>
          <div class="example__demo">
            <nav class="nav-links nav-links--proper">
              <a href="#" class="nav-link nav-link--proper target-measure">Home</a>
              <a href="#" class="nav-link nav-link--proper target-measure">About</a>
              <a href="#" class="nav-link nav-link--proper target-measure">Services</a>
              <a href="#" class="nav-link nav-link--proper target-measure">Blog</a>
              <a href="#" class="nav-link nav-link--proper target-measure">Contact</a>
            </nav>
          </div>
          <p class="example__note">44px min-height with adequate spacing</p>
        </div>

        <!-- Proper icon buttons -->
        <div class="example">
          <h3 class="example__title">Icon Buttons</h3>
          <div class="example__demo">
            <div class="icon-row">
              <button class="icon-btn icon-btn--proper target-measure" aria-label="Like">
                <svg width="18" height="18" viewBox="0 0 12 12" fill="none"><path d="M6 10.5S1 7.5 1 4.5a2.5 2.5 0 015 0 2.5 2.5 0 015 0c0 3-5 6-5 6z" fill="currentColor"/></svg>
              </button>
              <button class="icon-btn icon-btn--proper target-measure" aria-label="Share">
                <svg width="18" height="18" viewBox="0 0 12 12" fill="none"><circle cx="9" cy="3" r="1.5" stroke="currentColor"/><circle cx="3" cy="6" r="1.5" stroke="currentColor"/><circle cx="9" cy="9" r="1.5" stroke="currentColor"/><path d="M4.5 5.2l3-1.4M4.5 6.8l3 1.4" stroke="currentColor"/></svg>
              </button>
              <button class="icon-btn icon-btn--proper target-measure" aria-label="Bookmark">
                <svg width="18" height="18" viewBox="0 0 12 12" fill="none"><path d="M3 1h6v10L6 8.5 3 11V1z" stroke="currentColor" stroke-width="1.2"/></svg>
              </button>
            </div>
          </div>
          <p class="example__note">44&times;44px -- meets WCAG 2.5.5</p>
        </div>

        <!-- Proper link list -->
        <div class="example">
          <h3 class="example__title">Link List</h3>
          <div class="example__demo">
            <ul class="link-list link-list--proper">
              <li><a href="#" class="link-list__link link-list__link--proper target-measure">Getting Started Guide</a></li>
              <li><a href="#" class="link-list__link link-list__link--proper target-measure">API Reference</a></li>
              <li><a href="#" class="link-list__link link-list__link--proper target-measure">FAQ &amp; Troubleshooting</a></li>
              <li><a href="#" class="link-list__link link-list__link--proper target-measure">Community Forum</a></li>
            </ul>
          </div>
          <p class="example__note">44px row height with padding -- comfortable tapping</p>
        </div>
      </section>
    </div>

    <!-- Dimension tooltip -->
    <div class="size-tooltip" id="size-tooltip" aria-hidden="true"></div>
  </div>

  <!-- 44px grid overlay -->
  <div class="grid-overlay" id="grid-overlay" aria-hidden="true"></div>

  <script src="script.js"></script>
</body>
</html>