Links are a great way to connect your audience to additional resources and tools. When including links in your content, it is important to make sure they are accessible so that all users will have access to the same information. Make use of descriptive and meaningful link text, underline and/or color to place visual emphasis on links, and when possible include hover and focus indicators.
Links can connect users to additional information, documents, files, or other locations. Accessible links are important to ensure that all users have access to the same information and experience. Creating accessible links can be easy but there are some guidelines to keep in mind when using links in your content.
Providing full URLs in your content can cause some challenges for users. Since URLs can contain multiple letters, numbers, and characters, they often are not meaningful to someone reading them or using assistive technology. Even some screen readers will read off URLs character by character thus making the link meaningless. Using meaningful link text creates a better user experience for those with and without disabilities. Your link text alone should provide information to the user of the link destination.
Incorrect: https://webaccess.msu.edu
Correct: MSU's webaccess website
For more information on how to update links to be descriptive, visit the Word: Added Context tutorial and PowerPoint: Added Context tutorial.
However, sometimes URLs might be necessary. For example, it you are providing a link in content that might likely be used in print, a full URL would be appropriate for someone to access the link. If this is the case, descriptive link text should be provided followed by the URL in parentheses.
Example: For more accessibility information, please visit MSU's webaccess website (webaccess.msu.edu/).
Links should be descriptive of the destination. Keyboard navigation and other assistive technologies allow users to navigate through a web page or other form of content solely through links. Because of this, it is essential that the links are descriptive and do not rely on context for link information. For example, if you are linking to an article then the link text should be the same as the title of the article. When a screen reader user reaches a link, it will notify them by saying "link" before the actual link text. Therefore, link phrases such as "click here", "link to", "info", etc. should be avoided because they do not add meaning and can become repetitive.
There is no minimum or maximum character length for link text, however it is encouraged to keep your links concise without sacrificing meaning. Link text should consist of a few words or a phrase as lengthy link text can become frustrating for screen readers users who are not able to skim through long links. Link text should also closely match the title and main heading of the destination.
Links should be visually apparent to users. Links should be underlined and/or a different color than the text surrounding it. If these properties are not used, it can become difficult for a user to discern a link from the surrounding text and miss out on additional information or resources. Since it is common for links to be characterized using these properties, color and underline combinations should be avoided for all non-link contexts. Underlining or a different color are especially important to users on mobile devices where hover and focus features are not available.
When using color with your link text, it is important to make sure that it meets color contrast standards. The minimum contrast ratio allowed between regular text and the color distinguished text is 3:1 for AA and 4.5:1 for AAA. For foreground to background the minimum requirement is at least 4.5:1. To reach a wider audience the AAA standard is 7:1 so we recommend going beyond the minimum 4.5:1 for the contrast ratio foreground to background and greater than 3:1 for differentiating colors.
For more information about color contrast and MSU brand standard colors, please visit the Color Contrast tutorial.
Often, websites will have indicators to denote that text is a link. This is shown when a user hovers over a link with their mouse or an outline is placed around link text for keyboard users. These indicators can appear as inverted colors, underline, or a combination of underline and an icon. These indicators are important features to help users understand which areas of the page are links rather than text. It is also important that these indicators meet color contrast standards. If hover and focus features are not available in the medium you are using, then it is recommended to use other visual cues as mentioned in the previous section.
To ensure that the hover and focus features are accessible, it is important that these indicators are conveyed to keyboard users. If you are able to hover over a link with a mouse and experience a distinguishable change by an indicator that alerts you that the text is a link, then this action should also be conveyed upon the use of a keyboard.
When linking externally as opposed to an internal hyperlink, it is important to notify the user that the link will be taking them to a page outside of the current website they are accessing. This can be accomplished through providing small indicators, such as an arrow icon, which will alert the user that they will be leaving the page. An indicator such as this will help assistive technology users better understand that they will be navigating to a new site with different features instead of navigating within the existing site. When linking to HTML resources through D2L, this feature is already included and no additional steps are required on the content creators end.
When providing a link to a non-HTML resource such as a PDF, Word document, PowerPoint, etc., the link text should be reflective of this. If you are providing links to large file downloads, e.g., greater than 3MB, this information would be useful to include in the link text as well.
Example: Quick Tips: Online Content Accessibility (PDF)
If you need to use an image as a link the alternative text should perform the function of the link text. Following the same guidelines for descriptive link text, the alternative text should avoid the use of non-meaningful phrases (e.g., "link to") since the user will be notified that the image is a link. If the image conveys meaning also, it is important that the alternative text includes the content of the image as well as the destination of the link. For more information on alternative text for images, please visit the Alternative Text tutorial