Left Arrow.Back

Alignment + Touch Target

A web page design wireframe.

Alignment is a powerful force in design. Accessibility requires touchable elements to be of a certain minimum size. Implementing these sizes using common CSS approaches can throw off a layout's alignment. There is a different approach that allows touch targets of any size without affecting alignment.

Last Tended-
Planted
StatusSeed
A web page design wireframe highlighting 16px gap between all elements.

1. Requirements

Alignment is a powerful force in design. Lines & right angles are signs of stuff made by humans. Nature just doesn't seem to make them. They signal a human being has put effort into building this thing. That it has been designed. I've found that common CSS patterns often don't support alignment in a layout. Different approaches are required.

Imagine we need to code the layout for a web page. It will have 3 root elements:

  • a back link in the top left,
  • a list below the link &
  • a section for main content to the right.

Element should be positioned so:

  • the link's text & list items' text should align vertically,
  • the link's text & main's text baselines should align horizontally,
  • there is a 16px space between all elements &
  • there is a 16px space between elements & the page border.
A web page design wireframe.

2. Add Content

The 1st step I would do is add the contents to the page & remove any excess white-space. To achieve this:

  • set all margins & padding to 0 (a common CSS reset setting) &
  • use Capsize to generate the CSS required to trim unwanted vertical space above & below text.

The <body/> will be acting as a layout component. I believe a trait of a good layout component is it adapts to its contents. I'm using a CSS grid to position the root elements. The left column's width is set to auto, enabling it to adapt to the link & lists contents. The right is set to 1fr, filling the remaining width of the layout.

localhost:3000

import "./styles.css";
import "./styles.css";

Normally, I would import the CSS file in index.html however I wasn't able to get that working with the bundler (maybe related to this issue).

A web page design wireframe.

3. Add Space

Add space between elements:

  • add padding: 16px; to <body/>
  • add gap: 16px; to <body/>'s grid.
  • add gap: 16px; to <ol/>'s flex container.

Visually, we are now fulfilling all requirements.

localhost:3000

import "./styles.css";
import "./styles.css";
A web page design wireframe with 1 element highlighted in red.

4. Increase Touch-Target

Unfortunatley, there is an accessibility problem with the link. The size of the clickable area is only 38 x 10px. The recommended minimums are:

  • 44 x 44px for AAA rating.
  • 24 x 24px for AA rating (this can be reduced to 20px if the area is inline or there is is minimum 4px gap between adjacent clickable areas).

1 approach to fix this is to add padding to the link:

localhost:3000

import "./styles.css";
import "./styles.css";

Although this has fixed the accessibility problem, it has broken the layout's alignment:

  • the link & list items' text no longer align vertically,
  • the link & main's text no longer align horizontally &
  • the space between the left & right columns has increased beyond 16px (I'm calculating this from the right-most letter in the left column to the left-most letter in the right column).
A web page design wireframe with 1 square highlighted.

5. Alignment Fix

We can use a different approach that will solve both the accessibility problem while maintaining the layout's alignment. Instead of adding padding, add an absolutley positioned pseudo-element to the link. This will allow us to set whatever touch target size we require without effecting the positioning of the link or its adjacent elements.

index.js

As capsize makes use of pseudo-elements, the link's text is moved into a <span> to prevent styles interfering with each other.

localhost:3000

import "./styles.css";
import "./styles.css";

We now have a layout that adapts to its content, has alignment across all elements & passes accessibility requirements.