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.

Link

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.

© 2022 Anne-Mieke Bovelett​

Accessibility & Possibility Advocate

This page contains one or more affiliate links.

Earnings go to sponsoring open source developers and inclusivity activists. You can read about it in “Why I have affiliate links on my site – full disclosure“.