Text Pages

Links

Links should be actionable, descriptive, and accessible. CMS users linking internal and external websites, PDFs, and images on their webpages need to practice the proper use of dependency tags (if applicable).

Creating Great Links

While screen readers can read a full page to a user, screen reader users may prefer to instead listen to a list of links.

Make sure to always use the Insert/Edit Link tool in the WYSIWYG Editor when inserting links (always hyperlink, do not use URL strings). This will automatically turn the linked text green and underline it when hovered over by a mouse or focused by keyboard. Do not underline text that is not a link— if you need to emphasize text, use bold or italic.

A link should be distinguishable from its surrounding text. Do not use "click here" when inserting links, as it is not: a call to action, SEO-friendly, modern, or accessible for people using screen readers. A good exercise to test link copy is to examine the linked text without content: does it make sense?


Linked Images

If you have a linked image, you want it's alt text to act like link text vs the normal rules for alt text. Instead of describing the image, you want to describe the link's destination.

Example

You have a picture of people studying under a tree that links to tutoring services. It doesn't have text on the image, but it is visually located near other text and links about our tutoring services, so there's a clear correlation for sighted users. 

Incorrect Usage

"People studying under a tree"

Screen reader users won't know where "People studying under a tree" is meant to take them.

Correct Usage

"tutoring services"

Ideally you want both screen reader users and non-screen reader uses to have the same information when it comes to links. There is no need to use phrases like "link to" as screen readers will announce the word "link"  before the actual text.


Dependency Tags

Learn more about inserting links using Dependency Tags.

Back to top