Responsive Design & Accessibility

The Big Picture

Over 60% of web traffic comes from mobile devices. Around 15% of the world’s population has some form of disability. Responsive design and accessibility aren’t nice-to-haves — they’re the baseline for professional frontend work.

Mobile-First Design

Mobile-first means writing your base CSS for small screens first, then adding complexity for larger screens with min-width media queries. This ensures mobile users get a fast, clean experience.

/* Base: mobile styles (no media query needed) */
.container {
  padding: 1rem;
  max-width: 100%;
}

.hero-title {
  font-size: 1.5rem;
}

.nav-links {
  display: none; /* Hidden on mobile — use hamburger menu */
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 768px;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .nav-links {
    display: flex;
    gap: 2rem;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }

  .hero-title {
    font-size: 3.5rem;
  }
}

Responsive Images

Images are often the largest assets on a page. Serve the right size for each device to save bandwidth and improve load times.

<!-- Basic responsive image -->
<img src="photo.jpg"
     alt="Team working together"
     loading="lazy"
     style="max-width: 100%; height: auto;">

<!-- Responsive with multiple sizes -->
<img srcset="photo-400w.jpg 400w,
             photo-800w.jpg 800w,
             photo-1200w.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     src="photo-800w.jpg"
     alt="Team working together"
     loading="lazy">

<!-- Art direction: different crops for different screens -->
<picture>
  <source media="(max-width: 600px)" srcset="photo-portrait.jpg">
  <source media="(max-width: 1000px)" srcset="photo-square.jpg">
  <img src="photo-landscape.jpg" alt="Team working together" loading="lazy">
</picture>

Responsive Typography

Use relative units and clamp() for text that scales smoothly across screen sizes.

/* Fixed sizes — bad (doesn't scale) */
h1 { font-size: 48px; }

/* Relative units — better */
h1 { font-size: 2.5rem; } /* relative to root font size */

/* clamp() — best (fluid scaling with min/max limits) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3.5rem);
  /* minimum: 1.5rem, scales with viewport, maximum: 3.5rem */
}

body {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
  line-height: 1.6;
}

WCAG Accessibility Basics

The Web Content Accessibility Guidelines (WCAG) define four principles (POUR):

Semantic HTML for Accessibility

The single most impactful thing you can do for accessibility is use semantic HTML. Screen readers use the HTML structure to navigate.

<!-- Skip link: first focusable element on the page -->
<a href="#main" class="skip-link">Skip to content</a>

<!-- Landmark regions that screen readers announce -->
<header>...</header>  <!-- "Banner" landmark -->
<nav>...</nav>        <!-- "Navigation" landmark -->
<main id="main">      <!-- "Main" landmark -->
  <article>...</article>
</main>
<aside>...</aside>    <!-- "Complementary" landmark -->
<footer>...</footer>  <!-- "Content info" landmark -->

<!-- Headings: create a navigable outline -->
<h1>Page Title</h1>         <!-- One per page -->
  <h2>Section</h2>           <!-- Never skip levels -->
    <h3>Subsection</h3>

<!-- Buttons vs Links -->
<button>Save</button>         <!-- Actions -->
<a href="/about">About</a>   <!-- Navigation -->

<!-- Forms: labels are mandatory -->
<label for="email">Email</label>
<input type="email" id="email" required>

ARIA Roles & Attributes

ARIA (Accessible Rich Internet Applications) fills accessibility gaps that semantic HTML can’t cover. Use it as a supplement, not a replacement.

<!-- Modal dialog -->
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Confirm Action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

<!-- Live region: announces changes to screen readers -->
<div aria-live="polite" id="status"></div>

<!-- Icon button: needs a label -->
<button aria-label="Close menu">
  <svg>...</svg> <!-- X icon -->
</button>

<!-- Expandable section -->
<button aria-expanded="false" aria-controls="details-panel">
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details here...</p>
</div>

<!-- Loading state -->
<div aria-busy="true" aria-live="polite">
  Loading results...
</div>

Keyboard Navigation

Many users navigate with keyboards only — people with motor disabilities, power users, and screen reader users. Every interactive element must be keyboard accessible.

/* Make focus visible — NEVER remove it without a replacement */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Hide the default outline only for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link (visually hidden until focused) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

// Trap focus inside a modal
function trapFocus(modal) {
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  modal.addEventListener('keydown', function(e) {
    if (e.key !== 'Tab') return;

    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  });

  first.focus();
}

Color Contrast

Low contrast text is unreadable for users with low vision, color blindness, or in bright sunlight.

/* Good contrast examples */
body {
  color: #1a1a2e;       /* dark text */
  background: #ffffff;   /* white bg — contrast ratio: 16:1 ✅ */
}

/* Don't rely on color alone to convey information */
.error-field {
  border: 2px solid #dc2626;  /* red border */
  /* ALSO add an icon or text — don't rely on color alone */
}
.error-message {
  color: #dc2626;
  /* Prefix with icon: ⚠️ Error: ... */
}

Performance Essentials

Performance is part of accessibility — slow sites are unusable on slow connections. These are the key metrics and techniques.

<!-- Prevent CLS: set dimensions on images -->
<img src="hero.jpg" width="1200" height="600" alt="..." loading="lazy">

<!-- Prevent CLS: reserve space for dynamic content -->
<div style="min-height: 60px;">
  <!-- Header loaded via JavaScript -->
</div>

<!-- Preload critical resources -->
<link rel="preload" href="/css/style.css" as="style">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

<!-- Defer non-critical JavaScript -->
<script src="/js/analytics.js" defer></script>

<!-- Non-blocking font loading -->
<link rel="preload" href="fonts.css" as="style" onload="this.rel='stylesheet'">

Interview Questions