Accessibility with links
Web accessibility has always been a requirement for UMaine websites, and Digital Communications has been increasing efforts to improve the accessibility of web content on umaine.edu. The term “accessibility” refers to our efforts to remove barriers that prevent access to websites by people who have a disability. This month, we talk about the challenges and opportunities with link text.
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:
https://umaine.edu
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)
- PDF
Instead, include the document name: 2018 Annual Report PDF - Here
Instead, include more text: You can find the the Fall 2018 syllabus here - More
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.
Image links
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: mike.kirby@maine.edu 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.