Links and Website ADA Compliance
We first covered ADA compliance in a blog post in December which extends accessibility requirements to your property’s website, and since then, we’ve heard that more companies have been hit with lawsuits, including one of our own clients.
Making your website accessible involves more than just fixing navigation so blind people who use screen readers can navigate the site, updating PDFs, and adding closed captioning to videos. The structure of your content needs to be accessible, and that includes the anchor text you use for links. What follows is a deep dive into making your website links compliant.
First, a link’s text should be clear, meaningful, and descriptive to the page it links to. It should also be visually easy to discern from the rest of the text. Screen readers, the technology blind people use to navigate information on a computer, have the ability to pull up a list of all the links on a page and jump directly to them, which makes it important for them to be descriptive, rather than simply say, “click here.”
Here are some additional considerations:
Website Text
The text should be meaningful, but not redundant. Never use the word “link” within your link. It doesn’t explain where it goes or what information you will get. An example of a good anchor text for the link would be “more apartments in Dallas,” assuming it links to a page with apartment listing.
No URL Links
Do not use URLs as links. In certain cases, this would be ok. For example, using “google.com“ would be acceptable because it’s short and everyone knows the link would go to Google. The same goes for email links. Instead of using ”support@company.com,“ make the link descriptive. ”Contact Support for help“ and linking to the support email follows the best practice. Never use ”Email Me“ or ”Contact Us“ for email link text.
Don’t Capitalize Links
Screen readers will read each capital letter individually, so if you have all the letters capitalized in a link ”MORE INFO,“ a blind user will hear M, O, R, E, I, N, F, O, which you can imagine would be annoying and meaningless. Not only is that difficult for someone with a screen reader, there’s no difference to the shape of the words when everything is capitalized. It’s just a long rectangle. This makes it difficult for everyone to read, especially if they don’t have perfect vision.
Links In New Tabs
If a link opens a new window or tab, the link needs to warn screen readers. A properly formatted example is, ”Visit our online store (opens new site in a new tab).” This gets the point across and is easy to implement. A more complicated, but better alternative is to use an icon or visual cue which works really well. The following code block is an example:
<a href="www.google.com" target="_blank" rel="noopener" aria-describedby="new-window-warning">Search on Google<i aria-hidden="true" class="fas fa-external-link-alt"></i></a>
<div hidden>
<span id="new-window-warning">Opens in a new window</span>
</div>
This method adds a warning message only screen readers will see and adds an icon commonly understood to mean the link opens in a new window. The font awesome trick does require you have font awesome installed on the site. You could do so by including the following code to the <head> of the site: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">.
Image Links
Link images correctly. Any image that is also a link should have clear alt text describing the image as well as a warning that clicking the link will open in a new site or tab, if applicable. There’s no need to say it’s a link since this will already be known to the screen reader. An image should a visual indicator that it’s a link even for people who are sighted. A hover effect or having the mouse cursor change from an arrow to a pointer are common ways to indicate text is a link. You can use tool tips to explain where a linked image leads.
Clear Text Links
Text links need to be visually clear for sighted users as well screen readers. There needs to be a minimum level of visual contrast between the link text and the rest of the body text. The contrast ratio needs to be 3:1 with surrounding text and the background. You could cover all the bases by having the text contrast at 3:1 and use a hover effect to underline the link text when hovered. While it’s a best practice to just underline all link text within the body of the site, it will impact some website designs, so use your judgement.
No Scripted Links
Using Javascript or PHP to create a dynamic link is not compliant. Any link on a site should be created using an anchor tag (<a>), HREF, or AREA. Also onClick should not be used for non-link tags like <div>, <p>, etc.
Friendly Keyboard Links
All links need to be set in a logical order and a user must be able to “tab” through the links. A focus indicator needs to be used for all links on the site. Basically, if a link changes when you hover over it, it should also change when the link has keyboard focus. Solve this by making sure you use a:focus anywhere that you have an a:hover rule. If you can’t tell which link has the focus when tabbing through with a keyboard, your site isn’t compliant.
Concise Links
A link should usually have no more than 100 characters and be easy to understand. Don’t confuse and annoy screen reader users by using “block level” links, e.g. linking an entire paragraph of text. The screen reader will read the entire content area as part of the link, including all elements and tags contained within, as if it were part of the link itself.
Limit Use Of Links
Often links are used for SEO purposes in order to create links to other content on the site just for the sake of having links. You need to balance this need with that fact unnecessary links are annoying to users with screen readers or people with other visual issues. Having random links to the homepage, services page, etc., for out of context content should be avoided. For example, linking to the contact page in part of the content where it says “Contact us for more information” is fine, but creating meaningless links is not.
As always, if you have questions about ADA compliance, want us to audit your site, or need any digital marketing help at all, we’re here!
