Target size bookmarklets

These bookmarklets are meant to be a way to quickly identify the majority of click/pointer ‘targets’ on a webpage. So they’re easier to visually scan for WCAG 2.2 criterion ‘Target Size (minimum) 2.5.8’.

Note: these bookmarklets won't work on some websites, due to the security settings for the website. An example site where they won't work is the main GOV.UK content website.

How to use these bookmarklets

The following instructions have been tested on Chrome version 115 and Firefox version 115:

  1. Open the HTML file with your preferred browser
  2. Save each link as a bookmark, by either:
    • (Chrome and Firefox) dragging and dropping the link into the bookmarks bar
    • (Firefox) opening the right-click (context) menu and selecting the ‘Bookmark link…’ option
  3. Go to a page you want to test, such as pages within the GOV.UK Design System review app
  4. While on the page, click the newly-added bookmark link in your bookmarks toolbar
  5. Voilà! There should be green or rainbow highlight boxes on various hit target areas
  6. If you’d like, you can pair this bookmarklet set with the 24 pixel circle cursor bookmarklet sets made by Adrian Roselli and Curtis Wilcox:

The 'basic' highlighter bookmarklet

This bookmarklet applies a background to a selection of HTML elements that usually have an interactive target area.

Basic Target Size Highlighter

Note: this 'basic' version takes a less disuptive approach by applying a background. Because of this, its styles won't visibly affect some target areas with foreground non-text content that covers the full area, such as <img> images.

The 'advanced' highlighter bookmarklet

This bookmarklet applies a 'CSS filter' overlay to a selection of HTML elements that usually have an interactive target area.

Advanced Target Size Highlighter

Note: this 'advanced' version can affect some elements more negatively, including some layout shift for certain elements. For example, pseudo-elements that are outside or larfer than their main element's area will be shifted back inside of the area of the main element. I think this is a browser bug, as I don't believe adding a filter attribute should lead to layout shift.

Bonus 24-pixel reference images

If you want to get an idea for how big 24 pixels is on an actual device's screen, you can load up this page, make sure the browser and screen zooms are set to 100%, and then measure the images below. There's a circle version to match the requirements for WCAG 2.2 success criterion 'Target Size', and a rectangular version to make it easier to measure with a ruler.

Circle reference image

Rectangle reference image

How to contribute and contact information

This project is maintained and hosted using GitHub. Feel free to open an issue, suggest some edits or fork the repository entirely through the target-size-highlighter GitHub repository.

If you would like to chat about a particular but unrelated web accessibility topic, you can reach out to dav-idcox on LinkedIn.