• Success Criterion 2.5.8
  • Conformance level AA

Table Row Action Icons Too Small and Too Close Together

2.5.8 — Target Size (Minimum)

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Table row action icons (edit/delete) small and adjacent.

Example 

.guest-row .edit-icon, .guest-row .delete-icon { width: 16px; height: 16px; margin: 0 3px; }

Why it matters

Someone removing a guest from the invite list taps edit instead of delete, since the two icons sit almost touching.

How to test

Measure adjacent row-action icons (edit/delete) in a table: small size plus tight adjacency without the spacing exception fails.

How to fix

Give destructive icons like delete extra spacing, since a mistap there is harder to undo.

.guest-row .edit-icon, .guest-row .delete-icon { width: 24px; height: 24px; margin: 0 6px; }

Outcome

A user removes the correct guest without accidentally opening the edit dialog.

Who is affected

People with reduced dexterity and users of adapted pointing devices with less precise control.

Learn more

Related scenarios