{"id":947,"date":"2023-08-28T21:25:17","date_gmt":"2023-08-28T21:25:17","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=947"},"modified":"2023-08-29T14:12:11","modified_gmt":"2023-08-29T14:12:11","slug":"quick-and-very-dirty-target-size-checker","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2023\/08\/28\/quick-and-very-dirty-target-size-checker\/","title":{"rendered":"quick and very dirty target size checker"},"content":{"rendered":"

\"Patrick<\/p>\n

updated<\/b>\u00a029\/08\/23<\/p>\n

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)<\/a>.<\/p>\n

What I produced with the help\u00a0<\/em>of ChatGPT<\/a> is a quick and very dirty target size bookmarklet<\/a><\/p>\n

What does it do?<\/h2>\n
    \n
  1. identifies interactive elements.<\/li>\n
  2. works out the centre of the element.<\/li>\n
  3. draws a semi-transparent 24×24 pixel circle based on the centre of the element.<\/li>\n
  4. if the element has a height or width less than 24 pixels the circle is blue.<\/li>\n
  5. if the element has a height or width 24 pixels or greater the circle is green with a solid border.<\/li>\n
  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.<\/li>\n
  7. each element that overlaps another is given an\u00a0aria-description=\"overlaps\"<\/code>.<\/li>\n
  8. only visible elements will be included in the script output.<\/li>\n<\/ol>\n

    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<\/strong><\/p>\n