Build interfaces that work for everyone on every screen: WCAG 2.2, keyboard and ARIA, fluid layouts, responsive images and real audits.

Accessible & Responsive Interfaces

## Why this matters

Your page will be read on a 320 px phone, a 1440 px laptop and a 4K monitor, by people who have set their browser's default text size larger, or who zoom to 200 or 400 percent. Fixed pixel sizes fight all of that. Relative units and `clamp()` let type and spacing scale smoothly with both the screen and the reader's own settings, which is good design and a WCAG requirement (1.4.4 Resize Text and 1.4.10 Reflow, both AA).

## Relative units, briefly

| Unit | Relative to | Good for |
|---|---|---|
| `rem` | The root (`html`) font size, 16 px by default | Font sizes, spacing, breakpoints |
| `em` | The current element's font size | Padding on buttons that should grow with their text |
| `ch` | The width of the "0" character | Line length (`max-width: 65ch`) |
| `%` | The parent's size | Widths inside a container |
| `vw` / `vh` | 1 percent of the viewport width / height | The *fluid part* of a `clamp()` |
| `dvh`, `svh`, `lvh` | Dynamic, small and large viewport heights | Full-height sections on mobile, where browser toolbars come and go |

The most important rule: **never set the root font size in pixels.** `html { font-size: 16px; }` overrides the reader's browser setting. If someone has chosen 20 px default text because of low vision, you just took it away. Leave the root alone, or use a percentage (`font-size: 100%`), and size everything else in `rem`.

## clamp(): fluid with limits

`clamp(MIN, PREFERRED, MAX)` returns the preferred value, but never less than MIN or more than MAX:

```css
h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}
```

- On a narrow phone, `1.5rem + 2.5vw` is small, so the heading stops at `2rem` (32 px by default).
- As the window grows, the `vw` part grows, and the heading scales smoothly.
- On a wide screen it stops at `3.5rem`.

Why `1.5rem + 2.5vw` and not just `5vw`? Because viewport units **do not respond to text zoom**. With pure `vw`, a user pressing Ctrl and + sees the layout shift but the heading stays the same size, which can fail 1.4.4. Mixing a `rem` term into the preferred value keeps it zoomable. Keep the MAX no more than about 2.5 times the MIN so 200 percent zoom still makes a real difference.

`min()` and `max()` are the one-sided versions: `width: min(100%, 60rem)` means "fill the space, but never wider than 60rem".

## Fluid spacing with tokens

Spacing should scale too, or a big heading ends up cramped on a laptop and enormous gaps eat a phone screen. Define a small set of spacing **tokens** as custom properties, then use only those:

```css
:root {
  --space-s: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-m: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-l: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
}

.card { padding: var(--space-m); }
.stack > * + * { margin-block-start: var(--space-s); }
```

Tokens keep a design consistent and make changes a one-line edit. Design systems call these "design tokens", and they are often generated from the same values designers use in Figma. Tools such as the free Utopia calculator (utopia.fyi) produce matching type and space scales for you.

## Readable line length

Long lines are hard to track back to the start of the next line, especially for people with dyslexia or low vision. Limit body text to roughly 45 to 75 characters:

```css
.prose p { max-width: 65ch; }
body { line-height: 1.5; }
```

`line-height` without a unit (1.5) scales with the font size. A unit-less value is also what WCAG 1.4.12 Text Spacing expects users to be able to override without breaking the layout, so avoid fixed heights on text containers.

## Worked example: converting a fixed design

A designer hands you a desktop mock-up: 48 px heading, 18 px body, 24 px card padding, 960 px content width. A fixed translation would be:

```css
html { font-size: 16px; }
h1 { font-size: 48px; }
.card { padding: 24px; width: 960px; }
```

A fluid, accessible translation:

```css
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); }  /* 32 px to 48 px */
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.5; } /* 16 to 18 */
.card { padding: var(--space-m); }
.container { width: min(100% - 2rem, 60rem); margin-inline: auto; }
```

The desktop result is the same as the mock-up. The phone version is no longer squeezed, and every size follows the reader's preferences.

## Common mistakes

- Setting `html { font-size: 62.5%; }` or a pixel value to make "1rem = 10px". It still works with user settings if it is a percentage, but it confuses teams; prefer the default.
- Pure `vw` font sizes, which ignore zoom.
- A `clamp()` with MIN larger than MAX (MIN wins, silently).
- Fixed `height` on text boxes, which clips text when users increase spacing.
- Too many one-off sizes instead of a token scale.

## Quick recap

- Size type and spacing in `rem`; never fix the root font size in px.
- `clamp(min, rem + vw, max)` gives fluid sizes that still zoom.
- Put spacing in a few custom-property tokens.
- Cap paragraphs at about `65ch` and use a unit-less `line-height`.
- Reference: [MDN: clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) and [WCAG Understanding 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html).

## Try it

Open the **Do** tab and convert a fixed-pixel page to fluid type and spacing.


Use rem, clamp() and spacing tokens so type and space scale with the screen and the reader's settings.

