Accessibility with Elementor – Social Icons widget
By Anne-Mieke Bovelett on April 18, 2022
Status: up to date
The social icons widget in Elementor is a comfortable way to quickly add in the symbols of your social media channels, and their links
This widget is available in both Elementor Free and Elementor Pro.
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.
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.
