HTML Accessibility

quick and very dirty target size checker

Patrick and David pose in front of a billboard outside of Accessibility World Headquarters, which is displaying the full text of 2.5.8 target size

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?

  1. identifies interactive elements.
  2. works out the centre of the element.
  3. draws a semi-transparent 24×24 pixel circle based on the centre of the element.
  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.
  6. if an interactive element is identified as overlapping another interactive element a javascript alert is displayed with details of the number of overlapping elements.
  7. each element that overlaps another is given an aria-description="overlaps".
  8. 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

7 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.

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?

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?

Leave a Reply

Your email address will not be published. Required fields are marked *