Links and buttons serve different functions on websites and should be used appropriately. The text for either element should be unique within a web page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it.
Links vs buttons
In HTML, links and buttons are different elements, which serve different purposes:
- Links take the user to a new location, such as a new web page or new section of the current page.
- Buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form.
This distinction matters because it affects user expectations. If a screen reader announces an element as a “link” or “button,” users have expectations about what will happen when they click that element. If something else happens, this can be disorienting.
If the wrong element (link vs button) has been used on a website, and changing it to the correct element is not feasible, its role can be overridden with the ARIA role attribute. For example:
The following element is handled as a link by screen readers.
<button role="link">
The following element is handled as a button by screen readers.
<a role="button">
Links and buttons each have additional accessibility considerations, described below.
Forcing links to open in a new tab
Generally, users should have control over whether they open a link in the same tab or a new tab. Forcing links to open in a new tab can defy users’ expectations and cause confusion, particularly for screen reader users. It also renders the browser’s Back button useless, whereas being able to browse forward and back through one’s browsing history is an extremely useful feature.
However, there are exceptions. If the user is likely to want to return to the current page, especially to the point where they left off, it is acceptable, even preferable, to open links in a new tab. The following are examples:
- On an online form, where links lead to help pages.
- On a secure website, where links lead to external pages and leaving the current page will result in the user being logged out of the current site.
- On a page that serves as a hub, the primary purpose of which is to provide users with links, such as a page of search results.
“Read more” links
If link text is added at the end of repeated blocks of text, for example, “Read more” links at the end of short teasers for articles, there are a variety of acceptable techniques for making those links more accessible. Two techniques are described below.
Technique #1: Override link text with aria-label
The aria-label attribute, if added to a link, will override the visible link text. This can be used to provide more descriptive link text specifically for screen reader users, where sighted users get the same information by visual context. In the following example, screen readers will read the value of the aria-label attribute rather than the link text:
<a href="post.php?post=632" aria-label="More on Using Meaningful Link Text">More...</a>
Technique #2: Combine content into one label using aria-labelledby
The following example uses the aria-labelledby attribute. The value of this attribute must be one or more ids of existing elements on the page, separated by a space. This example is particularly clever as it’s self-referential. It combines the content of itself (“Read more…”) with the article title that’s provided elsewhere.
<h2 id="article1-title">Huskies Earn Top Honors</h2> <p>Short teaser blurb goes here...</p> <p><a id="article1-link" aria-labelledby="article1-link article1-title">Read more...</a></p>
NOTE: When using ARIA attributes such as aria-label or aria-labelledby, it can be helpful to know how link text and other labels are calculated by assistive technologies. For details about this, see the Accessible Names and Visible Labels section of our ARIA on Websites page.