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