Links (Hyperlinks)
Textual links (and surrounding context, if necessary) or graphical links with text embedded (which must be included in the alternative text) should be written in active voice, typically using a call-to-action.
Basic link standards
Most of your links will be basic (e.g. link to a page or document), so your link text should do the following:
Screen readers allow users to scan the webpage without reading the entire page. Make sure your link text makes sense in this respect.
| Bad Link Text | Why is it Ineffective? |
|---|---|
| Link | It provides no information whatsoever of what the link is about or where it will take you. |
| Here | It provides no information whatsoever of what the link is about or where it will take you. |
| Read More | You have an idea that the link will go to more information about something, but you don't know what that something is. |
| Learn More | You have an idea that the link will go to more information about something, but you don't know what that something is. |
| Go Here | You know it is a link to something, but you don't know what that something is. |
| Click Here | You know it is a link to something, but you don't know what that something is. You are also confused as to what you can do with this link, since your abilities and/or video may block you from using the click action of a mouse. You may have to use another action, and it would be tedious to describe all of them (e.g. swipe, blow, hit, wink, touch). |
| This | You know it is a link to something, but you don't know what that something is. |
| For More Info | You have an idea that the link will go to more information about something, but you don't know what that something is. |
Good Examples:
- Read more about triggers for seizures
- Register now for web content management system training
- Application for Accessibility Training (January 30)
Sometimes you don't have room on the webpage to provide all that text. Depending on your technical knowledge. you can contact University Web Strategy for assistance in hiding text or add the code in on your own. This code is screen reader friendly code. It hides the additional text your visual users don't need, but screen readers include it while reading the link text. In those case, "Read more" types of textual links can have hidden text like "about triggers for seizures".
We often forget that when we add links to a webpage, we don't need to visually show the web address. Those are only required on print materials and publications. On the web and other electronic documents (as long as you have an internet connection), link text in the form of a web address can be very confusing if not exceedingly annoying.
These can be resolved by either removing the web address instructions, if they are already on the page, or replacing the web address as link text with the title of the page and linking directly to the page desired. This clarifies the location and improves usability, since they don't have to navigate (or type) anywhere else for the link to information.
| Bad Link Text | Why is it Ineffective? |
|---|---|
| http://bit.ly/83de85rfe4 | It provides no information whatsoever of what the link is about or where it will take you. Plus, it is just a bunch of letters and numbers being spelled out, character by character. |
| http://it.tamucc.edu/accessibility/guidelines/web-address-text.html | You have an idea where this will take you, but you were burdened with the character by character and word by word reading of the text. |
Users with cognitive or visual disabilities need links across the website, both in navigation and in the main content, to consistently:
- behave (e.g. function in a commonly known fashion)
- display on the page (e.g. indicating what type of link)
When expectations are changed, this causes confusion (see a light-hearted explanation of user expectations, starting at 1:49 in the video). Our goal is to reduce that confusion, known as the principle of least astonishment.
Who controls the behavior of the link?
Users expect to be able to control how the links they select appear in their browser. They are familiar with their device's functionality and their own habits. However, when a user opens a new tab, that removes navigational options.
Whenever possible, make sure your links do not force your users to open them in new windows/tabs of their browsers. This decision should be controlled by the user, not the author or designer. Menu and keyboard options are available on browsers to allow the user to make that choice.
Does the user know what type of content is on the link?
Confusion and usability issues for all individuals, no matter their abilities, get amplified when documents (e.g. PDF, DOC, XLS, PPT) are in the main content or navigation.
Exceptions are described below for special link types, like email addresses and phone numbers.
As a general compliance rule, documents are not as accessible as webpages or need far more effort to become in compliance, so this change in environment and access should be used only when absolutely necessary. If the content cannot be displayed and maintained in a webpage to function correctly (e.g. web form, résumé), then a document can be used (see Nielsen Norman Group's web usability article Can Hated Design Elements Be Made to Work?).
Note: If the user does not have the software or application installed on their device to properly use the document, then they also do not have access to that information.
In the navigation of a website, users expect to find a way from one webpage to the next within the website, not exit the navigation of the website entirely. This happens when a user selects a link to open a document, and includes the following potential issues:
- The document is self-contained. It may have its own table of contents and/or links, but it is not the same navigation as the website the user was previously on. This removes the user from the website's navigation and requires them to determine for themselves where they are and how to get back.
- TAC 206.70 requires websites to now support the "variations in internet connection speeds and emerging communications protocols and technologies," an accessibility guideline that affects individuals of all abilities. Documents are often inaccessible due to file size because users are not willing or able to wait for the documents to download to their device. They must be fully loaded on a user's device before the user can open and view them. Web pages open much faster than documents with similar content.
Special types of links
Special types of links must be written a certain way to display or function correctly:
When email addresses are used properly, your users can send emails to someone from their email clients, especially on mobile video.
To add the link, email addresses must start with the protocol "mailto:" followed immediately by the email address. No spaces should appear before, in between, or after the protocol or email address itself. Doing so adds an unusual %20 to the address which makes it unsendable to your intended recipient.
Example protocol: mailto:someone@tamucc.edu
The text on these links (what your user accesses to open their email client) can be either the name/title of the recipient or the email address itself, preferably their name/title.
Example result: Email Someone Cool
When phone numbers are used properly, your constituents can use their mobile phones or phone applications (e.g. Skype, Jabber) to call directly from your web page.
To add the link, phone numbers must start with the protocol "tel:" followed immediately by the national code (e.g. US starts with "+1"), followed by the area code and number without any space, hyphens, or parentheses.
Example protocol: tel:+13618253154
Example result: Call 361-825-3154 for further assistance
How-to
Hyperlinks are defined in HTML using the a anchor tag: <a href="[link-location.html]">[Unique Link Text]</a>
If you are using a special type of link, then replace the [link-location.html] with the appropriate information.
As mentioned in the basic link standards, replace [Unique Link Text] with the appropriate unique link text that tells your audience where they will be going.
View PDF Accessibility: Navigation Links video from the Microsoft Enable PDF Accessibility Training YouTube Playlist.
The video quickly mentions the tagging structure check that you may need to do depending on the complexity of the PDF document. Documents with a lot of design elements may be harder to add links to automatically, even if they were converted to PDF documents from another application.
Elements of a link:
<Link>: The Link tag surrounds the entire area defined as the link.Link - OBJR: This is a special tag specifically understood by screen readers and other assistive technology, indicating there is a link and what functionality the link has.- child tags with link text (have a box instead of a tag icon next to them): These are all the sections of text that should be a part of the link, so you can have more than one. For example, if link text starts on one line and flows into a second line, you will have two of these child tags.
The tag structure should look something like this once elements are moved around properly:
- <Link>
- Link - OBJR
- [link text]
Areas that allow you to use the rich text or WYSIWYG editor have Insert/edit link and Remove link buttons in the menu.
- If you are inserting a link, highlight the text first.
- If you are editing or removing a link, make sure the cursor is somewhere inside the link text. You do not have to highlight the full link text.
Cascade CMS allows you to link to content (e.g. pages, files) within Cascade, using the Internal option. This is what makes a content management system really manage the content. If you link to content internally in Cascade, and
- that content moves somewhere else in Cascade: simply republish your web page for the new address to appear automatically on the live website
- someone modifies that content: do nothing at all, since the address has not changed
Preventing broken links reduces accessibility issues for everyone. You are encouraged to link to content within Cascade using the Internal option, even if the content is in a different Site than yours.
If content is outside Cascade CMS, then use the External option and follow the instructions before this How-to section.
However, if that content just needs to be uploaded into Cascade, use the Internal option, change the Link Source ("Choose File, Page, or Link"), and select Upload. Selecting the placement folder before uploading the file improves the chance that you will place the file in the proper location before submitting and creating the link.
References
- Research-based Web Design and Usability Guidelines (PDF) (see Chapter 7: Navigation; Chapter 10: Links; and Chapter 15: Writing Web Content)
- W3C WAI Tips: Provide informative, unique page titles
- W3C WAI Tips: Make link text meaningful
- W3C WAI Tips: Provide clear instructions
- W3C WAI Tips: Keep content clear and concise
- W3C WAI Tips: Provide sufficient contrast between foreground and background
- W3C WAI Tips: Don’t use color alone to convey information
- W3C WAI Tips: Ensure that interactive elements are easy to identify
- W3C WAI Tips: Provide clear and consistent navigation options
- W3C WAI Tips: Create designs for different viewport sizes
- W3C WAI Tips: Use mark-up to convey meaning and structure
- Web AIM: Links and Hypertext
- Web AIM: Link Text and Appearance
- Web AIM: Designing for Screen Reader Compatibility
- Nielsen Norman Group: Top 10 Mistakes in Web Design
- Nielsen Norman Group: Can Hated Design Elements Be Made to Work?
- WCAG 2.0 Guideline 2.4 - Navigable
- Understanding WCAG 2.0 Guideline 2.4
- WCAG 2.0 Guideline 3.2 - Predictable
- Understanding WCAG 2.0 Guideline 3.2
- Techniques for WCAG 2.0 G200: Opening new windows and tabs from a link only when necessary
- Techniques for WCAG 2.0 G201: Giving users advanced warning when opening a new window
- Techniques for WCAG 2.0 H83: Using the target attribute to open a new window on user request and indicating this in link text
- Techniques for WCAG 2.0 SCR24: Using progressive enhancement to open new windows on user request