TOC
In some cases, developers may want to create links that are only intended for screen reader users, that are hidden visually. There are two ways to create visually hidden links:
- The aria-label method
- The clip method
One case where you might want to have visually hidden links is the case of social media icons. For example, visually you might want to show a Facebook logo for the link, but screen reader users you would spell out the word ‘Facebook’ in the link. So, it would appear as a Facebook logo button, but have an accessible name of ‘Facebook’.
The aria-label method
Aria-label is the attribute that can change the accessible name of a link. In this method, a CSS class is placed in the <a> tag to visually show the Facebook icon, like class=”fb”. Then the aria-label attribute is used in the <a> tag to provide an accessible name. Without aria-label in it, it would be an empty link.
Aria-label code example:
<a href="https://www.facebook.com/stateuniversity" class="fb" aria-label="State University Facebook page"></a>
The clip method
In the clip method, the text that’s desired to be visually hidden is wrapped in a <span> and given a CSS class, like: class=”visually hidden”. Then in that CSS class definition, the text is thrown off-screen, so it’s not seen visually, but remains available for screen reader users. It’s called the clip method because it uses the clip CSS property to redefine the visible portion of the link element and totally clip it from being seen.
Clip method code example:
<a href="https://www.facebook.com/stateuniversity" class="facebook_icon">
<span class="visually-hidden">State University Facebook page</span>
</a>
Some CSS for the code example:
<style> …
.visually-hidden {
border: 0; clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden; padding: 0;
position: absolute; width: 1px;
}
</style>
Updated clip method CSS
The MDN docs say that the clip CSS property is now deprecated. Here is the CSS updated to use the clip-path method:
<style> …
.visually-hidden {
border: 0; clip-path: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden; padding: 0;
position: absolute; width: 1px;
}
</style>
The clip-path property can also clip with different shapes, other than a rectangle, like: circle, ellipse, and polygon.
Resources about creating visually hidden links:
- Deque has a video about the aria-label and clip methods within the Buckeye Learn Images and SVG course.
- Deque’s visually-hidden class using the clip method in CSS in GitHub.
- Information about the clip-path property from W3Schools.
- Technique ARIA8: Using aria-label for link purpose to satisfy WCAG 2.4.4: Link Purpose (In Context) or 2.4.9: Link Purpose (Link Only)
- MDN webdocs information about the aria-label attribute.