Fluid type and spacing

Simple solutions to responsive typography

min(), max(), and clamp() are CSS magic!

## Why this matters

A layout that only works at the width it was designed for breaks for most visitors: phones, tablets, split-screen windows and anyone zoomed to 400 percent. WCAG 1.4.10 Reflow (AA) requires that content works at 320 CSS px wide without horizontal scrolling (except for things like maps and data tables that genuinely need two dimensions). Modern CSS can do most of this with no media queries at all.

## Mobile-first, then let content decide

Start with a single column, which works on any screen, and add complexity only where there is room. Instead of guessing device widths ("iPhone", "iPad"), let the **content** decide: add a breakpoint when the layout starts to look wrong. Write breakpoints in `em` or `rem` so they also respond to zoom:

```css
.page { display: grid; gap: 1rem; }
@media (min-width: 48em) {
  .page { grid-template-columns: 16rem 1fr; }  /* sidebar appears when there is room */
}
```

## Pattern 1: the auto-fit card grid

This one line creates as many columns as fit, each at least 15rem wide, sharing extra space equally:

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}
```

Read it inside out:

- `minmax(15rem, 1fr)`: each column is at least 15rem and at most an equal share.
- `min(15rem, 100%)`: on a screen narrower than 15rem (or at high zoom), the minimum becomes 100 percent instead, so the card never overflows. Without this guard, a 320 px screen with a 15rem (240 px) minimum is fine, but larger minimums cause sideways scrolling.
- `auto-fit` vs `auto-fill`: both create as many tracks as fit. With few items, `auto-fit` collapses empty tracks so items stretch; `auto-fill` keeps the empty tracks.

No media query is needed: the browser reflows from one column to four as space allows. Kevin Powell and others call these "intrinsic" or "breakpoint-free" layouts.

## Pattern 2: wrapping rows with Flexbox

For a row of navigation links, tags or buttons:

```css
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  list-style: none;
  padding: 0;
}
```

`flex-wrap: wrap` lets items move to a new line instead of overflowing. `gap` spaces them evenly without margin hacks.

## Pattern 3: the sidebar that drops below

```css
.with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
.with-sidebar > aside { flex: 1 1 15rem; }
.with-sidebar > main  { flex: 999 1 30rem; }
```

The main area grows much faster, and when there is not room for 15rem plus 30rem the sidebar wraps underneath. Again, no breakpoint.

## Pattern 4: container queries

Media queries ask "how wide is the window?". A card in a narrow sidebar and the same card in a wide main column need different layouts, even though the window is the same. **Container queries** ask "how wide is my container?" and are supported in all current browsers:

```css
.card-wrap { container-type: inline-size; }

.card { display: grid; gap: 0.5rem; }
@container (min-width: 28rem) {
  .card { grid-template-columns: 8rem 1fr; }  /* image beside text when the card is wide */
}
```

`container-type: inline-size` makes the element a query container for its width. Components that adapt to their own space are much easier to reuse in a design system.

## Worked example: fixing a fixed-width card row

The broken version:

```css
.cards { display: flex; }
.card  { width: 300px; flex-shrink: 0; }
```

Four cards need 1200 px. On a phone, three of them hang off the right edge, forcing sideways scrolling and failing Reflow. The fix replaces both rules with the auto-fit grid above and removes the fixed width. Test by dragging the window narrower, then by zooming to 400 percent at 1280 px wide: the cards should stack into one column with no horizontal scrollbar.

## Accessibility and layout

- **Keep DOM order meaningful.** Grid placement and `order` can move items visually without changing the reading and tab order. Screen reader and keyboard users get the DOM order.
- **Avoid fixed heights.** Content grows when text is zoomed or spaced (1.4.12); let height be automatic.
- **Watch sticky elements.** A sticky header that is fine at 100 percent can cover half the screen at 400 percent zoom. Consider removing stickiness on short viewports with `@media (max-height: 30em)`.

## Common mistakes

- Breakpoints in `px` tied to specific devices.
- `width` in pixels on flexible items.
- Forgetting the `min(…, 100%)` guard, which causes overflow on narrow screens.
- Using `transition-all` or animating `width` to "smooth" reflow; animate only `transform` and `opacity`.
- Testing only at a few preset device sizes in DevTools instead of dragging through every width.

## Quick recap

- Start mobile-first; let content choose breakpoints, written in `em`/`rem`.
- `repeat(auto-fit, minmax(min(15rem, 100%), 1fr))` gives a reflowing grid.
- `flex-wrap: wrap` and `gap` for rows; the flex sidebar trick for two columns.
- Container queries let components respond to their own width.
- Check against [WCAG Understanding 1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html).

## Try it

Open the **Do** tab and turn a fixed card row into a layout that reflows.


Build a card grid, wrapping navigation and a container query that reflow at any width.

Responsive layout patterns

Breakpoint-Free CSS Grid Layouts

## Why this matters

Images are usually the heaviest part of a page. Sending a 2400 px wide photo to a 360 px phone wastes data and slows the page, which hits people on prepaid plans and slow connections hardest. Images without dimensions also make the page jump as they load (layout shift), which is disorienting for everyone and especially for people with cognitive or vision impairments who lose their place. HTML has built-in tools for all of this.

## Step 1: let images shrink

```css
img { max-width: 100%; height: auto; }
```

`max-width: 100%` stops an image overflowing its container; `height: auto` keeps the aspect ratio. Put this in every stylesheet.

## Step 2: always set width and height

```html
<img src="trail-800.jpg" width="1600" height="900" alt="Hikers on a ridge at sunrise">
```

The numbers are the image's intrinsic size (or any pair with the same ratio). Browsers use them to reserve the right space before the file arrives, and the CSS above still makes it responsive. This is the single biggest fix for Cumulative Layout Shift. CSS `aspect-ratio` does the same job for elements without intrinsic dimensions.

## Step 3: srcset and sizes (resolution switching)

When the **same picture** is needed at different sizes, offer several files and let the browser choose:

```html
<img
  src="trail-800.jpg"
  srcset="trail-480.jpg 480w, trail-800.jpg 800w, trail-1600.jpg 1600w"
  sizes="(min-width: 60rem) 50vw, 100vw"
  width="1600" height="900"
  alt="Hikers on a ridge at sunrise">
