When the toolbar will not fit
Five icons, a narrow bar, and a 24 px rule that cannot be met as laid out. Adding height does not fix it. Wrapping does. An equal split of the width can leave every icon one pixel short. Here is the order to try fixes in, and when to stop.
Here is a toolbar that cannot pass: five 16 px icons, touching, in a bar 115 px wide. The 24 px rule from the last note needs 24 px per icon, or 24 px of circle per icon, and 115 px is not enough for either. There is no arrangement of this row that works. That makes it a good place to learn what each fix actually does.
First, the fix that does nothing
The usual first move is to make the bar taller and give each icon 24 px of height. It looks like progress. The icons are now 16 by 24. They still fail, every one of them.
The size test needs both sides at 24. The spacing test needs the centres 24 px apart, and the centres have not moved, because the widths have not changed. Height alone does not un-crush a row. It is worth saying plainly, because it is the fix that gets shipped most often.
Then the fixes that spend room
If the layout has room, use it. Widen the bar by 40 px, grow each icon to 24, and the row passes. The lab's readout says this is the right fix when you have the room, and a toolbar inside a fixed sidebar often does not.
If the bar cannot get wider, let it get taller the other way: wrap the icons onto a second line. Four icons at 24 px fit in 115 px. The fifth goes to the next line. Everything passes, and nothing was removed. Wrapping is the fix that usually fits, because vertical space is almost always cheaper than horizontal space.
Equal shares, and why they lose
Suppose the bar stays at 115 px and you decide to split the width fairly. Five icons, no gaps, 23 px each. Every icon is one pixel short, so every icon fails. Fair and useless.
Now give the first four icons 24 px each and the last one what remains, which is 19. Four of five pass. Same bar, same room. The lab has a button for each so you can see the two layouts side by side.
| Fix | Icons that pass | Why |
|---|---|---|
| Add height only | 0 of 5 | Centres did not move |
| Split the width equally | 0 of 5 | 23 px each, one short |
| Give the first icons priority | 4 of 5 | Four at 24, one at 19 |
| Widen the bar by 40 px | 5 of 5 | Room for five at 24 |
| Wrap onto a second line | 5 of 5 | Four and one |
| Collapse three into a menu | 3 of 3 | Two icons and a 24 px More |
Equal splits feel safe because nobody is singled out. The rule does not score fairness. It scores targets. When the total is short, decide which targets matter and give those the minimum.
The exception, used as a last resort
The criterion allows a small target when an equivalent target on the same page meets the size. An overflow menu is one: move three of the icons behind a single 24 px More button, and the three are still reachable, one tap further away. The toolbar passes with two icons and a menu.
It costs a click, which is why it comes after wrap and not before. But it is a real fix, not a dodge, and it is the one to reach for when the bar is as wide as it will ever be.
When nothing fits, report it
If the bar cannot widen, cannot wrap, and cannot lose a control to a menu, the honest move is a finding that says so. The lab writes one: which controls fail, their sizes, what they need, what was tried. Then the decision belongs to whoever owns the layout, with the facts in front of them.
What the finding should not do is pretend that a 23 px icon is close enough. It is not the one pixel that matters. It is that a rule with a hard edge was used to make a decision, and the decision was to stop short of the edge.
One more thing about pixels
When a fix is computed exactly at the threshold and then rounded to whole pixels, it can round the wrong way. Spacing that works out to 24.0 px between centres becomes 23.5 when one icon has an odd width and the browser snaps the box. The lab places centres 24.5 px apart and then rounds, so rounding cannot undo the fix. Do the same when you write the CSS: give every threshold half a pixel.
Try it
Open the Target Size and Spacing lab and pick the crush scenario. Try the fixes in the order above: add height, wrap, equal split, priority, widen, menu, report. Read the line under the table after each one. Then reset and try your own layout with the sliders.
Sources
- w3.org, Understanding Success Criterion 2.5.8: Target Size (Minimum), including the equivalent and spacing exceptions