Website Touch Targets: Size and Spacing Checks for Easier Tapping

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Identify the interactive area

   0:18

   The visible icon and the clickable target may have different sizes.

   On-screen labels: Visible icon; Clickable area; Actual target.

2. 2

   Step 2: Review the target dimensions

   0:30

   WCAG 2.2 has a 24 by 24 CSS pixel minimum criterion, with exceptions.

   On-screen labels: CSS pixel size; Minimum criterion; Defined exceptions.

3. 3

   Step 3: Check neighbouring controls

   0:42

   Close targets can be difficult to distinguish and activate accurately.

   On-screen labels: Adjacent targets; Useful separation; Accurate activation.

4. 4

   Step 4: Keep important actions clear

   0:54

   Primary tasks need easy-to-identify controls and labels.

   On-screen labels: Clear action; Readable label; Suitable target area.

5. 5

   Step 5: Test the real layout

   1:06

   Review compact menus, pagination and icon controls at small widths.

   On-screen labels: Small-screen menu; Pagination links; Icon buttons.

6. 6

   Step 6: Treat this as one check

   1:18

   Target size alone does not establish complete website accessibility.

   On-screen labels: Actual user task; Other accessibility checks; Observed result.

Common questions

Go further