# Hide Decorative SVG Icons From Screen Readers

> Adds aria-hidden to inline SVG icons that sit next to visible text inside links and buttons, so screen readers stop announcing meaningless graphic names.

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

## Code

```html
<script>
(function () {
    document.querySelectorAll('a svg, button svg').forEach(function (svg) {
        if (svg.hasAttribute('aria-hidden') || svg.getAttribute('role') === 'img' || svg.hasAttribute('aria-label')) { return; }
        var parent = svg.closest('a, button');
        var text = parent ? parent.textContent.replace(svg.textContent || '', '').trim() : '';
        if (text || (parent && parent.getAttribute('aria-label'))) {
            svg.setAttribute('aria-hidden', 'true');
            svg.setAttribute('focusable', 'false');
        }
    });
})();
</script>
```

## Notes

Icons that are the only content of a link are left alone so the link keeps a name.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Hide Decorative SVG Icons 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/