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
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
See WebAIM: Semantic Structure.
Section based outline algorithm is not implemented anywhere. Not a thing before, not a thing now..
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
npm install- Change source in
index.js npm run build- Test bookmarklet from
index.html - Commit changes