Headings

Bookmarklet for generating heading outline on random web pages. You might be interested in the headinglevelstart proposal.

Drag the bookmarklet into your bookmark bar from this page, or alternatively, create a bookmark with the following:

javascript:%20void%20function()%7Blet%20t=%22%22;for(const%20r%20of%20document.querySelectorAll('h1,%20h2,%20h3,%20h4,%20h5,%20h6,%20%5Brole=%22heading%22%5D%5Baria-level%5D'))%7Bconst%20l=e(r);if(!r.closest('%5Baria-hidden=%22%22%5D,%20%5Baria-hidden=%22true%22%5D')&&(r.offsetHeight%3E0%7C%7Cr.offsetWidth)&&l)%7Bconst%20e=r.hasAttribute(%22aria-level%22)?Number(r.getAttribute(%22aria-level%22)):Number(r.tagName.match(/%5Cd/)%5B0%5D);t+=new%20Array(2*(e-1)).fill(%22-%22).join(%22%22)+%60h$%7Be%7D:%20%60+l+%22%5Cn%22%7D%7Dfunction%20e(t)%7Bconst%20e=t.getAttribute(%22aria-labelledby%22);return(t.getAttribute(%22alt%22)%7C%7Ct.getAttribute(%22aria-label%22)%7C%7Ce&&r(document.getElementById(e))%7C%7Cr(t)).trim()%7Dfunction%20r(t)%7Blet%20r=%22%22;for(const%20l%20of%20t.childNodes)r+=l%20instanceof%20HTMLElement?e(l):l.textContent%7C%7C%22%22;return%20r%7Dconsole.log(t);%7D()

Source available in index.js.

The heading outline will be printed out in console like this (for this pull request):

h1: Fix example in Chrome #3
--h2: Conversation
----h3: muan commented on Jul 22, 2019 • edited 
----h3: koddsson left a comment
----h3: haacked commented on Jul 23, 2019 • edited 
----h3: muan commented on Jul 23, 2019
----h3: haacked commented on Jul 23, 2019
--h2: Footer
----h3: Footer navigation

Why

When trying to find information on a lengthy web page, which of the following are you most likely to do first?

Navigate through the headings on the page – 68.8%

When navigating a web page by headings, how useful are the heading levels (e.g., "Heading 1", "Heading 2", etc.) to you?

The usefulness of proper heading structures is very high, with 86.1% of respondents finding heading levels very or somewhat useful.

Source: WebAIM: Screen Reader User Survey #8 Results

How

See WebAIM: Semantic Structure.

Section based outline algorithm?

~~Section based outline algorithm is not implemented anywhere.~~ Not a thing before, not a thing now..

Alternative

The Nu Html Checker has an outline option, which shows the outline of https://muan.co as the following:

This bookmarklet generates a matching outline:

h1: Mu-An Chiou
--h2: Photos
--h2: Posts
--h2: Notes

Development

1. npm install
2. Change source in index.js
3. npm run build
4. Test bookmarklet from index.html
5. Commit changes