Table of Contents Bookmarklet

Document outlines are helpful when you want to skim a document—whether you do that with your eyeballs, eardrums, fingertips, or brainwave injections.

In 2016 Marijke Luttekes wrote a bookmarklet that prints the document outline of the current document. Super helpful for getting that quick overview. Helper for people that want to know what’s on the page. Helpful for developers that want to check their document’s outline. Helpful for everyone!

One thing that “annoyed” me was that the list with results wasn’t indented. This is my attempt to build on Marijke’s work.

Installation, bookmark this link: ToC

Things I changed

Marijke’s previous work served as the basis for this version. A lot of the logic is a direct copy! I did add a few things:

Checking for ARIA headings

To make this work a few things needed to happen:

  1. Add ARIA headings to initial list (so they’re in order)
  2. Get their aria-level information
  3. Get the same information from the HTML headings
  4. Put all of that in a list for further processing

Other considerations

While I said that the lack of indenting was annoying I didn’t add it. It would require nested lists for each heading level. This is no problem in coding but I felt it would be annoying for AT users. This bookmarklet is best compared with things like the list feature in JAWS or the Web Rotor in VoiceOver—those are flat lists too. While AT users aren’t the main audience here—they already have this functionality!—it’s good to be considerate nevertheless.

Special thanks

My thanks go out to these people for their help in the development of this Bookmarklet.

Example Headings

A bunch of headings to show things work!

Level three HTML heading

display: none

visibility: hidden

Level three HTML heading with an id

Level four ARIA heading

visibility: hidden (parent)

Another level four ARIA heading
display: none (parent)
Level five ARIA heading
Level five ARIA heading with an id
Level six HTML heading

inert parent