Tap Target & Button Size Guide

Questions answered by this guide

• ?How big does a button need to be?
• ?What's the WCAG minimum target size?
• ?Does spacing between buttons matter as much as size?
• ?Why does target size matter if my course is used on a desktop?
• ?How do target sizes differ between Storyline and Rise?

What you'll learn

• Interactive targets need to be at least 24 by 24 pixels, the WCAG 2.5.8 minimum
• Aim closer to 44 by 44 pixels for buttons learners tap constantly
• Spacing between controls matters as much as the size of each one

What's inside

Instructional designers checking button and tap target size in Storyline or Rise

1. 01The concept
2. 02A worked example
3. 03Best practices
4. 04How Storyline and Rise differ

Why it matters

A target that's easy to click with a precise mouse pointer can be genuinely hard to tap with a finger, or for a learner with a tremor or limited fine motor control. WCAG 2.5.8 requires interactive targets to be at least 24 by 24 pixels. Research on touch accuracy has found error rates up to 75% higher on targets smaller than that. This isn't a rare edge case either, most eLearning today gets completed on a phone or tablet at some point.

When you'll encounter this

• You're placing icon-only navigation controls, Next, Back, Replay, sized for visual style rather than comfortable tapping.
• Several small buttons or answer choices sit close together in a row or grid.
• Your course will be completed on a phone or tablet at any point, which is most eLearning today.
• A11yCheck flags a tap target size issue on a scan report.

Example

Best practices

• Keep interactive targets at least 24 by 24 pixels, the WCAG 2.5.8 (Level AA) minimum. For primary actions like Next, Continue, or Submit, aim closer to 44 by 44 pixels, the WCAG 2.5.5 (Level AAA) target, since these get tapped constantly.
• When several small controls sit in a row, spacing between them matters as much as the size of each one. A target that's technically big enough but crammed against its neighbor is still easy to mis-tap.
• Preview your course on an actual phone or tablet, not just at desktop size. Spacing and size problems are far more obvious on a real touchscreen than in an authoring tool preview.
• In Storyline: select the button or icon, check its size, resize it if it's genuinely too small, or increase the spacing between it and neighboring controls if the size itself is fine.
• In Rise: open the Button block or interactive element and check its size the same way. Rise's default block spacing is usually generous, this issue mainly shows up in custom interactive blocks or dense multiple-choice layouts.

Common mistakes

• Icon-only navigation controls sized for visual style rather than comfortable tapping.
• Several small buttons or answer choices placed edge to edge with no gap between them.
• Only testing button size and spacing with a desktop mouse, never on an actual touchscreen.

Practical checklist

• Every interactive target is at least 24 by 24 pixels.
• Primary actions (Next, Continue, Submit) are closer to 44 by 44 pixels where possible.
• Controls placed near each other have real spacing between them, not just edge to edge.
• The course has been previewed on an actual phone or tablet, not only at desktop size.

Frequently asked questions

Summary

Interactive targets need to be at least 24 by 24 pixels, and closer to 44 by 44 for buttons learners tap constantly. Check spacing as well as size, and preview on an actual phone or tablet before publishing.