Digital Accessibility

When including links on a webpage, email, document, or any digital space, the text of each link should always describe where it is going. Sometimes screen reader users navigate from link to link, skipping the text in between, so the name of each link needs to make sense on its own. Links that say "click here" or "learn more" are too generic because they don't mean anything out of context.

Tips for naming links:

• Keep the text as short as possible while still being descriptive. It is okay to link a full sentence, but avoid longer.
• Avoid using URLs as link text, especially when they are long
• Do not include "link" or "link to" in the text of a hyperlink. Screen readers already announce that something is a link, so this is redundant.

Examples

Users should not be surprised by what happens when they use a link. If a link is going to open a new tab or download a document, that must be made clear to avoid confusion. For document downloads, include the word "download" in the link text, along with the type of document. For example, a Word document (docx) that is called "Final Paper Template" could have the following link text: "Download Final Paper Template (docx)".

Most links should open in the same window to avoid disrupting the user's experience, but sometimes it makes more sense for a link to open a new tab. The main thing to consider is the experience of the user.

When to open a new tab:

• A web form has a link to instructions or reference material that will help the user fill out the form. This content should link in a new tab so the user can easily go back to the form they are working on.
• The link goes to a page that requires authentication, especially if the user may need to return to the original page.
  • Links to library databases on a Research Guide should open a new tab. That way, users can refer back to the Research Guide after using the database, and doing so won't disrupt their authenticated session in the database.
• When a user is on a page that requires authentication and going to a new page would end the authenticated session.
  • Most links in a D2L course should open a new tab, unless it is linking to another page within D2L. This allows users to go back to the D2L page without having to log in again.

Telling users about opening a new tab

The simplest way to let users know that a link will open a new tab is to include that in the text of the link: Interlibrary Loan (opens a new tab)

Another way to do this is to add an icon in your link that indicates opening a new tab, such as , and include hidden text with it for screen readers: Interlibrary Loan Opens a new tab 

Markup: <a href="https://library.uco.edu/services/ill" target="_blank" title="Opens a new tab">Interlibrary Loan<i class="fa fa-fw fa-external-link" aria-hidden="true"></i><span class="sr-only"> Opens a new tab</span></a>

• target="_blank" is what makes the link open a new tab
• title="Opens a new tab" adds mouse-over text for the entire link, telling users what the link will do
• <i class="fa fa-fw fa-external-link"></i> is the code for the icon
• aria-hidden="true" hides the icon from screen readers
• <span class="sr-only"> Opens a new tab</span> provides information only for screen readers
  • class="sr-only" is referring to a CSS class that hides the message from sighted users (LibGuides has this class built in)
  • A space is included at the beginning of the message so that screen readers do not attempt to read the first word (Opens) as a continuation of the previous word (Loan)

It's important to note that not all screen readers will automatically read title text, so it should not be the only method for telling users that a link opens a new tab.