For those of you doing on-page assessments, here’s a simple script that you can save as a bookmark to make headings appear on the page.
Chrome extensions work, but I like this better when visually scanning and scrolling.
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(heading => {
const tagName = heading.tagName;
const prefixText = `[${tagName}] `;
const firstChild = heading.firstChild;
const isSpan = firstChild && firstChild.nodeType === Node.ELEMENT_NODE && firstChild.tagName === 'SPAN';
const hasPrefix = isSpan && firstChild.textContent.trim() === prefixText.trim();
if (!hasPrefix) {
const prefixSpan = document.createElement('span');
prefixSpan.textContent = prefixText;
prefixSpan.style.background = '#ff0000'; // Red background
prefixSpan.style.padding = '10px'; // 10px padding
prefixSpan.style.color = '#fff'; // White text color
prefixSpan.style.marginRight = '10px'; // 10px right margin
prefixSpan.style.borderRadius = '3px'; // 3px border-radius
heading.insertBefore(prefixSpan, firstChild);
}
});
})();```
And here it is in bookmark format:
