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

Don't: Link to Iowa State homepage
Do: Iowa State homepage

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

Don't: For the list of ISU majors, click here
Do: List of ISU majors
Don't: Iowa State students choose from 100 majors
Do: Students choose from 100 Iowa State majors

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

Don't: ISU Strategic Plan FY 2017-2022 (PDF)
Do: ISU Strategic Plan FY 2017-2022 (PDF, 18KB)
Don't: ISU Office of Admissions
Do: ISU Office of Admissions (opens in new window/tab)

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

Don't: http://www.vpresearch.iastate.edu/en/for_industry/business_incubators_offices_and_laboratories/
Do: ISU Business Incubators, Offices and Laboratories

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

Don't: Facts about Iowa State
Do: Facts about Iowa State

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.

Accessibility assist

Got questions? Contact web accessibility coordinator Zayira Jordan, zjordan@iastate.edu, 294-0982.

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