Most businesses and nonprofits promote their social media accounts on their websites — and really, why wouldn’t you? It’s a simple way to promote engagement with your audience.
However, you need to make sure that every interactive feature on your website is accessible for people with disabilities. Many websites use icons on their footer menus to link to social media, which can lead to a major accessibility issue: empty hyperlinks.
Why Social Media Icons Are Often "Empty" Hyperlinks
When you design your website, you usually won’t start with raw HTML. You’ll use a template on WordPress, Adobe Commerce (Magento), or whatever other platform you’re using to build the site.
Many of those templates implement social media icons by using CSS (Cascading Style Sheets). The CSS is triggered with HTML, but the actual image — the icon for Facebook, LinkedIn, and so on — doesn’t appear in the HTML.
This is a problem because screen readers and other assistive technologies may ignore CSS entirely. To those tools, the element will just appear as an HTML link, without any link text or any accompanying image.
Here’s a quick example of how social media links might be implemented incorrectly:
<a href="https://www.facebook.com/companyname" target="_blank"><i class="fab fa-facebook-square"></i></a>
A screen reader might simply announce this as “link,” then attempt to read the URL to the user. That’s not a great experience, and it’s a violation of the Web Content Accessibility Guidelines (WCAG), the international standards for digital accessibility.
Related: What Are Empty Hyperlinks?
Do Empty Hyperlinks Violate the ADA?
In many cases, yes. Empty hyperlinks are frequently cited in lawsuits filed under the Americans with Disabilities Act (ADA). As we’ve discussed in other blogs, the ADA doesn’t contain technical guidelines for websites, but WCAG is generally considered the standard for ADA compliance.
And since hyperlinks provide crucial functionality, you certainly want to make sure that they work for all users — including people who use assistive technologies.
Related: What is ADA Testing?
Fixing Social Media Icons with Empty Hyperlinks
The good news is that in most cases, empty hyperlinks can be fixed fairly easily. For footer menus, you’ve got a few options:
- Add link text to the element. This is the easiest option, but it might not be aesthetically pleasing.
- Use actual images to show the logos (instead of CSS), then add alt text that describes the destination of the hyperlink.
- Add ARIA (Accessible Rich Internet Applications) markup to the element.
While any of these fixes can improve WCAG conformance, the best practice is to use semantic HTML — not ARIA — wherever possible. The first rule of ARIA is to avoid using ARIA: It’s not as widely supported as HTML, and misusing ARIA can make your site less accessible.
For example, some developers might use ARIA to hide social media icons from assistive technology users. That might prevent “empty hyperlinks" from showing up as an error on your next automated accessibility analysis, but it also prevents users with disabilities from finding your social media accounts.
Remember, those social media buttons are there for a reason: You want people to engage with your brand. Take a few extra minutes to fix the problem the right way.
Related: Why No ARIA Is Better Than Bad ARIA
Testing Content for Empty Hyperlinks
You can test your website for empty hyperlinks with automated tools like AudioEye’s Website Accessibility Checker.
Be aware that if you’ve hidden certain elements (such as social media buttons) with ARIA, automated tools may skip past those elements — but they’re still a violation of WCAG unless the functionality exists somewhere else on the same page (for example, if you’ve got a text list of your social media accounts next to the icons).
You can also inspect the HTML of your website’s footer menu. Look for any <a> tags that don’t contain one of the following:
- Text that explains the destination of the link.
- An image with alt text that explains the destination of the link.
- An ARIA label that explains the destination of the link.
Empty hyperlinks are a major accessibility issue, and they’re extremely common. WebAIM estimates that at least 50% of the internet’s top 1 million home pages have at least one empty link. Solving this issue will help you set your brand apart from the competition — and provide a better experience for all users.
For help with a specific accessibility issue, send us a message to connect with an expert.
