If you have a personal website, chances are, you've put some social media icons somewhere in the site. Whether at the header next to the site name, or at the footer, before the copyright notice. And any wouldn't you want to let your visitors know where else they can find you?
However, these icons have a major problem when not implemented correctly. And it has to do with accessibility.
If you're adding a series of social media icons, chances are, you're adding them without any accompanying text. Do you really need to? Everybody knows what the Facebook, Twitter or Github icon looks like! You can therefore add so much in so little space.
But if you're not adding any text, what is a screen reader supposed to read?
As an example, suppose we need to add a Twitter icon from FontAwesome that links to your profile. In code, it would look like this:
<a href="https://twitter.com/SavvasStephnds"> <i class="fab fa-twitter"></i> </a>
And on the page, if you set up FontAwesome corrently, it would look like this:
It looks great but if a screen reader gets the focus on the icon this is what it reads to the user:
Link. Main. Landmark.
That's it. No information of what the link is about or where it goes! Not helpful at all for screen reader users who can't see what's going on otherwise! This need to be fixed!
There is an easy and straightforward way to fix accessibility issues with the help of some
aria tags. Specifically, we'll be using 2 tags:
aria-labelwill be used to add a label to the
<a>tag, to tell the screen reader what to read.
aria-hiddenwill be used to hide the
<i>tag which contains the icon, since this doesn't serve any purpose to the screen reader user.
So to fix the code snippet above, first we add
- <a href="https://twitter.com/SavvasStephnds"> + <a href="https://twitter.com/SavvasStephnds" aria-label="Follow me on Twitter"> <i class="fab fa-twitter"></i> </a>
<a href="https://twitter.com/SavvasStephnds" aria-label="Follow me on Twitter"> - <i class="fab fa-twitter"></i> + <i class="fab fa-twitter" aria-hidden="true"></i> </a>
Now the screen reader will read something like this:
Follow me on Twitter. Link. Main. Landmark
Now the screen reader user will have a clear idea of the purpose of the link and where it goes. Much clearer!
Remember to be considerate and inclusive in everything you do and develop. Have you found this guide helpful? Has it helped in making your social media icons more accessible? Let me know on Twitter!