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.
Opens WPIDE on
Code
<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 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.