Alignment + Click Target
Tended:
Status: sprout
In the context of design, the use of straight lines and right angles communicate that it has been crafted by a human. That it has been designed. Nature doesn't use them. When creating a webpage, it is easy to create layouts constructed with straight lines and right angles. However, when we need to incorporate click-target size requirements, layouts can lose their alignment. Below defails an approach that fulfills these requirements without breaking alignment.
1. Requirements
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 and
- ▪ a section for content to the right.
Elements should be positioned so:
- ▪ the link and list items' text should align vertically,
- ▪ the link and main's text baselines should align horizontally,
- ▪
16px
space between elements and between elements and page border.
2. Add Content
Add the contents to the page and remove any excess white-space. To achieve this:
- ▪ set all margins and padding to
0
and - ▪ use Capsize to generate the CSS required to trim unwanted vertical space above and 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 and list's contents.
The right is set to 1fr
, filling the remaining width of the layout.
localhost:3000
<a class="backLink capsizedText" href=""> Back </a> <ol class="list"> <li class="capsizedText">item 1</li> <li class="capsizedText">item 2</li> <li class="capsizedText">item 3</li> </ol> <main class="main"> <p class="capsizedText"> main content </p> </main>
3. Add Space
Add space between elements:
- ▪
padding: 16px;
to<body/>
- ▪
gap: 16px;
to<body/>
's grid. - ▪
gap: 16px;
to<ol/>
's flex container.
Visually, we are now fulfilling all requirements.
localhost:3000
/* Layout --------------------------- */ body { padding: 16px; display: grid; grid: "backLink main" auto "list main" auto / auto 1fr; gap: 16px; } .backLink { grid-area: backLink; } .list { grid-area: list; display: flex; flex-direction: column; gap: 16px; } .main { grid-area: main; }
4. Increase Click-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
x44px
for AAA rating. - ▪
24
x24px
for AA rating. This can be reduced to20px
if:- ▫ the area is inline (such as a a link within a paragraph) or
- ▫ there is a minimum
4px
gap between adjacent clickable areas.
1 approach to fix this is to add padding to the link:
localhost:3000
.backLink { grid-area: backLink; padding: 8px; }
Although this has fixed the accessibility problem, it has broken the layout's alignment:
- ▪ the link and list items' text no longer align vertically,
- ▪ the link and main's text no longer align horizontally and
- ▪ the space between the left and right columns has increased beyond
16px
. Calculated from the right-most letter in the left column to the left-most letter in the right column.
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 allows setting a click target to any size without effecting the positioning of the link or its adjacent elements.
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
.backLink { grid-area: backLink; position: relative; } .backLink::after { --min-size: 24px; content: ""; width: 100%; height: 100%; min-width: var(--min-size); min-height: var(--min-size); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: hsla(0, 0%, 0%, 0.1); }
We now have a layout that adapts to its content, has alignment across all elements and passes accessibility requirements.
Where to Next?


