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
|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.
Got questions? Contact web accessibility coordinator Zayira Jordan, email@example.com, 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.
- Color your website accessible, July 21, 2016
- How to create accessible Word docs, June 23, 2016
- The art of alt text, June 9, 2016