Responsive Design & Accessibility

Two things that aren't optional

Responsive design — making things adapt

/* Mobile-first: default styles apply to all screens */
.card-grid {
  display: flex;
  flex-direction: column; /* Stack cards vertically on mobile */
  gap: 16px;
}

/* When screen is 768px wide or more (tablet+): */
@media (min-width: 768px) {
  .card-grid {
    flex-direction: row;   /* Cards go side by side */
    flex-wrap: wrap;       /* Wrap to next row if needed */
  }
}

/* When screen is 1200px wide or more (desktop): */
@media (min-width: 1200px) {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  }
}

Testing responsiveness in Chrome

Accessibility — designing for everyone

• Semantic HTML — use the right element for the right job. A button should be a <button>, not a <div> you styled to look like a button. A heading should be an <h1> or <h2>, not bold text in a <div>. Why? Screen readers (software used by visually impaired people) read out loud based on HTML structure. A <button> is announced as "button." A <div> that looks like a button is announced as nothing. Also: <button> works with the keyboard by default. <div> doesn't.
• Color contrast — the difference in brightness between your text color and background color must be high enough for people with low vision to read. The minimum standard (called WCAG AA) is a contrast ratio of 4.5:1 for normal text. You can check any two colors at webaim.org/resources/contrastchecker — free, no account needed.
• Alt text on images — every <img> element needs an alt attribute describing what the image shows. Screen readers read this aloud to blind users. <img src="photo.jpg" alt="A smiling person holding a cup of coffee">. If the image is purely decorative, use alt="" — this tells the screen reader to skip it.
• Keyboard navigation — every interactive element (buttons, links, form inputs) should be reachable and usable with just the Tab key, without a mouse. Press Tab on any webpage and watch the focus move through interactive elements. If your button can't be reached by Tab, keyboard users can't use it.

Practical accessibility for designers

• Check contrast ratios in Figma before handoff. Select a text layer — the right panel shows the fill color. Compare it to the background color at webaim.org/resources/contrastchecker. If it fails AA, adjust the colors until it passes.
• Label every interactive element. Buttons that are just icons (like a trash icon or a close X) need an invisible text label in the design spec — called an "aria-label." Note it in your Figma: "aria-label: Delete item."
• Design focus states. Every interactive element has a "focused" state — what it looks like when selected via keyboard. This is often completely forgotten. Design it explicitly: a visible outline, a highlight, anything that shows "this element is selected."
• Test at 200% zoom. In Chrome, press Cmd + + to zoom in to 200%. Does your layout still work? Can you still read everything? This simulates how many users with low vision browse the web.