Accessibility / Spacing / Tap Target Heatmap Bookmarklet

The Tap Target Heatmap bookmarklet visualizes touch target sizes and spacing. Red outlines indicate targets smaller than 44x44px (WCAG 2.5.5 minimum), while orange glow indicates targets too close to neighbors (less than 8px apart). Run again to remove the visualization.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20t%3D%22a11y-tap-heat%22%2Ce%3Ddocument.getElementById(t)%3Bif(e)return%20void%20e.remove()%3Bconst%20o%3Ddocument.createElement(%22div%22)%3Bo.id%3Dt%2Co.style%3D%22position%3Afixed%3Binset%3A0%3Bpointer-events%3Anone%3Bz-index%3A2147483647%22%3Bconst%20n%3Dt%3D%3Et.matches(%27a%5Bhref%5D%2Cbutton%2Cinput%3Anot(%5Btype%3Dhidden%5D)%2Cselect%2Ctextarea%2C%5Brole%3D%22button%22%5D%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%27)%2Ca%3D%5B...document.querySelectorAll(%27a%2Cbutton%2Cinput%2Cselect%2Ctextarea%2C%5Brole%3D%22button%22%5D%2C%5Btabindex%5D%27)%5D.filter(n).filter(t%3D%3Et.offsetParent)%2Ci%3D44%2Cl%3D8%3Bfor(const%20t%20of%20a)%7Bconst%20e%3Dt.getBoundingClientRect()%2Cn%3De.width%3Ci%7C%7Ce.height%3Ci%3Blet%20r%3D%211%3Bfor(const%20o%20of%20a)%7Bif(o%3D%3D%3Dt)continue%3Bconst%20n%3Do.getBoundingClientRect()%2Ca%3DMath.max(0%2CMath.max(n.left-e.right%2Ce.left-n.right))%2Ci%3DMath.max(0%2CMath.max(n.top-e.bottom%2Ce.top-n.bottom))%3Bif(Math.hypot(a%2Ci)%3Cl)%7Br%3D%210%3Bbreak%7D%7Dconst%20s%3Ddocument.createElement(%22div%22)%3Bs.style%3D%60position%3Aabsolute%3Bleft%3A%24%7Be.left%2BscrollX%7Dpx%3Btop%3A%24%7Be.top%2BscrollY%7Dpx%3Bwidth%3A%24%7Be.width%7Dpx%3Bheight%3A%24%7Be.height%7Dpx%3Bborder%3A%24%7Bn%3F%223px%20solid%20%23e00%22%3A%222px%20solid%20%230a0%22%7D%3Bbox-shadow%3A%24%7Br%3F%220%200%200%204px%20rgba(255%2C165%2C0%2C.6)%22%3A%22none%22%7D%3Bpointer-events%3Anone%60%2Cs.title%3D%60%24%7Bn%3F%22Small%20target%22%3A%22%22%7D%24%7Br%3F(n%3F%22%20and%20%22%3A%22%22)%2B(r%3F%22Too%20close%20to%20neighbor%22%3A%22%22)%3A%22%22%7D%60%2Co.appendChild(s)%7Ddocument.body.appendChild(o)%2Calert(%22Red%20%3D%20small%20target%2C%20orange%20glow%20%3D%20too%20close%22)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Tap%20target%20heatmap%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(t)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bt.message)%7D%7D()%3B