Links and 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.

Generally, users should have control over whether they open a link in the same browser tab or a new one. 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.

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>

The advantage of Technique #1 is that it offers authors more flexibility in writing a label that is meaningful and easy to read. For example, if the title of an article is long, it could be truncated in the label.  In contrast, Technique #2, since the label is created programmatically, might result in a label that is too long. However, Technique #2 is fine if it is not feasible for content authors to enter custom aria-label values for each “Read more” link.

To add links in Microsoft Office, select the text or picture that you want to display as a hyperlink. Press Ctrl+K in Windows, or Cmd+K in Mac OS. You can also right-click the text or picture and select “Hyperlink” in the shortcut menu. In the Insert Hyperlink dialog, type or paste your link in the Address field.

As described at the top of this page, be sure the link text conforms to best practices for accessibility. If the link is created from a picture, carefully consider what needs to be communicated in the picture’s alt text (for additional information about alt text, see our Images page). It is important for screen readers to know what to expect if they click on the image. This need is generally more important than knowing the content of the image, although well-written alt text can typically meet both of these needs.

If a PDF document was properly exported from an accessible version of an authoring application, the links in the document should already be active and accessible. Verification of links can be accomplished by running the Accessibility Checker built into Adobe Acrobat Pro.

Acrobat provides several ways to create active links for URLs in a PDF document including using the automated tools for remediation. To create links in a PDF document using Adobe Acrobat Pro, follow these steps:

1. Highlight the text
2. Right click and select “Create Link…” from the context menu
3. In the Create Link dialog box, select either ” Go to a page view” if you are linking within the document, or ” Open a web page” if you are linking a URL, then follow the prompts to complete the task.

Below are both bad and good examples of link text being added to a Canvas page.

Example 1:  bad link text

In this example, the text “click here” fails because if read out of context, it provides no meaningful information to users about what will happen if they follow the link.

Example 2: good link text

In this example, the link text “UW Accessible Technology” makes sense independently of context. If users encounter this link (for example) in a list of links, they know what to expect if they follow the link. They don’t need the original context to figure that out.

Changing text of course links

When adding links to pages within Canvas, the rich content editor provides two options:  External Links and Course Links. If you select Course Links, you can add links to a wide variety of course content, including pages, assignments, quizzes, discussions, and more.  When added to the current page, the default link text will be the title of that resource. This may or may not be good link text (e.g., unique on the page, easy to understand, able to stand alone independently of context).  To edit the link text for any Course Link, simply click the link and select “Link Options”. A form will appear in the sidebar where you can edit the link text.