Accessibility / Spacing / Target Size Bookmarklet

The Target Size bookmarklet visualizes touch target sizes by drawing 24px circles at the center of each interactive element. Blue circles indicate targets smaller than 24x44px (failing WCAG), green circles indicate passing sizes. Also detects and alerts on overlapping controls. Run again to remove the visualization.

javascript:%21function()%7Bconst%20t%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2Ce%3D%5B...document.querySelectorAll(%22a%2C%20label%2C%20button%2C%20input%3Anot(%5Btype%3Dhidden%5D)%2C%20select%2C%20textarea%2C%20%5Btabindex%5D%2C%20%5Brole%3Dbutton%5D%2C%20%5Brole%3Dcheckbox%5D%2C%20%5Brole%3Dlink%5D%2C%20%5Brole%3Dmenuitem%5D%2C%20%5Brole%3Doption%5D%2C%20%5Brole%3Dradio%5D%2C%20%5Brole%3Dswitch%5D%2C%20%5Brole%3Dtab%5D%22)%5D.filter(function(t)%7Blet%20e%3Dt%3Bfor(%3Be%3B)%7Bconst%20t%3DgetComputedStyle(e)%3Bif(%22none%22%3D%3D%3Dt.display%7C%7C%22hidden%22%3D%3D%3Dt.visibility)return%211%3Be%3De.parentElement%7Dreturn%210%7D)%2Cn%3D%5B%5D%3Be.forEach(e%3D%3E%7Bif(%21e.matches(%22label%22)%26%26e.closest(%22label%22))return%3Bconst%20l%3Dfunction(t)%7Bconst%20e%3Dt.getBoundingClientRect()%3Breturn%7Btop%3Ae.top%2Bwindow.scrollY%2Be.height%2F2%2Cleft%3Ae.left%2Bwindow.scrollX%2Be.width%2F2%7D%7D(e)%3Bn.push(%7Belement%3Ae%2Ccenter%3Al%7D)%3Bconst%20o%3Ddocument.createElementNS(t%2C%22svg%22)%3Bo.style.position%3D%22absolute%22%2Co.style.top%3Dl.top-12%2B%22px%22%2Co.style.left%3Dl.left-12%2B%22px%22%2Co.style.width%3D%2224px%22%2Co.style.height%3D%2224px%22%2Co.style.zIndex%3D%229999%22%2Co.style.margin%3D%220%22%2Co.style.pointerEvents%3D%22none%22%2Co.setAttribute(%22aria-hidden%22%2C%22true%22)%3Bconst%20r%3Ddocument.createElementNS(t%2C%22circle%22)%3Br.setAttribute(%22cx%22%2C%2212%22)%2Cr.setAttribute(%22cy%22%2C%2212%22)%2Cr.setAttribute(%22r%22%2C%2212%22)%3Bconst%20i%3Ddocument.createElementNS(t%2C%22clipPath%22)%3Bi.setAttribute(%22id%22%2C%22clip%22)%2Ci.appendChild(r.cloneNode())%2Co.appendChild(i)%2Cr.setAttribute(%22clip-path%22%2C%22url(%23clip)%22)%2Ce.getBoundingClientRect().width%3C24%7C%7Ce.getBoundingClientRect().height%3C24%3Fr.setAttribute(%22fill%22%2C%22rgba(0%2C%200%2C%20255%2C%200.3)%22)%3A(r.setAttribute(%22fill%22%2C%22rgba(0%2C%20200%2C%200%2C%200.3)%22)%2Cr.setAttribute(%22stroke%22%2C%22rgba(0%2C%20200%2C%200%2C%200.8)%22)%2Cr.setAttribute(%22stroke-width%22%2C%224%22))%2Co.appendChild(r)%2Cdocument.body.appendChild(o)%7D)%3Bconst%20l%3D%5B%5D%3Bn.forEach((t%2Ce)%3D%3E%7Bn.slice(e%2B1).forEach(e%3D%3E%7BMath.sqrt(Math.pow(e.center.left-t.center.left%2C2)%2BMath.pow(e.center.top-t.center.top%2C2))%3C24%26%26(l.push(t.element)%2Cl.push(e.element))%7D)%7D)%3Bconst%20o%3D%5B...new%20Set(l)%5D%3Bo.forEach(t%3D%3Et.setAttribute(%22aria-description%22%2C%22overlap%22))%2Calert(%60There%20are%20%24%7Bo.length%7D%20overlapping%20controls.%60)%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Fstevefaulkner%2Ftargetsize%2F%5CnBookmarklet%20name%3A%20Target%20Size%20(WCAG%20SC%202.5.8)%5Cn%22)%3B