Not enough space between navbar icon buttons

[gabalafou]

No description provided.

[gabalafou]

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.

[isabela-pf]

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

• "The size of the target is at least 24 by 24 CSS pixels" meaning the button areas themselves. We already have this. Hooray!

• And has the exception "Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target." Now, we don't need this for the exception because we meet the minimum target size, but I think this makes clearer criteria we can use to make sure we have spacing that supports lower motor skill precision. First, the bounding boxes already don't overlap or even touch exactly. Yay! And, because they already meet the minimum target size, they pass the 24 by 24 CSS pixel diameter circle test too.

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!

[gabalafou]

@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%;
}

[gabalafou]

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.