Hyperlinks can be styled with CSS (Cascading Style Sheets) to make them more visually appealing. One common tactic is to create a hover link, which changes its appearance when the user hovers over it with their mouse.
This can create an accessibility issue. Many people use a keyboard alone (with no mouse) to navigate the internet. If a hyperlink only appears as a hyperlink when the user hovers over it, keyboard-only users might not see it.
Likewise, if the hover effect is the purpose of the hyperlink is to show that the link text is selected, the effect must be device-independent. In other words, if a user focuses on the link with their keyboard, they should get the same experience as a mouse user.
Accessibility Tips for Using Hover Effects on Hyperlinks
Fortunately, these are fairly easy problems to fix. Hover effects don’t necessarily make your website less accessible, provided that you follow the requirements in the Web Content Accessibility Guidelines (WCAG), which are widely considered the standards for digital accessibility. Here’s what you need to know.
1. Make sure hover links appear for keyboard users.
First, let’s make sure that every hover link provides the same visual experience for keyboard users. Let’s look at a typical CSS hover effect:
a:hover {
color: crimson;
}
This uses the CSS pseudo-class a:hover, which changes the style of the text when the user puts their mouse cursor over the link. Another CSS pseudo-class, a:focus, changes the style when the text receives keyboard focus.
We can ensure that every user receives the same visual presentation by switching a:hover with a:hover, a:focus. Generally speaking, whenever an element’s appearance changes with a:hover, you’ll also include a:focus.
Related: How CSS Benefits Accessibility
2. Don’t use hover effects to hide links.
Hyperlinks are important interactive elements. Make sure that users can find them.
While you can use CSS to hide hyperlinks until the user mouses over them or focuses on them with a keyboard, that’s not a great practice. WCAG requires controls to be distinguishable, and obviously, hidden links don’t meet this requirement.
In the current version of the guidelines (WCAG 2.1), hidden links aren’t expressly forbidden. However, WCAG 2.2 is expected to introduce requirements for hidden controls — and since hidden links can be frustrating for many users, it’s a good idea to avoid them entirely.
Related: WCAG 2.2 Introduces New Requirements for Hidden Controls
3. Don’t use color alone to identify hyperlinks.
Some users cannot perceive color due to color vision deficiencies (sometimes referred to as color blindness). These users may look for other visual indicators to identify hyperlinks.
WCAG 2.1 Success Criterion (SC) 1.4.1, “Use of Color,” is especially relevant here:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
To follow this guideline, most websites underline hyperlinks in addition to changing the color. With that in mind, make sure your links follow these rules:
- The link text is underlined, bordered, or styled in a way that indicates a hyperlink.
- If the link changes color on mouse hover, the color also changes when the link receives keyboard focus.
- The color of the link follows WCAG’s requirements for color contrast. To check whether color combinations meet these requirements, use our free Color Contrast Accessibility Validator.
Related: The Basics and Importance of Color Contrast for Web Accessibility
4. Write descriptive hyperlink text.
This tip isn’t specific to hover links, but it’s one of the most common accessibility issues. Link text refers to the text that the user clicks to activate the hyperlink. WCAG 2.1 SC 2.4.4, “Link Purpose (In Context),” requires that:
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Link text is “ambiguous in general" if it’s intentionally vague. For example, if your website contains a game that instructs users to “open a chest to receive a prize,” it’s acceptable to write vague link text like “chest #1.” If your links aren’t intentionally ambiguous, they need accurate link text.
Here’s why: People who use screen readers (software that converts text to audio), eye-tracking systems, and other assistive technologies may scan your page for important links. The link text informs them of what they can expect if they activate the hyperlink.
Basic link text like “click here" or “learn more" doesn’t tell people why they should click on your link (or what will happen when they click). For more guidance, read: Quick Guide to Accessible Hyperlinks.
Need more help? Get a free automated website accessibility summary or send us a direct message.
