Scripted aid to identifying overlapping targets. It is meant to help test WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum)
- identifies interactive elements.
- works out the centre of the element.
- draws a semi-transparent 24x24 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.
A desire to make the process of checking 2.5.8 Target Size (Minimum) as painless and swift as is possible given my severe limitations in writing JavaScript . A rather torturous and elongated struggle with ChatGPT
- this script is largely untested and probably unreliable. My hope is someone who can actually write/understand JavaScript will improve it.
- thanks to @brothercake for his contrutions