Alignment + Click Target

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.

<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.

/* 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 x 44px for AAA rating.
• ▪ 24 x 24px for AA rating. This can be reduced to 20px 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:

.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.

.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.