Links
Definition
Links lead users to a different page or content. In contrast, buttons should be used to signal actions or activate a feature.
The default styling for links that appear in text are defined below.
Default link styleVisited link style
Hover link style
Focused link style
Description
Links can do things like help with page context, reference similar items of interest, and allow for endless connected information surfing through websites, like Wikipedia. Without proper consideration links can be frustrating to use, skipped over, or completely unnoticed.
People who have low or colorblind vision may have trouble identifying links that just use color to distinguish them from plain text, this is why keeping the underline styling on links within body text is important for identification.
Accessibility Considerations
Let a link be a link
For screen reader assistive technology, links and buttons are expected to function differently from each other. If a link is activated and does not do what was expected, that can be disorienting and frustrating.
Styling links as buttons
It is totally acceptable to style links as buttons. Make sure the link has the appropriate link semantics and add button classes for the desired look.
Link styled as a button
<a href="#" class="btn btn-primary">Create Account</a>
Link text
A common way a screen reader might navigate the page is by going through a list of all the links on the page. Without context, "read more" or "click here" links are not helpful.
Link text should always describe the destination, and should be descriptive enough to convey the destination without relying on the surrounding text
It may be acceptable in some scenarios to provide a more descriptive link
text for screen reader users by setting the aria-label
.
However, this technique will result in divergence between the label and
the text and is not an ideal, future-proof solution. Whenever possible,
prefer a single descriptive link text that is available for both sighted
users and screen reader users.
Link text should not be the URL of the link unless the link is very short
- Good: The 1915 Iowa State Census Project
- Bad: https://doi.org/10.3886/ICPSR28501.v1
- OK: www.icpsr.org
Example of links in paragraph text
The documentary on his life, titled Happy Trees: The Joy of Bob Ross, is currently streaming now on Happyflix. Reviews for the film have been exceptional.
Opening Links in New Tabs/Windows - not good for accessibility
Opening links in a new window or tab is generally discouraged for these reasons:
- It disables the back button.
- It removes the choice from the user.
- Links that don't behave as expected can undermine users' trust that they are using a professional product.
- New windows can disorient visually-impaired users. For example, when a new screen opens outside the part of the screen that's magnified.
- Less-technical users struggle to manage multiple windows and tabs, especially on mobile. (On tablets, where users can have both multiple windows and tabs for the browser, it’s even more confusing.)
- More windows or tabs increase the clutter of the user’s information space and require more effort to manage.
Exceptions
There are instances in which it is permissible or desirable to open links in new windows or tabs:
- Links to PDFs, because when users are finished reading them, they often click "close" instead of "back"
- Links inside forms, where moving away from the form might mean losing the data you've added
- Small popup windows that add more information or help text to something in the main window
Add a rel="noopenner referrer"
to the anchor tag to prevent tab nabbing.
Examples
Include warning in the text
<a href="//www.icpsr.umich.edu/files/ICPSR/pdf/ICPSR_Standards_of_Use.pdf" target="_blank" rel="noopenner noreferrer">ICPSR Standards of Use (new tab)</a>(pdf)