Making social media SVG icons accessible with Webflow

October 22, 2021

I had an interesting situation where a client needed 2 sets of social icons on the same page. One set was for the site we were building, the other was for a companion site. 

We were using Client First from Finsweet for the build. They recommend SVG icons because you can do fancy things like change the color with “current-color”, or hide the icon from screen readers with aria-hidden=”true”. We found the icons we needed on https://simpleicons.org

An SVG as an HTML embed is a bit heavier that an inline icon, but Carie Fisher, in Creating Accessible SVGs, recommends

“For more complex or essential SVGs, you should consider adding the SVG as markup into the HTML. Although adding the SVG into the markup makes the page potentially heavier and slower, you have more options with JavaScript and CSS to manipulate the styles and animations of the images.”

I wasn’t sure if we should hide the icons, because a sighted screen reader user would not hear the graphic announced, which might be confusing.  


the three social media icons in the Webflow designer


So I read a couple of blog posts about accessibility and SVGs from Scott O’Hara and Carie Fisher. They are both highly respected accessibility champions. But these posts didn’t quite answer my problem. So I asked on Twitter.


As with so much in accessibility, Scott very helpfully replied “it depends”. 



The icons were definitely essential, as they are social media links. And I decided that I wanted the screen reader to announce both the link and the icon. Using Carie Fisher’s example number 5, we simply edited the title of the SVG in each case. 

Directly from Simple Icons the HTML code has a <title> like “Twitter icon”, with role=”image”. As a screen reader will announce that the image is a graphic, we removed the word “icon”. You never need the words “image”, or “graphic”, or “photo” in alt text, unless you specifically want to draw attention to the medium.

As we had 2 sets of icons, it was important to show the difference. In this case we wrote “Patchwork Hub, Twitter.” and “My own kind of music, Twitter.” 

As we designed the social icons with just the icon, and no text, we needed the screen reader to actually see the SVG. So we didn’t use the code aria-hidden=”true”. This code hides the element from screen readers. You might use this if you have a button with both an icon and text. 

But, some people with sight also use a screen reader. For example, someone who has progressive sight loss may start to use a screen reader while they can still see. This will help them get used to using the screen reader. 

In this case we were just using the icons alone. If the icons were part of a link that had text too, then as Scott points out,