Accessibility / Reading / Source Order Tracer Bookmarklet

The Source Order Tracer bookmarklet numbers visible content blocks to visualize the DOM reading order. Finds all semantic content elements (p, headings, li, sections, articles, etc.), filters out hidden elements and elements without text content, and positions numbered badges at each block's location showing the sequence number and element tag. Useful for comparing visual layout order with DOM source order to identify discrepancies that affect assistive technology users. Run again to remove.

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-order%22%2Ct%3Ddocument.getElementById(e)%3Bif(t)return%20void%20t.remove()%3Bconst%20o%3Ddocument.createElement(%22div%22)%3Bo.id%3De%2Co.style%3D%22position%3Afixed%3Binset%3A0%3Bpointer-events%3Anone%3Bz-index%3A2147483647%22%3Bconst%20n%3D%22p%2Ch1%2Ch2%2Ch3%2Ch4%2Ch5%2Ch6%2Cli%2Cdt%2Cdd%2Csection%2Carticle%2Caside%2Cmain%2Cheader%2Cfooter%2Cnav%2Cblockquote%2Cpre%22%3Blet%20r%3D1%3Bfor(const%20e%20of%20document.querySelectorAll(n))%7Bif(%21e.offsetParent)continue%3Bif(%21(e.innerText%7C%7C%22%22).trim())continue%3Bconst%20t%3De.getBoundingClientRect()%2Cn%3De.tagName.toLowerCase()%2Ci%3Ddocument.createElement(%22div%22)%3Bi.textContent%3Dr%2B%2B%2B%22%20%22%2Bn%2Ci.style%3D%60position%3Aabsolute%3Bleft%3A%24%7Bt.left%2BscrollX%7Dpx%3Btop%3A%24%7Bt.top%2BscrollY%7Dpx%3Bbackground%3A%23ffe08a%3Bborder%3A1px%20solid%20%23333%3Bborder-radius%3A12px%3Bpadding%3A2px%206px%3Bfont%3A12px%20monospace%3Bpointer-events%3Anone%60%2Co.appendChild(i)%7Ddocument.body.appendChild(o)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Source%20order%20tracer%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7D%7D()%3B