Links that do the job

Links are the spidery foundation of the web, but some don't do their jobs. They blend into the page, almost hidden. Their labels are vague. They entice you into a click and, suddenly, you're downloading a 50-page PDF. 

For those who already have difficulty accessing websites, such links are more than annoying. They pose a real barrier. Fortunately, it's fairly easy to turn difficult links into accessible ones.  Here's how to make your links work for everyone.

Don't put "link" in a link

Screen readers, used by people who are blind and those with low vision, always announce links before reading them. In the first example above, a screen reader would say, "Link, link to Iowa State homepage." In the second, the reader would say, "Link, Iowa State homepage." "Link, link" quickly becomes tiresome, particularly, if there are dozens of links on a page.

Links must make sense out of context

Read in context, the "don't" examples seem to work. However, many screen reader users save time by skipping most of the text on a site and skimming from link to link. In a long list of links, "click here" doesn't mean a thing and "majors" is a bit obscure. "List of ISU majors" or "100 Iowa State majors" is more straightforward.

If a link is going to download something or open a new window, say so

Clicking into a download (for example, a PDF, Word doc, Excel file or PowerPoint) when you're expecting to see a website is annoying. For screen reader users, it's also disorienting. They may find themselves on a new page with no way to get back. It's also polite to include the size of the download within the link.

If a link takes users to a downloaded file or opens in a new window (or tab), include this information within the link title. If it's outside the link title, those using screen readers may never see it.

Avoid using the URL as the link title

In the first example, a screen reader is going to painstakingly read every letter and dot in the URL. Unless there's good reason to use the URL as the link title, use something that's a little easier on the eyes and ears.

Ensure that links can be easily seen

The gold standard is to underline links whenever possible. Colored text also signifies a link, but color alone won't necessarily pass the accessibility test. The link must stand out in some other way. If it's not underlined, for example, it should be boldfaced, italicized or be sufficiently different in lightness or hue from normal text. Specifically, the colored link should have a contrast ratio of at least 4.5:1 on normal text (generally about 14 point) when compared to non-link text. Of course, there needs be be enough contrast with the background as well for easy viewing.  Don't trust your own eyes on these specs. Run the colors through one of the many online color contrast checkers, such as  WebAim Color Contrast Checker and Luminosity Colour Contrast Ratio Analyser.

Ensure that links can be accessed via the keyboard

If links only can be accessed by a mouse or trackpad, they are inaccessible. You should be able to click the keyboard tab to move through your website links. If that doesn't work, contact your web developer for a fix.

Related stories

• Accessible PowerPoints are on students' wishlist, March 30, 2017
• Captioning, with an assist from YouTube, Jan. 5, 2017
• Well formed forms, Oct. 20, 2016
• Links that do the job, Sept. 1, 2016
• Color your website accessible, July 21, 2016
• How to create accessible Word docs, June 23, 2016
• The art of alt text, June 9, 2016