Hide Empty Headings From Screen Readers
Finds heading tags on the page that contain no text (often left behind by page builders and themes) and hides them from screen readers, so they do not show up as blank entries in the heading list.
Opens WPIDE on
Code
<script>
(function () {
document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function (h) {
var text = (h.textContent || '').replace(/ /g, ' ').trim();
var img = h.querySelector('img[alt]:not([alt=""]), svg[aria-label], [aria-label]');
if (!text && !img) { h.setAttribute('aria-hidden', 'true'); }
});
})();
</script>Notes
Fix empty headings at the source when you can; this keeps them from confusing screen reader users meanwhile.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.