Last updated December 6th, 2023 06:21
If you were to ask ordinary WordPress users, which widget they use most in Elementor, I dare say, many of them will tell you, that it is a text widget and an icon widget. The icon widget, simply named “Icon,” can be seen on almost any site, used by the owner of Elementor. The reason is simple. You can also insert a link into it, making the icon an active element that can perform redirects to, for example, social networks. Despite its great popularity, however, this widget, quite significantly lowers the rating in, for example, Pagespeed insight, for one simple reason. The base setting of widget does not have a prominently marked ALT (alternative) text field anywhere. And that’s what Google sees as an accessibility flaw. So, lets take a look, how to set the ALT text for the icon box in Elementor.
How to set the ALT text for the icon box in Elementor
What is ALT (alternative) text in hyperlink
The alternative text and the fact that it is set on the link is very easy to tell, for example, by hovering the mouse cursor on the link. This alternative text is then displayed in the form of a caption bubble. In reality, it looks something like this:
It’s essentially similar to the alternative captions for an image, that among other things, tells the search robot what to expect under the link. These alternative texts can also be used by screen readers. If you do not use this alternative text, you will get this warning message in the pagespeed insight test:
“The alternative text of the links (and the alternative text of the images when they are used as links), which is recognizable and unique and can be selected, makes it easier for users of screen readers to browse the pages. More information.“
How to set the ALT text for the icon box in Elementor
Setting alternative text is very simple. The only problem is, that it’s hidden at first sight, especially for beginners. This is why there are many long discussions on the internet, where users search for this feature to get the site’s source code in order.
So if you use the icon in Elementor and insert a link into it, try focusing on the “Custom Attributes” field next time. Because this field serves that purpose, among other things.
Where do you find the “Custom Attributes” field and what to insert in this box to make the alternative text work?
This field is hidden in the link settings:
- insert an icon into the text, select the look, set the size and color
- add a link to which the icon should route
- at the link, click on the gear wheel for its detailed settings
- focus on the “Custom Attributes” field
You now have two ways to use this field to insert alternative text:
title|alternative text
aria-label|alternative text
Once you use one of the above codes for title or aria-label in the attributes and insert alternative text behind the straight slash line, this text will be used as the reference label.
Summary
So if you’re using the icons on your site, and if you’re putting links in them, I highly recommend focusing on working with alternative text as well, and devoting a few seconds longer to the icon. Your reward will be a bit cleaner code and better results in Pagespeed insight (and not just there).
The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.
Subscribe to the Newsletter
Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.
