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.