Making social media SVG icons accessible with Webflow
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
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.
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,