Spacing and Layout — Accessible Spatial Relationships and Touch Targets

In this tutorial, you will learn about Spacing and Layout. We cover key concepts, practical examples, and best practices to help you master this topic.

Accessible spacing and layout ensure interactive elements have minimum 44x44 pixel touch targets, adequate spacing between clickable elements, consistent grid spacing, and layouts that work at 400 percent zoom.

What You'll Learn

You will learn how spacing and layout affect accessibility, how to define spacing tokens that enforce minimum touch targets, and how to design layouts that remain usable when zoomed.

Why It Matters

Elements that are too small or too close together are difficult to use for people with motor disabilities, low vision, and touch screen users. Proper spacing prevents misclicks and reduces frustration.

Real-World Use

DodaKit's spacing system uses an 8px grid. All interactive components have min-height and min-width of 44px. The grid system collapses to single column at 400 percent zoom to maintain usability.

flowchart TD
  A[Spacing and Layout] --> B[Touch Targets]
  A --> C[Spacing Grid]
  A --> D[Responsive Layout]
  A --> E[Zoom Resilience]
  B --> F[44x44px minimum]
  B --> G[Adequate gaps]
  C --> H[8px base unit]
  D --> I[Single column at zoom]
  E --> J[No horizontal scroll]

Touch Target Size

All interactive elements must have a minimum size of 44x44 pixels per WCAG SC 2.5.8 (Target Size, Level AA). This includes buttons, links, form controls, and interactive icons.

Spacing Between Targets

Adequate spacing between interactive elements prevents accidental activation. Use at least 8px gap between adjacent touch targets.

Grid System

Define a spacing grid using multiples of a base unit. An 8px or 4px base ensures consistent spacing. All component margins, paddings, and gaps should use the grid.

// Touch target validator
function validateTouchTargets(elements) {
  const results = [];

  elements.forEach(el => {
    const width = el.width;
    const height = el.height;
    const spacing = el.spacing;

    const widthPass = width >= 44;
    const heightPass = height >= 44;
    const spacingPass = spacing >= 8;

    results.push({
      name: el.name,
      width: width,
      height: height,
      spacing: spacing,
      widthPass: widthPass,
      heightPass: heightPass,
      spacingPass: spacingPass,
      overallPass: widthPass && heightPass && spacingPass,
      issues: [
        ...(widthPass ? [] : ['Width below 44px']),
        ...(heightPass ? [] : ['Height below 44px']),
        ...(spacingPass ? [] : ['Spacing below 8px'])
      ]
    });
  });

  return results;
}

const targets = [
  { name: 'Button', width: 120, height: 44, spacing: 16 },
  { name: 'Icon button', width: 44, height: 44, spacing: 12 },
  { name: 'Inline link', width: 60, height: 20, spacing: 4 }
];

console.table(validateTouchTargets(targets));

Expected output:

┌─────────┬──────────────┬───────┬────────┬─────────┬──────────┬───────────┬─────────────┬─────────────┬──────────────────────────────┐
│ (index) │ name         │ width │ height │ spacing │ widthPass│heightPass │spacingPass  │ overallPass │ issues                       │
├─────────┼──────────────┼───────┼────────┼─────────┼──────────┼───────────┼─────────────┼─────────────┼──────────────────────────────┤
│ 0       │ Button       │ 120   │ 44     │ 16      │ true     │ true      │ true        │ true        │ []                           │
│ 1       │ Icon button  │ 44    │ 44     │ 12      │ true     │ true      │ true        │ true        │ []                           │
│ 2       │ Inline link  │ 60    │ 20     │ 4       │ true     │ false     │ false       │ false       │ ['Height below 44px', ...]   │
└─────────┴──────────────┴───────┴────────┴─────────┴──────────┴───────────┴─────────────┴─────────────┴──────────────────────────────┘

Layout at 400 Percent Zoom

WCAG SC 1.4.10 Reflow requires that content is presented without loss of information or functionality when zoomed to 400 percent. Layouts must reflow to a single column without horizontal scrolling.

<!-- Grid layout that reflows at zoom -->
<div class="ds-grid">
  <div class="ds-grid__item">
    <button class="ds-button ds-button--primary" type="button">
      <span class="ds-button__label">Scan now</span>
    </button>
  </div>
  <div class="ds-grid__item">
    <button class="ds-button ds-button--secondary" type="button">
      <span class="ds-button__label">Schedule scan</span>
    </button>
  </div>
</div>

<style>
  .ds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-md);
  }
  .ds-grid__item {
    min-width: 44px;
    min-height: 44px;
  }
  .ds-button {
    display: inline-flex;
    align-items: center;
    padding: var(--ds-space-sm) var(--ds-space-md);
    min-width: 44px;
    min-height: 44px;
    font-size: var(--ds-text-md);
  }
  /* At 400% zoom, items stack vertically */
  @media (max-width: 320px) {
    .ds-grid {
      flex-direction: column;
    }
  }
</style>

Common Mistakes

1. Touch Targets Smaller Than 44x44

Small touch targets are difficult to tap on mobile and difficult to click with a mouse for users with motor disabilities.

2. No Spacing Between Interactive Elements

Adjacent buttons without adequate spacing cause misclicks. Use gap or margin.

3. Fixed-Width Layouts

Layouts that do not reflow at 400 percent zoom force users to scroll horizontally, violating SC 1.4.10.

4. Overflow Hidden on Content

Using overflow: hidden on responsive containers can clip content at zoom. Use min-width: 0 and proper grid behavior.

5. Inline Links Without Touch Target Padding

Inline links have small touch targets. Increase the clickable area with additional padding or use larger text.

6. No Min-Height on Buttons

Buttons with only horizontal padding may collapse vertically if no content. Set min-height: 44px.

7. Using Fixed Pixel Values for Layout

Fixed pixel widths prevent reflow. Use relative units, Flexbox, or grid for responsive layouts.

Practice Questions

1. What is the minimum touch target size per WCAG 2.2?

44 by 44 pixels, per SC 2.5.8 Target Size (Level AA).

2. What SC addresses content reflow at 400 percent zoom?

SC 1.4.10 Reflow (Level AA). Content must not require horizontal scrolling at 400 percent zoom.

3. What is the recommended minimum spacing between interactive elements?

8px. Adequate spacing prevents accidental activation of adjacent elements.

4. Why should layouts use flex-wrap or CSS Grid instead of fixed widths?

Fixed widths prevent content from reflowing at zoom. Flexbox and Grid can wrap to maintain readability.

5. Challenge: Test a responsive layout at 400 percent browser zoom. Identify elements that overflow, overlap, or are unreachable.

FAQ

Mini Project

Audit a component library for touch target Compliance. Check 10 interactive components for minimum 44x44 size and 8px spacing. Document failures and propose fixes.

What's Next

Learn about Component Library a11y patterns for accessible interactive components. Then explore Focus Indicators in design systems.