Accessibility / Structure & Headings / Headings Map
The Headings Map bookmarklet displays a fixed panel listing all headings (h1-h6) in their document order with quick jump links. Creates a compact navigation panel showing each heading's level and text content (truncated to 80 characters), allows clicking any heading to scroll it into view and focus it, and provides a quick way to review heading structure and navigate through content. Run again to remove the panel.
WCAG SC 1.3.1: Info and RelationshipsWCAG SC 2.4.1: Bypass Blocks
Run Headings Map
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-headings%22%3Blet%20t%3Ddocument.getElementById(e)%3Bif(t)return%20void%20t.remove()%3Bconst%20o%3D%5B...document.querySelectorAll(%22h1%2Ch2%2Ch3%2Ch4%2Ch5%2Ch6%22)%5D%3Bt%3Ddocument.createElement(%22div%22)%2Ct.id%3De%2Ct.setAttribute(%22style%22%2C%22position%3Afixed%3Bz-index%3A2147483647%3Btop%3A8px%3Bright%3A8px%3Bmax-height%3A70vh%3Boverflow%3Aauto%3Bbackground%3A%23fff%3Bborder%3A1px%20solid%20%23ccc%3Bpadding%3A8px%3Bborder-radius%3A8px%3Bfont%3A12px%20monospace%3B%22)%3Bconst%20n%3Ddocument.createElement(%22ul%22)%3Bn.style%3D%22list-style%3Anone%3Bpadding%3A0%3Bmargin%3A0%3B%22%2Co.forEach(e%3D%3E%7Bconst%20t%3Ddocument.createElement(%22li%22)%2Co%3Ddocument.createElement(%22a%22)%3Bo.href%3D%22%23%22%2Co.textContent%3De.tagName%2B%22%20%22%2Be.textContent.trim().slice(0%2C80)%2Co.style%3D%22display%3Ablock%3Bpadding%3A4px%206px%3Bborder-radius%3A4px%3Btext-decoration%3Anone%3Bcolor%3A%2300c%3B%22%2Co.addEventListener(%22click%22%2Ct%3D%3E%7Bt.preventDefault()%2Ce.scrollIntoView(%7Bblock%3A%22center%22%7D)%2Ce.focus(%7BpreventScroll%3A%210%7D)%7D)%2Ct.appendChild(o)%2Cn.appendChild(t)%7D)%2Co.length%7C%7C(n.innerHTML%3D%22%3Cli%3ENo%20headings%3C%2Fli%3E%22)%3Bconst%20r%3Ddocument.createElement(%22button%22)%3Br.textContent%3D%22%5Cxd7%22%2Cr.title%3D%22Close%22%2Cr.style%3D%22position%3Aabsolute%3Btop%3A0%3Bright%3A0%3Bborder%3A0%3Bbackground%3A%23eee%3Bborder-radius%3A0%208px%200%208px%3Bpadding%3A4px%206px%3Bcursor%3Apointer%22%2Cr.onclick%3D()%3D%3Et.remove()%2Ct.append(r%2Cn)%2Cdocument.body.appendChild(t)%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Headings%20map%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7D%7D()%3B
← Back to all bookmarklets