When adding text-based links within a webpage, carefully choose which words to hyperlink. The general rule of thumb is to always link keywords. Linking keywords will:
- help improve search engine optimization
- give more details to users with functioning vision who are scanning your webpage
- provide context to individuals without functioning vision who may be using a screen reader or other assistive technology
Links, Screen Readers, and Accessibility
Linked text should make sense out of context. This is because screen readers often navigate from link to link, skipping the surrounding text. They will read each link out loud, in sequential order.
For example, if your link text is "Copper Country," then the screen reader will say "link Copper Country" and the user will know that the webpage being linked to is likely about the Copper Country. If instead, your link text is "click here," the screen reader will say link click here and the user will have no idea what the linked webpage may be about.
Good Example
<p>Michigan Tech and the <a href="/tour/copper-country/">Copper Country</a> have a small-town feel. Students and community members say it's just right—not so
big that it's easy to get lost, but not too small, either. An ideal place to call
home.</p>
Bad Example
<p>Michigan Tech and the Copper Country have a small-town feel. Students and community
members say it's just right—not so big that it's easy to get lost, but not too small,
either. An ideal place to call home. <a href="/tour/copper-country/">Click here</a> to learn more.</p>
Another feature that screen reader users may take advantage of is the ability to order page links alphabetically. This is particularly useful if the user already has a specific link in mind, such as a contact form or staff listing. It is important to keep the most important keywords at the beginning of your link text. "Staff listing" will appear alphabetically as expected. "View our staff listing" will not.
Tips for Writing Link Text
Use the following tips to ensure that link text is accessible:
- Avoid using a URL as your link text; especially if it is long or complicated
- URLs may not be easily readable by humans or screen readers
- Keep linked phrases as short as possible, while still being meaningful out of context.
This will save screen reader users time, as less will need to be spoken. For example,
- "make a gift" is preferable to "to make a gift online please click here"
- "contact us" is preferable to "you can contact us by"
- Link at least one full word. Two words is commonly better.
- A link that is only a letter or a symbol will be difficult to click on and will not provide context
- If you must add action prompts to your link, put them at the end. For example,
- "Contact us (opens popup)" is to "Link opens popup: contact us"
- Do not add the word "link" to your text
- Try to ensure that each unique link on your webpage uses unique link text
- If you have two different staff listing links that go to the same page, that is alright. If they go to different pages, that should be different, such as "digital services staff" and "print services staff"
- If you used "read more" frequently, imagine how frustrating it would be for a screen reader user to hear "read more" spoken over and over again with no context
- Never include empty links, using href=""
Linking Images
For some webpages, it may be appropriate to link an image to a webpage instead of linking text. In these instances, the screen reader will read the image's alternative text (ALT tag) as the link text. The ALT tag must include both the content and function of the image. If the image is decorative, then only function is necessary.
Decorative Image Example
<p><a href="/tour/copper-country/"><img src="my-picture.jpg" alt="Staff Listing" /></a></p>
Informational Image Example
<p><a href="/tour/copper-country/"><img src="my-picture.jpg" alt="Diagram showing 200 inches of total snow; linking to monthly subtotals" /></a></p>
Optional Programming Techniques
There may be instances where you want to keep general link text, such as "[read more]." In these instances you can use aria-label or aria-labelledby to give link context to screen readers.
aria-label Example
Most screen readers will read out loud the aria-label attribute in place of the link text. For instance, a "read more" link related to the Copper Country can be coded as follows:
<p class="right"><a href="/tour/copper-country/" aria-label="Copper Country">[read more]</a></p>
aria-labelledby Example
There may be instances where a nearby headline can act is the perfect label for a general link. In this case, you can connect that headline to the general link by using aria-labelledby.
<h2 id="copper-country">The Copper Country</h2>
<p>Michigan Tech and the Copper Country have a small-town feel. Students and community
members say it's just right—not so big that it's easy to get lost, but not too small,
either.</p>
<p class="right"><a href="/tour/copper-country/" aria-labelledby="copper-country">[learn more]</a></p>
Instead of saying "link, learn more," the screen reader will say "link, Copper Country."
Testing Link Text
Using a screen reader to speak each link on your webpage is the best testing you can do. However, if you do not have access to a screen reader, read the linked text out loud for each of your links. Would someone who you are reading to understand what content you are linking to based only on the linked words spoken?
Learn More
To learn more about descriptive link text:
Modern Campus CMS
To create a link within the content of your webpage, highlight your text or image and then click the link icon in the toolbar or use the shortcut Cmd/Ctrl + K.
To add an aria-label or aria-labelledby attribute, navigate to source code using the toolbar.
To add an image with alternative text to your page body, read step four under Insert Image. To modify alternative text of an image already within the body of your webpage, select the image and then click the "Insert/Edit Image" button from the toolbar.