Links using icons as content are one of the most common items flagged on accessibility tests. However, they are also one of the easiest to fix.
A tool like WebAIM's WAVE can be used to test websites against accessibility guidelines.
A common pattern sites use for social media links is to wrap an Font Awesome icon with a link.
<a href="...">
<i class="fa fa-twitter"></i>
</a>
Looking at this markup, it can be seen that there is no text inside the link — only an <i> tag. When the page is accessed with a screen reader, this will be read as 'Link', without any indication of where the link is leading.
To fix this, text can be added to the link which will be available to screen readers, but hidden to sighted users to preserve the aesthetics of the site. Also, aria-hidden="true" can be added to the <i> to indicate that screen readers should ignore this element. Here is the simplified markup of the accessible RSS link:
<a href="...">
<span class="visually-hidden">Twitter</span>
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
.visually-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
The CSS to make the text hidden to normal users but available to screen readers comes from WebAIM's guide on content for screen readers:
It took just a few minutes and a little extra markup to make these links accessible. Little things like this can go a long way to making the web more accessible for everyone.