```

- `srcset` lists files with their real widths (`480w` means 480 pixels wide).
- `sizes` tells the browser how wide the image will be **displayed**: half the viewport on wide screens, the full viewport otherwise. The browser needs this before CSS loads.
- The browser multiplies the display width by the screen's pixel density and picks the smallest file that is big enough. A phone at 360 px and 3x density needs about 1080 px, so it takes `trail-1600.jpg`; a 1x laptop showing it at 600 px takes `trail-800.jpg`.
- `src` is the fallback for very old browsers.

For a fixed-size image (like an avatar) use density descriptors instead: `srcset="avatar.jpg 1x, avatar@2x.jpg 2x"`.

## Step 4: picture for formats and art direction

`<picture>` lets you offer modern formats with a fallback, or a different crop at different sizes:

```html
<picture>
  <source type="image/avif" srcset="team.avif">
  <source type="image/webp" srcset="team.webp">
  <img src="team.jpg" width="1200" height="800" alt="The support team at their desks">
</picture>
```

The browser uses the first `<source>` it supports. The `<img>` inside is required: it is what actually renders, and it carries `alt`, `width`, `height` and `loading`. For **art direction**, add `media` to a source, for example a tight square crop for phones:

```html
<picture>
  <source media="(min-width: 40rem)" srcset="banner-wide.jpg">
  <img src="banner-square.jpg" width="800" height="800" alt="A bowl of ramen">
</picture>
```

## Step 5: lazy-load what is off screen

```html
<img src="gallery-3.jpg" loading="lazy" width="800" height="600" alt="...">
```

`loading="lazy"` delays images below the fold until the user scrolls near them. **Do not** lazy-load the main image at the top of the page (often the Largest Contentful Paint element); it should load immediately, and `fetchpriority="high"` can help it start sooner.

## Alt text still matters

Every responsive technique above is about the file. The `alt` attribute is still what screen reader users get, and it goes on the `<img>`, not on `<source>`. Describe what the image conveys in context; use `alt=""` for decorative images. A chart or diagram needs a text equivalent nearby (a sentence or a data table) when `alt` is not enough.

## Worked example: a recipe page

The page has a hero photo, a step-by-step gallery of six photos further down and a decorative divider. A good result:

- Hero: `srcset` with 3 widths, `sizes="100vw"`, `width`/`height`, no `loading="lazy"`, a descriptive `alt`.
- Gallery: `loading="lazy"`, `width`/`height`, alt text for each step ("Folding the dough in half").
- A `<picture>` for the hero offering AVIF and WebP before the JPEG.
- Divider: `alt=""` or, better, a CSS border.

## Common mistakes

- `srcset` with `w` descriptors but no `sizes`: the browser assumes `100vw` and may download a file far too big.
- Missing `width` and `height`, causing layout shift.
- Lazy-loading the hero image.
- Putting `alt` on `<picture>` or `<source>` (it belongs on `<img>`).
- Using CSS background images for content images, which have no alt text.

## Quick recap

- `img { max-width: 100%; height: auto; }` plus `width`/`height` attributes.
- `srcset` + `sizes` for resolution switching; `<picture>` for formats and art direction.
- `loading="lazy"` below the fold only.
- `alt` on the `<img>`, always.
- Reference: [MDN: Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) and [W3C WAI Images tutorial](https://www.w3.org/WAI/tutorials/images/).

## Try it

Open the **Do** tab and make a gallery page's images responsive. (The preview has no network, so images show as broken; the checks look at your markup and CSS.)


Serve the right image size and format with srcset, sizes, picture and lazy loading.

Responsive images

srcset and sizes attributes - [ images on the web | part one ]

The HTML picture element explained [ Images on the web part 3 ]

Fluid type and spacing with clamp(), layouts that reflow without breakpoints, and images that load the right size.