Cowritten by Molly Brush, Content Specialist
Links make the Internet a network of connected pages instead of isolated islands of information—so it’s essential that they are accessible to all users. A few simple rules ensure that those who consume your content with a screen reader or other assistive technology can get where they need to go. And as is always the case with accessibility measures, following these rules makes the user experience better for all visitors to your site.
Don’t use URLs as link text
Link text should describe specific content users will find on the page to which the link goes. There is no need to include actual URLs, and screen readers may try to read them, which is not helpful to users who navigate your site by means other than sight.
Don’t refer to a link by its location on the page
The layout of a page when viewed on a desktop or laptop computer doesn’t match the mobile view of the same page (parts are often ordered differently), and can’t be replicated by a screen reader. Screen readers often read all the links on a web page together, out of their original context. Avoid language that assumes links have a single, enduring location or that separates the link itself from the context that explains it:
YES: Learn more about the M.B.A. program
NO: To learn more about the M.B.A. program, click on the link below.
Link text should be informational, not self-referential
NO: “To learn more about the degree, follow this link”
YES: “Learn more about the degree.”
Never use “click here” or “this link” as link text. Ever.
How much text is enough?
Contextual links, which appear in running text, should include enough words to make their context clear:
You can use IUPUI’s tuition and fees estimator to get an idea of how much your tuition and fee costs might be.
Call to action (CTA) links, which are set off from surrounding text or appear in a button or panel, should be short and should start with a verb:
YES: Review admissions standards
YES: Discover everything the IMU has to offer
NO: Staff directory
Don’t use end punctuation in CTA button text
YES: View the staff directory
NO: View the staff directory.
Interactive panels allow for a heading and accompanying text that supplies context. Since the whole panel is the link, headings can be two or three words and the verb can appear in the text that follows:
Make link text unique
If a web page has two or more links with the same wording (e.g., “Learn more”), visitors using assistive technology may not be able to discern the difference among them. It’s usually easy to fix this by making the link text more descriptive:
Learn more about dining options
Explore campus libraries
But there are cases where making all links on a page unique presents a challenge. Web pages often have groups of similar content types, such as a people directory or a list of academic programs, each of which links to another page with details about a person or a degree. Using a CTA button saying “Learn more” for each item in such a group is fine for a user who can see and process the context (i.e., rely on the unique program names) to follow the correct link. Imagine, however, the experience of a user whose assistive technology lists all of those links alphabetically.
In such cases you can assign link text that is hidden on the rendered web page, but accessible to assistive technology. For example, a simple line of code customizes each instance of “Reserve your spot” in a series of events on the IUPUI Office of Undergraduate Admissions site:
<a class=”button” href=”/visit/events/jag-days/herron-jagday”>Reserve your spot <span class=”visually-hidden”>at a Herron School of Art and Design JagDay</span></a>
Remember these rules, and link responsibly!