Home > Accessibility with Elementor – Social Icons widget

Accessibility with Elementor – Social Icons widget

The social icons widget in Elementor is a comfortable way to quickly add in the symbols of your social media channels, and their links.

screenshot of Elementor Social Icons Widget Settings
This widget is available in both Elementor Free and Elementor Pro.

Social Icons Settings

You have to be aware that in Elementor the default setting for the links attached to your social media icons is to open in a new window, the option is ticked by default. Please uncheck it, it is best practice to have links open in the same window. That way users can use the go back functionality of their browser.


To adjust the link settings, click on the cogwheel next to the field where added your link. Uncheck the option “Open in new window”

Add a custom attribute for screen reader users

Add in an aria label under Custom Attributes with a humanly understandable short line of text. In this example, I added: aria-label|Visit Anne on LinkedIn.

In the code output, this will translate to: aria-label=”Visit Anne on LinkedIn”. That is what the screen reader announces when the focus is on that linked icon. It is also the text that appears when a user summons a link list.