Links are an essential part of the internet experience, which is why we must ensure that they work for users of all abilities. To state the concept as simply as possible: links should be obvious and predictable. This means all users should easily be able to distinguish links from non-link content, and have a good idea of what will happen when they click on one.
Link text
Not Too Short or Too Long
Link text should tell the user where they will go if they click it. That being said, sentence-long link text should be avoided. Try to keep it as concise as possible while still communicating the purpose of the link.
No "Click Here"
Screen reader users often pull up a list of links as a way to “scan” without reading the entire page. Because the link text is removed from its surrounding content, it must be meaningful on its own. As such, generic link text like “Click here” and “Read more” should be avoided.
An exception might be a news site that has brief blurbs about several top stories, each with a “Read more” option. However, in that scenario, an aria-label should be added to the code to differentiate the several instances of identical link text.
ARIA is an advanced topic, if you have questions please contact Krista Poppe.
More Best Practices
- Avoid using all caps. All-caps text can be harder for some people to read, for example, people with dyslexia. Additionally, some screen readers will read all-caps text one letter at a time.
- Avoid repeating “link to” in your link text. Screen readers announce links already, and sighted users know it’s a link because of the styling—text color and underline.
- Avoid using actual URLs as link text. URLs are typically too long, often with random strings of numbers. They are bad choices for both sighted users and screen reader users. There may be exceptions to this rule if the URL is short and obvious, for example: irs.gov
Example
Here are several ways to link to the same video. Which do you think is the best?
Option 1
To watch a video on Accessible Links from the U.S. Department of Education, Office of Civil Rights, click here.
Option 2
To learn more about Accessible Links, watch THIS VIDEO.
Option 3
Learn more about Accessibility: link to video.
Option 4
Watch this video tutorial: https://www.youtube.com/watch?v=Smy4OAmMEwE
Option 5
To learn more, watch this video tutorial on Link Accessibility from the U.S. Department of Education, Office of Civil Rights.
Option 6
To learn more, watch this video on Link Accessibility from the U.S. Department of Education, Office of Civil Rights.
Link Appearance
In all browsers, it is a universal default to underline links. This is a helpful signal to users that the underlined text is clickable.
Some designers don’t like the way underlined links look, and they change the style to remove them. For navigation menu and footer links, removing the underline is not a problem. Most users already expect menus and footers to contain links, whether or not they are underlined. But removing the underline style is not recommended for links within body text, or the main content of a page. Without the underline, the link becomes much harder to differentiate from regular text.
If you really don’t want your links underlined, there are two additional WCAG requirements to ensure links remain accessible to all users:
- The color of the link text must meet a minimum contrast ratio of 3:1 for both the background and the surrounding text. You can check your colors using the WebAIM Link Contrast Checker.
- The link must present a non-color change on mouse hover or keyboard focus. Often, this is where the underline is reintroduced to appear on hover only.
New Tabs or Windows
When links open in new tabs, it can be disorienting for certain users. This is especially true when no warning is given. Generally, opening links in a new tab or window should be avoided, with certain exceptions.
In instances where a link opens in a new tab or window, there should be an indication to the user, either as text or as a graphic. We often see icons used for this purpose; always make sure the image or icon has alt text or an aria-label declaring the new tab will open.
Using our video example from above for demonstration purposes only, here are examples of how to show a link opens in a new tab:
New Window: Text only
To learn more, watch this video on Link Accessibility (opens in new tab) from the U.S. Department of Education, Office of Civil Rights.
New Window: Icon
To learn more, watch this video on Link Accessibility from the U.S. Department of Education, Office of Civil Rights. (The icon’s aria-label is “opens in new window.” For font/web icons like Font Awesome, the aria-label substitutes for the alt attribute of a true image <img>)
Files
It is annoying for all users when clicking on a link unexpectedly downloads a file to your device. Links to non-html content like PDF, Word, spreadsheets or other file formats should also have an indication of what to expect when activated.
Again, plain text or an image icon with appropriate alt text can be used in this scenario.
File: Text only
Download the Accessibility Basics Checklist (PDF).
File: Icon
Download the Accessibility Basics Checklist . (The icon’s aria-label is “PDF.” For font/web icons like Font Awesome, the aria-label substitutes for the alt attribute of a true image <img>)
ARIA is an advanced topic, if you have questions please contact
Krista Poppe.
Images as links
We know that images conveying important information must have descriptive alt text. For images that also serve as links, the alternative text does double duty: describing the important visual information and indicating where the link goes.
In some cases, the image content may not be important enough to describe. If it was just an image, it would be marked as decorative and have a null alt attribute (alt=””). But since a linked image performs a function, the alt text is still needed.
Examples
Decorative
The accessibility icon doesn’t really convey any important information, but the embedded text tells sighted users where the link goes.
The alt text reads simply: Accessibility Knowledge Base
Informative
This linked image contains important information and links to more data.
The alt text reads: Pie chart of 2024 screen reader user survey results with link to more data. 46.8% think the state of web accessibility hasn’t changed in the last year, while 34.6% think it has gotten better, and 18.6% think it has gotten worse.