# Name Icon-Only Links and Buttons From Their Title

> Gives links and buttons that contain only an icon an accessible name taken from their title attribute or the icon's label, so screen readers do not announce them as just "link" or "button".

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

## Code

```html
<script>
(function () {
    function fix(root) {
        root.querySelectorAll('a, button, [role="button"]').forEach(function (el) {
            if ((el.textContent || '').trim() || el.getAttribute('aria-label') || el.getAttribute('aria-labelledby')) { return; }
            var img = el.querySelector('img[alt]:not([alt=""])');
            if (img) { return; }
            var svgTitle = el.querySelector('svg title');
            var name = el.getAttribute('title') || (svgTitle && svgTitle.textContent) || el.getAttribute('data-tooltip') || '';
            if (!name && el.tagName === 'A' && el.hostname) {
                var map = { 'facebook.com': 'Facebook', 'x.com': 'X', 'twitter.com': 'X', 'instagram.com': 'Instagram', 'linkedin.com': 'LinkedIn', 'youtube.com': 'YouTube', 'tiktok.com': 'TikTok', 'pinterest.com': 'Pinterest', 'github.com': 'GitHub' };
                var host = el.hostname.replace(/^www\./, '');
                name = map[host] || '';
            }
            if (name) {
                el.setAttribute('aria-label', name.trim());
                el.querySelectorAll('svg, i, .icon').forEach(function (icon) { icon.setAttribute('aria-hidden', 'true'); });
            }
        });
    }
    fix(document);
})();
</script>
```

## Notes

Elements with no title or labelled icon are left alone; add a title or aria-label to those in your theme or page builder.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Name Icon-Only Links and Buttons From Their Title" 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/