A small button’s visible gap from its neighbour does not, by itself, settle whether it has enough pointer-target spacing. We need the actual clickable regions, their bounding-box centres and the neighbouring shapes. Two small targets require a circle-to-circle check, but a circle must also avoid the other target itself. That second check matters especially for long, thin controls.
This guide turns that distinction into original coordinate examples informed by WCAG 2.2’s target-size requirement and spacing exception. It is a geometry lesson for inspecting a clearly specified interface, not a complete accessibility evaluation. All layouts are fictional. Our examples use clear overlap or clear separation, avoiding borderline contact cases that should be assessed against the current official guidance.
eduKateSG · Universal Design
Find your next learning step
Connect actual activation regions with the geometry used to examine spacing.
ROUTE 1 · CHAPTERS 1–4
Define the target
Name the action, official context and actual coordinate region.
ROUTE 2 · CHAPTERS 5–9
Build the spacing checks
Classify size and compare circles with circles and actual neighbours.
ROUTE 3 · CHAPTERS 10–14
Preserve the shape
Calculate rectangle distances, expose shortcuts and reason with enclosures.
ROUTE 4 · CHAPTERS 15–18
Follow changed layouts
Keep units, states and repairs attached to the same geometric account.
ROUTE 5 · CHAPTERS 19–23
Practise and continue
Solve a new arrangement, record the evidence and follow the access guides.
Chapter contents
Define the target · Chapters 1–4
1. Begin with the action a person is trying to select
2. Read the requirement and its exceptions in context
Build the spacing checks · Chapters 5–9
5. Classify the rectangular target's size first
6. Place the spacing circle at the bounding-box centre
7. Compare two undersized circles
Preserve the shape · Chapters 10–14
10. Derive distance from a point to a rectangle
11. Expose the long-thin-target counterexample
12. Inspect every relevant neighbour
Follow changed layouts · Chapters 15–18
15. Keep CSS pixels distinct from screenshot pixels
16. Follow a responsive layout into its changed state
17. Check geometry after an interaction changes the controls
Practise and continue · Chapters 19–23
19. Solve an independently changed arrangement
20. Create a record another person can reproduce
21. Repair and stabilise the learner's understanding
CHAPTER 1 OF 23 · Define the target
1. Begin with the action a person is trying to select
Imagine a fictional workshop booking screen with separate controls for saving a draft, removing an attachment and submitting a booking. A person intends one action. If the controls are small or crowded, selecting the intended one may require precision that the layout could have avoided.
The first question is therefore functional: which area accepts the pointer action for each distinct control? A painted icon is only part of the screen’s appearance. The clickable area might include padding around it, or it might be smaller than an attractive surrounding card suggests.
For our paper exercises, each target is explicitly supplied as a geometric region with a named action. We assume that the regions describe actual activation behaviour in the stated screen state. That assumption lets us calculate without pretending that a screenshot alone reveals all interaction boundaries.
A good explanation keeps the person and the action visible while doing the geometry. We are not arranging circles for their own sake. We are examining whether the spatial account leaves adequate separation under a particular criterion, then asking what still needs checking in the wider task. Clear labels, keyboard operation and understandable outcomes remain separate questions even when every distance in the drawing is correct.
CHAPTER 2 OF 23 · Define the target
2. Read the requirement and its exceptions in context
WCAG 2.2 Success Criterion 2.5.8 sets a Level AA minimum for pointer-target size and provides defined exceptions. One exception concerns spacing around undersized targets. Others concern equivalent controls, inline content, unchanged user-agent controls and essential presentation.
Our focus is the spacing construction, not a claim that every small control fails the criterion. The official wording places a circle of diameter 24 CSS pixels at the centre of each undersized target’s bounding box. That circle must avoid another target and the corresponding circle of another undersized target.
The W3C Understanding document explains the construction and the relationship between actual target shape and the size requirement. Read the complete guidance when applying it to a real interface. Our fictional rectangles and derived distances illustrate the stated construction rather than replacing its full conditions.
A useful classroom habit is to name the route being evaluated. A control may meet the size requirement directly, qualify through spacing or need examination under another exception. Saying only pass or fail without identifying that route can hide which geometric evidence was actually checked. The more precise description also makes later layout changes easier to assess.
Suppose the visible icon is a 12 by 12 square, but its supplied clickable region is a 32 by 32 rectangle. For the target-size question, our geometric input is the larger region, provided the implementation really accepts the relevant action across it.
Now reverse the situation. A decorative 32 by 32 card surrounds a supplied 12 by 12 clickable icon, while the rest of the card performs no action. Measuring the card would overstate the target. The visual appearance alone does not establish the activation region.
Our examples make that distinction explicit by giving target coordinates rather than asking learners to guess from a picture. A real evaluation needs evidence of actual interaction behaviour and relevant implementation conditions. If a region is obscured, clipped or shared with another action, its effective meaning needs examination.
For practice, draw the same icon twice and supply two different activation rectangles. Ask which values enter the geometry. The exercise demonstrates why changing only a painted border may leave the target unchanged, while a verified change to the activation region can alter the account without enlarging the icon. The goal is to connect a visual component with its actual function, rather than reward an assumption that the biggest visible rectangle must be the right one to measure.
CHAPTER 4 OF 23 · Define the target
4. Build a coordinate record before checking distances
Use a common coordinate system measured in CSS pixels. For an axis-aligned rectangular target, record its left, right, top and bottom coordinates. Width is right minus left; height is bottom minus top. Its bounding-box centre is the midpoint of each pair of opposite edges.
For an original target A extending from x = −8 to 8 and y = −8 to 8, width and height are sixteen. Its centre is (0, 0). A second identical target B centred at (22, 0) extends from x = 14 to 30 and y = −8 to 8.
These coordinates make the visible horizontal gap six pixels: B’s left edge fourteen minus A’s right edge eight. They also make the centre separation twenty-two pixels. Those are different measurements, and the spacing construction uses the latter for its circle comparison.
A complete record names the screen state and which actions the two regions perform. Coordinates without actions can conceal whether two shapes belong to one target or distinct targets. Actions without coordinates leave the geometric check undefined. Our compact record needs both. It can then support an independent calculation by another learner without depending on a drawing’s scale or the thickness of its printed outlines.
CHAPTER 5 OF 23 · Build the spacing checks
5. Classify the rectangular target's size first
For our axis-aligned rectangular targets, a solid 24 by 24 square fits inside precisely when both width and height are at least twenty-four. This is a simple containment statement. A rectangle that is very wide but only sixteen pixels high does not contain that square.
Consider an invented 60 by 16 target. Its area is 960 square pixels, larger than 24 × 24 = 576. Yet area alone does not establish square containment. The short dimension prevents the required square from fitting. This is a useful counterexample to replacing a two-dimensional size condition with a total-area threshold.
Likewise, a width of twenty-four does not settle the matter if height is twenty. A minimum over the two dimensions captures the direct rectangular condition more accurately than an average. Averaging twenty and twenty-eight to obtain twenty-four would conceal the limiting height.
The classification determines which spacing circles our exercise introduces. A directly adequate rectangular target does not need its own undersized-target circle, but its actual region can still obstruct the circle around a nearby small target. That is why the workflow cannot stop after labelling the large target adequate. Its neighbour may still need a geometric relationship checked against it.
CHAPTER 6 OF 23 · Build the spacing checks
6. Place the spacing circle at the bounding-box centre
For every target classified as undersized in our exercises, draw an imaginary circle with radius twelve CSS pixels at the centre of its bounding box. The circle is an evaluation construction. It does not automatically become a clickable region and does not change what the implementation does.
For target A, the centre is (0, 0). The circle includes points whose squared distance from the centre is at most 144. Its horizontal extremes are −12 and 12; its vertical extremes are also −12 and 12. The target’s own sixteen-pixel square sits within that circle in this particular example.
Do not generalise that last relationship to every shape. A long, thin target can extend far outside its centred circle. The construction uses a fixed circle for spacing, not a claim that the circle contains the entire target. We will exploit that distinction in a later counterexample.
A useful learner check is to give the circle and target different colours on paper and ask what each represents. One is the supplied activation region; the other is the specified spacing test shape. Confusing them can lead either to overstating the clickable area or to ignoring an extended neighbouring target. Keeping both shapes in the account prevents both errors.
Two radius-twelve circles have overlapping interiors when their centre distance is less than twenty-four. If the distance is clearly greater than twenty-four, they are separated. Our worked examples deliberately use values on either side, leaving exact contact cases to the official evaluation guidance.
For centres (0, 0) and (22, 0), distance is twenty-two, so the circles overlap. The actual sixteen-pixel targets have a six-pixel gap, yet that gap does not make the circle test succeed. The incorrect conclusion came from using the wrong geometric object.
Move B’s centre to (26, 0), leaving both targets sixteen by sixteen. The circle distance is now twenty-six. B’s left edge is eighteen, giving an actual-target gap of ten. Each circle is also clearly away from the other target in this simple symmetric layout.
| Original layout | Centre separation | Target-edge gap | Circle comparison |
|---|---|---|---|
| A and B, first position | 22 CSS px | 6 CSS px | Circles overlap |
| A and B, moved position | 26 CSS px | 10 CSS px | Circles are separated |
The table is not a universal rule that every control needs ten pixels of gap. It records two specific sixteen-pixel rectangles. Change the target dimensions or arrangement, and the relationship between an edge gap and a centre distance changes with them.
CHAPTER 8 OF 23 · Build the spacing checks
8. Use the full two-dimensional distance
Now place the second sixteen-pixel square at centre (20, 20). The centre distance from A is √(20² + 20²), approximately 28.28. The two spacing circles are clearly separated even though the horizontal and vertical edge gaps are each only four pixels.
A rule that inspects only the horizontal gap would miss the diagonal relationship. A rule demanding a twenty-four-pixel separation in both coordinates would be unnecessarily restrictive for the circle comparison. The construction concerns Euclidean distance, which combines both coordinate differences through the sum of squares.
Contrast a centre at (18, 10). Its distance is √424, approximately 20.59, so the circles overlap. The presence of some vertical separation does not automatically make a layout clear. Its amount matters along with the horizontal separation.
For learners, predict the result before calculating, then compare the squared distance with 576, the square of twenty-four. This avoids unnecessary square-root rounding when the purpose is to decide which side of the threshold the example lies on. The method remains transparent: we are comparing the same physical separation in a mathematically convenient form, not replacing a geometric question with an unrelated numerical shortcut.
CHAPTER 9 OF 23 · Build the spacing checks
9. Check the circle against the actual neighbour
Circle separation is only one part of the specified construction. A small target’s circle also needs to avoid the actual neighbouring target. This matters when the neighbour extends far from its own centre or meets the size requirement directly.
For a clear original example, keep A centred at (0, 0) with radius-twelve spacing circle. Let a neighbouring 32 by 32 rectangular target occupy x from 10 to 42 and y from −16 to 16. The neighbour itself meets our direct rectangular size condition.
Its nearest point to A’s centre lies at (10, 0), only ten pixels away. A’s spacing circle therefore reaches into the neighbour. Comparing A’s centre with the large rectangle’s centre at (26, 0) would give twenty-six and could look reassuring, but that is the wrong comparison. We need distance to the region, not only distance to its centre.
Move the neighbour’s left edge to thirteen, with the same dimensions. The nearest distance becomes thirteen, clearly outside the radius-twelve circle. This changes the relevant relationship. The example explains why an adequate large target does not automatically protect an undersized neighbour, and why one centre-to-centre rule cannot handle every combination of target sizes.
CHAPTER 10 OF 23 · Preserve the shape
10. Derive distance from a point to a rectangle
Let a rectangle occupy x from a to b and y from c to d, with a ≤ b and c ≤ d. For a circle centre (x₀, y₀), compute the horizontal gap to the rectangle as dx = max(a − x₀, 0, x₀ − b). Compute dy = max(c − y₀, 0, y₀ − d).
The shortest distance from the point to the rectangular region is √(dx² + dy²). If the point lies within the rectangle’s horizontal span, dx is zero; if it also lies within the vertical span, the distance is zero. Otherwise the formula finds an edge or corner as appropriate.
For A’s centre and the previous neighbour, dx = 10 and dy = 0, giving distance ten. For a rectangle starting at (10, 10) and extending positively in both directions, dx = dy = 10, giving distance √200, approximately 14.14. The corner case is separated from the radius-twelve circle despite having coordinate gaps of only ten.
This formula is an original geometric tool for the supplied axis-aligned rectangles. It does not claim that every actual target is rectangular. When the region differs, the shortest-distance calculation must describe the actual shape or use a clearly identified conservative enclosure.
CHAPTER 11 OF 23 · Preserve the shape
11. Expose the long-thin-target counterexample
Keep A as the sixteen-pixel square centred at (0, 0). Let target B be a long rectangle occupying x from 10 to 70 and y from −8 to 8. B is sixty pixels wide and sixteen high, so it is undersized in the direct square-containment sense.
B’s bounding-box centre is (40, 0). Its radius-twelve circle is forty pixels from A’s centre, so the two spacing circles are clearly separated. Yet B’s actual left edge is only ten pixels from A’s centre. A’s circle overlaps B itself.
This counterexample defeats the shortcut of checking only circles around all small targets. The circles encode one relationship, while the actual target shapes encode another. Both checks are required for the spacing construction described by the official criterion.
Ask a learner to explain the failure without numbers after seeing the calculation. The long target extends much farther toward A than its own fixed-size circle does. That explanation is the transferable idea. A designer can change the width while keeping B’s centre far away, so centre separation alone cannot bound how close its edge comes. A faithful geometric account retains the extended region instead of reducing every target to an equal circle and forgetting the information that reduction discarded.
Suppose A is well separated from B on the same row. A third target C appears above A after an attachment is added. The earlier A–B calculation remains correct, but it no longer covers the entire local arrangement. A’s spacing circle must be considered against C as well.
Our fictional example can keep A at (0, 0), B at (26, 0) and place C, another sixteen-pixel square, at (0, 22). A and C have overlapping circles even though A and B remain clear. Selecting the most favourable neighbour would misdescribe the layout.
A reproducible paper record can list every distinct target in the relevant arrangement, then enumerate circle-to-circle and circle-to-target checks. For a small exercise, calculate all pairs rather than rely on a vague nearest-looking target in a sketch. A long rectangle can be geometrically close even when its centre looks distant.
The number of checks grows with the arrangement, but the meaning remains simple: each undersized circle must be clear of every relevant other target and every other undersized circle. A completed local result states the set examined. It should not silently become a claim about controls on another screen, in a hidden menu or in a later task state that was never included.
CHAPTER 13 OF 23 · Preserve the shape
13. Treat shape containment as a separate question
A circular target of diameter twenty-four has width and height twenty-four in its bounding box. It still cannot contain an axis-aligned square with side twenty-four. The square’s corners would lie farther from the centre than the circle’s radius.
The largest centred square inside a circle of radius twelve has diagonal twenty-four, so its side is 24/√2, approximately 16.97. This original calculation explains why bounding-box dimensions alone can overstate the direct size of a nonrectangular region.
A square target rotated relative to the page raises a related containment question. The relevant axis-aligned square must fit in the actual target, rather than merely in a larger bounding rectangle surrounding it. Our main exercises avoid that complexity by supplying axis-aligned rectangles, but the distinction becomes important when transferring the method to other shapes.
The lesson is to keep two uses of a bounding box separate. It locates the centre for the spacing-circle construction. It does not automatically replace the actual target for a direct containment test or for intersection with a neighbour. A convenient enclosing rectangle can help calculate a centre while still containing points that do not accept the action. Treating those points as part of the target would change the evidence.
CHAPTER 14 OF 23 · Preserve the shape
14. Use enclosures with the right direction of inference
Sometimes a paper exercise supplies only an enclosing rectangle for a complicated neighbouring target. If a small target’s circle is clearly separated from that entire enclosure, it is also separated from the actual target contained within it. This is a valid sufficient geometric check.
The reverse does not follow. If the circle intersects the enclosure, it may intersect only empty space outside the actual shape. That result is inconclusive about actual intersection unless the target really fills the rectangle. A bounding-box overlap can therefore be useful for screening without being a complete verdict.
For an original example, imagine a crescent-shaped target lying inside a rectangle. A circle might enter the rectangle through the crescent’s empty concavity while avoiding every point of the crescent. The enclosing shape has deliberately lost detail. It cannot resolve a question that depends on the missing detail.
Learners can practise this logic with paper cut-outs and supplied regions, without changing any real interface. Ask which conclusions are certain from an enclosure and which require the actual shape. The direction of containment explains the answer. This reasoning transfers beyond accessibility: a conservative bound can establish separation when clear, while a possible overlap within the bound may need closer examination rather than an immediate claim of actual overlap.
CHAPTER 15 OF 23 · Follow changed layouts
15. Keep CSS pixels distinct from screenshot pixels
All coordinates in our examples are CSS pixels. A screenshot can contain a different number of hardware or image pixels for the same CSS distance. Counting the screenshot’s pixels without a known mapping can therefore produce the wrong input units.
For a fictional image with a verified two-image-pixels-per-CSS-pixel scale, a measured image distance of fifty-two corresponds to twenty-six CSS pixels. If someone treats fifty-two as the CSS distance, the apparent clearance doubles. The geometric calculation can then be internally correct while describing the wrong size.
The mapping must be established from the actual capture and rendering conditions, not guessed from a familiar device name. Browser zoom and responsive layout also need appropriate attention. Increasing a picture’s displayed size after capture does not change the original interface geometry that the record was meant to describe.
For a classroom exercise, state the mapping explicitly or supply the CSS coordinates directly. Then ask the learner to convert one length and check a squared-distance calculation. When lengths scale by a factor, squared distances scale by its square. Mixing an unconverted coordinate with a converted radius creates another quiet unit error. The safest record keeps all geometry in one declared coordinate system before any intersection test begins.
CHAPTER 16 OF 23 · Follow changed layouts
16. Follow a responsive layout into its changed state
Suppose the original desktop paper layout has A and B separated horizontally by twenty-six CSS pixels. On a narrow fictional screen, the controls wrap into two rows, with centres separated vertically by twenty-two. Their target dimensions remain sixteen by sixteen.
The desktop circle check is clear, while the wrapped-row circles overlap. The dimensions of each individual control have not changed. The relevant relationship changed because their positions changed. A component-size record alone would miss that difference.
A useful revision might change the row spacing or provide an appropriately enlarged activation region. Whichever change is proposed, its resulting regions and positions need to be checked again. Simply saying that the desktop version was evaluated does not establish the narrow-state geometry.
For learners, supply two coordinate tables labelled by state and ask which previous conclusions transfer. Width and height classifications may remain valid, while neighbour distances need recalculation. This is a focused example of maintaining evidence after a change. The earlier calculation is not invalidated retrospectively; its scope remains the earlier layout. The new state requires its own relevant checks, with the same definitions preserved so that the comparison is meaningful rather than a set of unrelated screenshots.
CHAPTER 17 OF 23 · Follow changed layouts
17. Check geometry after an interaction changes the controls
A menu opening, an error message appearing or a new attachment row can change which targets are visible and adjacent. Our paper exercise should identify that state before enumerating neighbours. The initial screen’s clear spacing does not answer every later arrangement.
Imagine a fictional attachment row with a sixteen-pixel remove control. After an error, a second small retry control appears nearby. The first control’s own rectangle is unchanged, but its spacing circle now has another target to consider. The relevant new evidence is the retry region and its position.
This does not mean that every hidden control should be treated as simultaneously present. The record should represent the actual state being evaluated, including which regions accept actions in that state. A geometric inventory that combines mutually exclusive layouts can create false overlaps just as easily as an incomplete inventory can miss real ones.
A strong learner response states the state, lists its active target regions and performs the corresponding checks. It then identifies which state transition would require a new record. This makes the method practical: the investigation follows a person’s task while preserving a precise mathematical boundary. A single carefully labelled local result is more useful than a broad claim about an interface whose changing arrangements were never examined.
CHAPTER 18 OF 23 · Follow changed layouts
18. Repair the layout and recheck the neighbours
A proposed repair can enlarge a target, move it or change nearby arrangements. These operations have different geometric effects. Enlarging only the visible artwork does not alter our target record unless the activation region changes with it.
In the simple pair of sixteen-pixel squares separated by twenty-two pixels centre to centre, moving B to twenty-six provides clear circle separation. Alternatively, a verified larger rectangular activation region may meet the direct size condition, but it must not create conflicting actions or leave another undersized neighbour’s circle obstructed.
That second possibility is important. A repair to one control can extend it toward another small control. The repaired target may meet its own direct size requirement while making the neighbour’s spacing account worse. Recheck the relationships affected by the change rather than marking one component complete in isolation.
For a paper design task, ask students to propose two repairs and calculate both resulting arrangements. They should explain which regions changed, which checks became unnecessary and which new checks arose. A useful repair is supported by the revised geometry and the action mapping. The calculation does not choose the entire user experience, but it can reveal whether a plausible-looking change actually addresses the specific spatial problem it was intended to solve.
CHAPTER 19 OF 23 · Practise and continue
19. Solve an independently changed arrangement
Use a new fictional undersized target A with width twelve, height twenty and centre (5, 7). Place another target B with width eighteen, height fourteen and centre (23, 25). Both are axis-aligned rectangles and both are undersized for the direct square-containment condition.
Their centre differences are eighteen horizontally and eighteen vertically. Squared separation is 648, greater than 576, so their spacing circles are clearly separated. But do not stop there. B occupies x from fourteen to thirty-two and y from eighteen to thirty-two.
The shortest distance from A’s centre to B is √(9² + 11²) = √202, approximately 14.21, which is greater than twelve. A occupies x from −1 to 11 and y from −3 to 17. The shortest distance from B’s centre to A is √(12² + 8²) = √208, approximately 14.42. That is also clear.
For this supplied two-target arrangement, all three relevant comparisons succeed with margin: circle to circle and each circle to the other actual rectangle. The changed sizes and shifted coordinates prevent the learner from relying on the first example’s edge-gap shortcut. The solution demonstrates a complete local geometric check while leaving every wider accessibility claim appropriately separate.
CHAPTER 20 OF 23 · Practise and continue
20. Create a record another person can reproduce
A compact geometric result should name the target actions, screen state, coordinate system, actual regions and classification route. For each undersized target, include the bounding-box centre and the relevant comparison distances or squared distances.
Then state the outcome in the same scope. For our independent case, the two supplied rectangles have separated spacing circles and each circle is clear of the other rectangle. That sentence is stronger than saying the buttons look far enough apart and narrower than declaring the booking service accessible.
Retain exact coordinates where possible. Rounding a calculated distance before comparing it can make a borderline case appear definite. Our examples avoid that problem with strict margins, but a real record should preserve the evidence and use the current official interpretation for contact and other edge conditions.
An independent reviewer should be able to recompute the result from the record without measuring an illustration. If they cannot identify which target region was used, the evidence is incomplete even when the arithmetic is correct. Good reporting links a calculation to an inspectable interface condition. That is what lets a later reviewer distinguish an implementation change from an earlier measurement error and decide which part of the conclusion needs another check.
CHAPTER 21 OF 23 · Practise and continue
21. Repair and stabilise the learner's understanding
If the learner measures the icon rather than the target, begin with the same icon inside two different supplied activation regions. Ask which one accepts the action. The geometry should follow that functional answer.
If an edge gap is used as a universal threshold, compare the horizontal pair with the diagonal pair. Both have small visible gaps, yet their circle relationships differ. Have the learner calculate the centre distances and explain why the coordinate arrangement matters.
If circle-to-circle separation is treated as sufficient, use the long-thin-target counterexample. It provides a clear reason to retain the actual neighbour shape. If bounding-box overlap is treated as actual overlap for a curved shape, return to enclosure logic and identify what information is missing.
For stabilisation, change sizes and translate every coordinate by the same vector. Pairwise distances should remain unchanged. For extension, add a third target or a second responsive state. The completed response should predict which checks change before calculating. Understanding has transferred when the learner can preserve the criterion’s geometry through a new arrangement and can say when the available shape information is insufficient for a definite conclusion.
Does every small icon fail? No. The actual target may be larger than the icon, or a defined exception may apply. Identify the actual region and the route being evaluated.
Is a large target automatically harmless to a small neighbour? No. Its region can overlap the small target’s spacing circle. The point-to-rectangle example shows why the large target’s centre alone is insufficient.
Can I check only the circles? The long-thin example shows the missing condition: a circle can avoid another circle while reaching into the actual target. Both relationships matter.
Does enough area establish direct size? No for our rectangular examples. A sixty-by-sixteen rectangle has ample area but cannot contain the required twenty-four-by-twenty-four square.
Can a screenshot establish the answer? Only with adequate evidence about activation regions, scale and the relevant state. Its painted shapes and image pixels do not automatically supply those facts.
Does a successful spacing check establish full accessibility? It addresses this specified geometric question. Other criteria, task behaviour and evaluation evidence remain necessary.
What should I do with an exact-contact example? Preserve the coordinates and consult the current official guidance. This teaching guide uses clear margins rather than inventing a separate boundary interpretation.
Read the official criterion
WCAG 2.2 Target Size (Minimum) provides the normative requirement and exceptions. W3C's Understanding explanation explains target geometry and the spacing construction. Both were checked on 23 October 2026. Our coordinate layouts, distance derivations, counterexamples and practice tasks are original educational material, not an official conformance report.
Connect local geometry with usable tasks
Return to Universal Design for people, places and complete tasks. Continue with local text contrast for a different spatial evidence question, and whole-journey access when step results hide different people for linked task outcomes. Conflicting access needs in shared learning spaces develops another part of the subject’s design responsibility.
Mobile app accessibility services connects controls with mobile interaction. Digital accessibility testing addresses evaluation scope and reproducible findings. Choose these routes when the question extends beyond our supplied two-dimensional regions.
Carry the reasoning forward
How X Works connects systems and explanations. Learning That Transfers into Life develops the habit of changing context while preserving meaning. A useful final task is to explain why a target’s bounding box can locate a circle correctly yet still provide insufficient information about the target’s actual shape. That distinction is the central transfer check in this guide.