Accessibility and inclusion: Accessibility with links
Web accessibility has always been a requirement for UMaine websites, and has been a regular feature in our monthly newsletter. Ensuring your content is accessible is part of an inclusive communication strategy. This month, we share guidance about links on your web pages. For longtime readers, this originally appeared in our March 2019 newsletter.
How links work
A link on a web page has at least two elements: what the reader sees to click on, and the destination to which that click takes them. The destination is usually a web page or email address, but in some cases (such as mobile devices) a link may launch a phone call or other mobile app. In all situations, there needs to be an indication that the link exists (such as text, an image, or button), and that indication should be helpful to the reader.
With a basic link, there is underlined text that invites a reader to click. In many cases, a web address can get automatically converted into a clickable link (this happens in email quite frequently), for example:
However, the web address does not need to be displayed— the link destination and the text for the link are separate attributes, and almost always it is better to use the text of a link to describe where that link will take someone:
This link will take you to the UMaine website
Why is it better to use descriptive text for a link?
There are two very important reasons to use descriptive text for your links:
- Screen reader users can generate a list of links on a page, and navigate them alphabetically. A screen reader will spell out a web address letter-by-letter, which is not helpful and frustrating for long web addresses.
- Search engines use link text to better understand the topic of the page to which that link refers.
For both of these reasons, it is better to use phrases as your link text, and not single words.
Common link text to avoid (note, these examples are not clickable links)
Instead, include the document name: 2018 Annual Report PDF
Instead, include more text: You can find the the Fall 2018 syllabus here
Instead, include more text: Click here for additional registration details.
- http://… (a website URL)
Instead, replace the web address with the name of the website.
Images may also be used in place of link text. When an image functions as a link, the image alt text must serve the purpose of link text. In this case, it is fine for the image alt text to describe the link destination instead of the image that is being displayed.
If an image needs to be described for screen readers, and that description does not serve for good link text, avoid using the image itself as a link.
Links to email addresses
When you are using link text around an email address, it is acceptable to display the email address as the link text. For example: firstname.lastname@example.org is fine.
Hidden link text
For the Article and Event List content blocks, there is an option to add a “More” link— a link that will take the reader to more articles or more events than are listed. In these situations our website system is creating additional, hidden link text that allows screen readers and search engines to receive suitably descriptive link text.
One hidden link text feature you can see for yourself are our “jump to” links at the top of every page. If you use the tab key on your keyboard upon visiting a UMaine web page, you will see “Skip to main navigation” appear on screen as a link. This link is in place explicitly for screen readers to allow for skipping to main navigation, site navigation, or page content, but is otherwise hidden.