Open gabalafou opened 3 months ago
Too long; didn't read: I would recommend we implement an additional 2.5 CSS pixels (or change the`column-gap value from 1rem to 1.1–1.12 rems) between navbar icon buttons. My rationale is in the paragraphs below the divider.
Right! So, for clarity, I'm not aware of any WCAG 2.2 standards about spacing between buttons or another recommendation for spacing that isn't on someone's personal blog post somewhere on the internet. But what I am referencing is WCAG 2.5.8 Target Size as the nearest tested and trustworthy information.
2.5.8 Target size mentions
Still, I do think the idea of the circle target that does not intersect or touch the adjacent targets may be a good way to have a relative way to estimate space between buttons. By rounding out the corners of the target into a circle (not matching the diameter to the largest side), I can find that the circles do overlap just a little.
To have them not touch, we would need to add 2.5 CSS pixels, or change the`column-gap value to about 1.1–1.12 rems. Just a little nudge!
@isabela-pf, I love your analysis! I think it would make a great mini blog post. I'm thinking something along the lines of how to use the spirit of accessibility guidelines, not just the letter, to guide design decisions.
I'm curious how you produced the images in your analysis. For my part, I used dev tools to add the following CSS in order to visualize the circle targets that you mentioned to make sure they don't overlap:
html .pst-navbar-icon {
border: darkblue thin dashed;
}
html .pst-navbar-icon:before {
background: pink;
border-radius: 50%;
width: 42px;
height: 42px;
content: "";
position: absolute;
left: -10px;
top: -8px;
opacity: 50%;
}
I'm curious how you produced the images in your analysis.
Discussed in today's team call, the process was to start with screenshot from Firefox with dev tools open and inspecting one of the nav icons, and then importing into Figma and annotating.
I don't need a Figma to implement this, but I think it would be great if somebody in design could tell me by exactly how much I should increase the space between navbar icon buttons, and then I'll implement it.