# 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.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: headings, screen-reader, page-builders
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-hide-empty-headings/

## Code

```html
<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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Hide Empty Headings From Screen Readers" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/