Fork me on GitHub

Header

Important notice about the «ADG» project

Important notice: Due to large demand, the «Accessibility Developer Guide» project (currently a proof of concept with low priority) will become a top priority priority in 2017. We will make this guide become what it deserves to be for so long already: a comprehensive resource for all folks interested in accessibility. For this we need your support!

Visible Headings Bookmarklet

This bookmarklet shows the current website's headings outline similar to like a screenreader does.

Installation

Just drag and drop the following link to you browser's bookmarks bar:

Visible Headings

Usage

Browse to the page you want to test and execute the bookmarklet. You should see a popover describing the page's heading outline on the top right of the page.

After using it, you should reload the page (as the bookmarklet loads an external jQuery which may cause side effects).

Screenshot

Disclaimer

This bookmarklet relies on jQuery's :visible selector. Screenreaders may have other opinions about what exactly should be treated as visible, so always use a screenreader as a reference!

Especially, this bookmarklet doesn't take into account elements with role="heading" (see example Overrule heading levels using ARIA).

NVDA vs. iOS VoiceOver

We know about a difference between NVDA and VoiceOver when it comes to the decision about when something should be treated as visible. While iOS VoiceOver needs width or height of at least 1px to treat an element as visible, NVDA doesn't. So iOS seems to be more conservative than NVDA.

The good thing: this bookmarklet is conservative, too, and may reveal such problems.

Use a good mechanism to hide elements!

So to provide both NVDA and iOS VoiceOver (and hopefully every other screenreader available), be sure to use a hiding mechanism that is treated universally the same! There's a good WebAIM article about this topic: Invisible Content Just for Screen Reader Users.

Alternatives

While this tool is quite accurate (see disclaimer above), there are other tools that to do the same thing, but are not accurate in certain situations!

For example, the browser extension "HeadingsMap" (for Firefox and Chrome) also displays headings that are definitely hidden from screenreaders (e.g. using CSS display: none or visibility: hidden).

We highly advise you only use tools that you know are accurate, or of whose inaccuracies you are aware.

Credits

Thanks to Severin Klaus from Hinderling Volkart who provided us this bookmarklet.