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.
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.
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.
<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.
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).
3. Add Space
Add space between elements:
<ol/>'s flex container.
Visually, we are now fulfilling all requirements.
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:
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).
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.
As capsize makes use of pseudo-elements, the link's text is moved into a
<span> to prevent styles interfering with each other.
We now have a layout that adapts to its content, has alignment across all elements & passes accessibility requirements.