Text Pages
Links
Recorded Workshop
Links should be actionable, descriptive, and accessible. CMS users linking internal and external websites, PDFs, and images on their web pages 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 a student studying that links to the Tutoring Hub.
It doesn't have text on the image, but it is visually located near other text and links about tutoring services, so there's a clear correlation for sighted users.
- Incorrect Usage: "Student studying at a desk, writing notes and using a laptop"
- Screen reader users won't know where "Student studying at a desk, writing notes and using a laptop" is meant to take them.
- Correct Usage: "Tutoring Hub"
- 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.