Z-index focus override bookmarklet

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 bookmarklet

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:
   • Adrian’s cursors
   • Curtis’ cursors

The bookmarklet

This bookmarklet applies a z-index of 100,000 to any focussed element. It also sets 'position: relative', which might cause bugs.

Z-index focus override bookmarklet

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.