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:
- In addition to HTML native headings (
<h1>-<h6>) it now also checks for ARIA headings ([role="heading"]) - Ability to hide hidden headings
- Styles are placed in a
<style>element - Removed the disc list style
- The dialog is now a true dialog
- Escape now closes the dialog
- Looks a bit nicer
- Code is now 4,5 times longer (whoops)
Checking for ARIA headings
To make this work a few things needed to happen:
- Add ARIA headings to initial list (so they’re in order)
- Get their
aria-levelinformation - Get the same information from the HTML headings
- 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.
Related links
- Original by Marijke Luttekes
- Blog by Marijke Luttekes
- Visibility check code; with thanks to Anne-Greeth and Marijn
- HTML: the Style element; looked up needed attributes
- MDN: Symbol.toStringTag; wanted a universal way to check if an element was a HTML heading (without checking against a list of h#-tags)
- Accessibility Object Model; wanted to use AOM, but seems it’s no longer implemented :(
- MDN: Switch; I always forget the syntax, ended up solving it another way
Special thanks
My thanks go out to these people for their help in the development of this Bookmarklet.
A bunch of headings to show things work!