Guidelines
Suggest edit

Provide 24×24 px pointer targets or an alternative interaction path

For interactive selection and activation, use minimum-size pointer targets or an alternative interaction path on charts with small or data-scaled interactive marks to improve accessibility and mitigate missed or imprecise selection for people with motor impairments or non-precise pointer input.

  • purpose:refine
  • basis:accessibility
  • quality:accessibility
  • lever:interaction-access
  • needs:motor
  • access:keyboard:use

advice

Pointer target size

Make each pointer-activated interaction target at least 24×24 px, or add a separate interaction path that reaches the same information and task when the visible mark cannot be enlarged. For example, keep a data-scaled mark visually small if size encodes data, but add a minimum-size text label, an accompanying data table or search control, or a keyboard, zoom, or filter path that lets users select or activate the same item.

reason

Why larger targets or alternatives matter

Small pointer targets demand precise motor control. Minimum-size targets or a parallel interaction path let users select, activate, or inspect the same information without depending on fine pointer accuracy.

Mechanism: Larger or alternate targets reduce the precision required to hit a mark and make the same represented item reachable through a more tolerant control path.

Evidence: Pointer-activated controls should be at least 24×24 px, and when data-scaled marks cannot meet that size the chart should provide another way to select, activate, or interact with the same information or task; supported alternatives include labels, tables, search, keyboard input, zooming, and filtering, while Voronoi-style overlays alone may still leave motor barriers (Elavsky et al., 2022; W3C, n.d.).

context

Use when marks must be selected precisely

  • User Goal: Select, activate, or otherwise interact with a represented item.
  • Task: Reach a specific mark or trigger an item-level action.
  • Data: The chart uses small interactive elements, including marks whose size is mapped to data values.
  • Chart Setting: Mouse or touch pointer interaction is offered.
  • Audience: People with motor impairments, people using non-precise touch input, or users who need an alternative to precise pointing.
  • Success Criterion: The same represented item can be reached and operated without fine pointer precision.

exceptions

Do not enlarge the visible mark when size encodes data

Break it when: The visible mark size is itself a data encoding and enlarging the mark would change what the chart means. Why: Changing the visible mark would distort the encoding, so the repair must be a separate interaction path instead.

costs

Tradeoffs of larger or alternate targets

Sacrifice: Larger targets or parallel controls take extra interface space or implementation work.
Risk: Hidden target-expansion tricks alone can still leave substantial operability barriers.
Mitigation: Add one visible, discoverable alternative control that reaches the same represented item or task.

mistakes

Common target-size failures

  • Mistake: Keep tiny, data-scaled marks as the only selectable elements. Why it fails: Users must hit a very small target to reach the information or action.
  • Mistake: Rely only on a Voronoi-style overlay to make marks easier to hit. Why it fails: The source notes that this can still leave significant operability barriers for people with motor impairments.

check

How to review target size

Failure Sign: An interactive mark or control is smaller than 24×24 px and no other control reaches the same information or task.
Quick Check: Measure the target area of any pointer-activated element and flag anything under 24×24 px.
Stronger Test: For any tiny or data-scaled mark, verify that the same item can also be selected, activated, or inspected through a non-precise path such as a label, table, search, keyboard path, zoom, or filtering control.

fix

How to repair small targets

  • Increase the interaction target to at least 24×24 px.
  • Add a minimum-size text label that can be selected or activated instead of the tiny mark.
  • Add an accompanying data table or search control that reaches the same represented items.
  • Add an alternative interaction path such as keyboard navigation, zooming, or filtering when the visible mark cannot be enlarged.

References

Elavsky, F., Bennett, C., & Moritz, D. (2022). How accessible is my visualization? Evaluating visualization accessibility with Chartability. Computer Graphics Forum, 41(3), 57–70. https://doi.org/10.1111/cgf.14522
W3C. (n.d.). Understanding Target Size (Minimum) – WCAG 2.2. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html