updated 29/08/23
WCAG 2.2 is almost upon us, many of us have started testing the new Success Criteria for paying clients. I wanted to find a way to speed up the testing of 2.5.8 Target Size (Minimum).
What I produced with the help of ChatGPT is a quick and very dirty target size bookmarklet
What does it do?
- identifies interactive elements.
- works out the centre of the element.
- draws a semi-transparent 24×24 pixel circle based on the centre of the element.
- if the element has a height or width less than 24 pixels the circle is blue.
- if the element has a height or width 24 pixels or greater the circle is green with a solid border.
- if an interactive element is identified as overlapping another interactive element a javascript alert is displayed with details of the number of overlapping elements.
- each element that overlaps another is given an
aria-description="overlaps". - only visible elements will be included in the script output.
Check it out, tear it apart, call me a no good punk, pour scorn, make it better, even better; make something else that works better! AND share it publicly without a restrictive licence
- target size bookmarklet
- target size bookmarklet source code on GitHub
8 replies on “quick and very dirty target size checker”
Nice work so far — was thinking about contributing to this and wondering about a few features I would like to add to the “official” version of this bookmarklet, and was wondering what your thoughts are:
1. One of the exception is “Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;” Should we test if it is a link inside a before we flag it?
2. I notice you use colour only … you good with me adding an alternative (like an icon or border around the circle … I see you have a subtle one around the green circle, but I was wondering if we can make it more obvious)? Or something else?
Would love to help out here … with these as well as some of the bugs in the github issues area if no one is working on them.
hey @Zoltan thanks for your interest, please go ahead and file PR’s on the repo for any improvements.
It’s certainly a good start. I have used it a little and logged an issue on GitHub. You wouldn’t want my coding efforts anywhere near your project, so I will leave it to you to decide if it’s important.
Is there a reason you didn’t add a visible flag to indicate overlapping elements?
[…] Article contenant un bookmarklet de test (en anglais) […]
[…] representation of all such targets, where each has a 24px diameter circle centered over the target (target size bookmarklet may be helpful […]
Hi thanks for this, I’m a bit confused would you be able to explain when the test fails? If the circles are green does it matter if they overlap because the element is at least 24 x 24 px – is that a failure?
Thank you for this bookmarklet! I just wish the errors circles were red instead of blue, it took me so long to understand the logic behind the colors.
Thank you anyways, now that I understand the meaning of the colors I can use it better 🙂