24×24 Pixel Cursor Bookmarklet

The proposed WCAG version 2.2 has gone through a bunch of revisions since I covered the first draft in 2020. One new success criterion that persisted is 2.5.8 Target Size (Minimum) at Level AA (its name changed from “Pointer Target Spacing”).

For background, WCAG 2.1 introduced 2.5.5 Target Size, mandating a 44 × 44 CSS pixel target size. As I wrote in more detail in 2019, that siz is backed up by better design systems. However 2.5.5 is Level AAA, almost guaranteeing it would be ignored in basic WCAG conformance efforts. The introduction of 2.5.8 Target Size (Minimum) fills that gap.

2.5.8 allows for a smaller minimum target size, 24 × 24 CSS pixels, or an offset of 24 pixels to adjacent targets. The Understanding document goes into some detail on how to measure for this spacing, being careful not to encode obvious areas of abuse (1 pixel buttons with 23 pixels of offset, for example).

Just as I did for 2.5.5, I have made a bookmarklet that will turn your cursor into a 24 × 24 pixel square (back in April but forgot to post it), which may help in building and testing conformance with the proposed 2.5.8 Success Criterion:

See the Pen 24×24 Pixel Cursor Bookmarklet by Adrian Roselli (@aardrian) on CodePen.

If that CodePen does not load then drag the following link to your browser bookmark bar; you can also activate the context menu to save it as a bookmark:

24×24 Cursor

This is a fork and improvement of my 44×44 bookmarklet (which was based on Jared Smith’s 44×44 bookmark).

To remove the cursor, activate the bookmarklet again. Thanks to Pat for the suggestion to adapt his own focus outline bookmarklet (adapted from Steve’s text spacing bookmarklet from work by Pat and Jon Gibbins) which allows it to toggle on and off and to work in one level of nested iframes, such as this empty one:

Note that this new Success Criterion is still in flux and may not even be a square when done. Follow the GitHub discussions for updates.

Also note your browser’s Content Security Policy may prevent the script from modifying a page, in which case you can run it in the browser console. In Firefox use Ctrl + Shift + K; in Chrome use Ctrl + Shift + J.

Also also note if you are using anything other than the default pointer size on macOS, then this cursor size will not be 24 × 24. Check System Preferences… → Accessibility… → Display… → Cursor . If it is set to anything other than “Normal” then the cursor will be the wrong size. I am unaware of how to override that (or if it should be overridden).

Finally, for reference here is the current text of Success Criterion 2.5.8: Target Size (Minimum) Level AA:

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

• Spacing: The target offset is at least 24 CSS pixels to every adjacent target;
• Inline: The target is in a sentence or block of text;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed;
• User agent control: The size of the target is determined by the user agent and is not modified by the author;
• Equivalent: The function can be achieved through a different control on the same page that has an area of at least 24 by 24 CSS pixels.

Note

Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Update: 9 May 2023

The SC this post addresses has changed again. As of today, 9 May, the Editor’s Draft for Success Criterion 2.5.8 Target Size (Minimum) reads:

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

• Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
• Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
• Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
• User agent control: The size of the target is determined by the user agent and is not modified by the author;
• Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Since the “offset” language is gone and the spacing exception now defines a circle, I have updated my bookmarklet. Actually, I forked my previous one and also made an SVG version.

• 24px Circle Cursor
• 24px SVG Circle Cursor

I made a new pen so you can play around a bit as well.

See the Pen 24×24 Pixel Cursor Bookmarklet by Adrian Roselli (@aardrian) on CodePen.

Update: 9 May 2023

Curtis Wilcox made two variants of my bookmarklet, one with a center dot and one with a black and white cross.

I made a variant with a mixed black and yellow cross to hopefully make that center point easier to see:

• 24px SVG Circle Cursor v2