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
6 replies on “quick and very dirty target size checker”
Couldn’t an interactive element meet both of the following criteria? For example, if an element is 12px x 38px it seems to fulfill both.
4. if the element has a height or width less than 24 pixels the circle is blue.
5. if the element has a height or width 24 pixels or greater the circle is green with a solid border.
@john may not be clear, but my understanding is that both height and width need to be 24px or greater
If that’s the case then great! I’m onboard.
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?