Links

Tips for Making Links Accessible

Links/Hyperlinks are one of the most basic but important elements on any webpage. They are essential for all users in website navigation and provide valuable information. As a result, inaccessible links are one of the biggest issues a website can have and can present significant challenges for end-users in a variety of ways. Common characteristics of inaccessible links include, but not limited to:

  • not keyboard accessible
  • vague link text (lacking context)
  • poor or no hover/focus styles
  • no visible indication of link
  • empty hrefs
  • broken hrefs
  • duplicate descriptions

For text based links, adding a non-empty href attribute that contains a valid URL and proper link text, to all your <a> elements in your HTML, as well as ensuring color contrast standards are met and a:hover and a:focus styles are clearly defined in your CSS, will ensure that all users are able to navigate your website and understand the pupose of the links. This is especially true for certain Assistive Technologies (AT) users like screen readers, screen magnifiers, braille displays, or keyboard only users.

When links are not keyboard accessible, which is an issue often found on drop down menus dynamically created using JavaScript, and only appear with mouseover/hover, most AT users will not be able to focus on the element and, therefore, will not be able to activate (or follow) links.

Screen readers often navigate a webpage by tabbing from link to link or by using a keyboard short cut to pull up a list of all the links available on the page. This helps them quickly get to and understand the content they are looking for.

However, when ambiguous link text is used, (click here, read more, continue, etc.) screen readers are unable to understand the destination and purpose of the link without reading the context around it (assuming the surrounding context provides context, which it may not).

When link text is provided, it is important to avoid duplication. When descriptions are made available, it is important to remove any unnecessary duplication, which may slow screen readers down. For example, when an image and link description are included within the anchor <a> element, the alt attribute should not contain the same description as the text already being provided. In these cases, either an empty alt attribute or a unique descriptor that provides additional context is most prudent.

If links do not meet the minimum color contrast requirments and clear hover and focus styles are not defined keyboard only and low vision users will have a hard time knowing where links are located and when they receive focus. The importance of ensuring all users can see, focus, and activate a link cannot be stressed enough.

When links follow a path that opens a new window/tab or link to an offsite (third-party) URL, some form of alert or notification should be supplied to the user, which indicates the anticipated behavior when the link is followed.

Relation to WCAG/Section 508

The World Wide Web Consortium (W3C) outlines the following WCAG 2.0 relationships between links and accessibility compliance:

Success Criteria:

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

1.4.3 Contrast (Minimum: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

2.4.4 Link Purpose (In Context): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level A)

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA)

3.2.5 Change on Request: Changes of context are initiated only by user request or a mechanism is available to turn off such changes. (Level AAA)

Did you Know?

Having relavant link text also provides the added benefit of increasing your site’s traffic by helping crawlers find your site and returning important and relevant results for a search. Learn more about the Steps to a Google-friendly site from Google.

Making Links Accessible

To ensure your links are accessible to all users the following best practices should be implemented:

  • Adding a non-empty href attribute that contains a valid URL and proper link text, to all your <a> elements
  • Link text should make sense out of context
  • Link text should inform the the user of the destination
  • The Default state of Link text whether it is underlined or not, must adhere to color contrast requiquirements (below)
  • Ensure Color Contrast Requirements are met
    • Color Contrast between the link text color and the background needs to be at least 4.5:1
    • Color Contrast between the link text color and the surrounding non-link text color needs to be at least 3:1
  • a:focus and a:hover stylings should be clearliy defined in your CSS and often the same stylings can and should be used for both. Recommend creating a border around the link, typically using the CSS border or outline properties. Using a combination of highly contrasting color, a thick line, and other visual indicators such as glow. A visual cue/indicator can be an underline (highly recommended for links), bold, italic or increase in font size or it can be the addition of a glyph or images. It is important to note that these stylings must adhere to color contrast requirements (above).
  • Provide a warning “Opens a new window” for links that automatically open a new window or tab. This can be done a two different ways:
    • Add the warning to the actual link text
    • Add the warning via CSS
  • For linked images, the alt text should inform the user of the link destination. If there is room, a brief description can follow the link destination text, but is not necessary.
  • Combine adjacent image and text links into the same <a> element. This scenario is very common with modern day blogs or news lists that often contain linked images just before a linked header.

Code Examples:

Standard Link:  

<a href="/bulldogs">History of Bulldogs</a>

Combined adjacent image and link (avoid duplicate description):  

<a href="/natural-treats">
<img src=/happy-dog-natural-treats.png” alt="">
All Natural Dog Treats
</a>

Combined adjacent image and link (provide additional context):  

<a href="/annual-report-2016">
<img src=/document.png” alt="PDF">
2016 Annual Report 
</a>

Following the basic steps mentioned above will help content authors and developers properly configure their links to ensure an optimal user experience for those relying on assistive technologies, such as screen readers, to access the digital world. Accessible links are a rich topic and there is not a shortage of valuable online resources on the subject. To learn more and further explore the many nuances in greater detail, check out the Supporting Materials provided below.

How AudioEye Makes Links Accessible

Through the AudioEye Digital Accessibility Platform, site administrators can run site scans (evaluations) that automatically identify link issues violating WCAG 2.0 Success Criteria. For each violation detected, the Digital Accessibility Platform provides detailed information about the specific violation and how to remediate the issue.

For customers adopting and integrating the AudioEye Ally solution, which applies remediation, dynamically, via the AudioEye JavaScript, the AudioEye system provides users with a simple to use interface for applying remediations to links violating WCAG 2.0 Success Criteria. In addition, as a managed service and with authorization, this authoring and manual application may be applied by AudioEye, eliminating the burden on client resources.

There are several different ways the AudioEye system is capable of automatically addressing link violations through autonomous processes, via the [Compliance Accellerator](/compliance-accellerator/. From an automated standpoint, AudioEye is capable of making determinations to either remove duplicate descriptions or apply descriptions to anchors lacking text. Further, AudioEye can detect a tags that are configured to open a new tab/window and automatically warn users before opening a new window.

Similarly, in addition to these auto-remediation techniques, the system supplies site administrators with the option to view link violations that have been processed through automated site scanning processes. Via the Digital Accessibility Platform interface, users can manually apply the necessary remediations to eliminate WCAG 2.0 violations.  

AudioEye Web Personalization Tools

The AudioEye Ally Toolbar includes tools that present links in an accessible manner.

By default, the Reader visibly displays links with an underline and, upon tab or hover focus, the Reader applies a highly contrasting colored border.

The Player reads aloud the presence of a link and then announces its descriptive text. In addition, links will be listed by their descriptive text within the Page Elements Menu, which emulates the links list and rotar utilities that are supplied through other leading screen reader technologies.

Links that do not warn the user before opening a new window are automatically fixed by our Compliance Accellerator by adding warning text. This warning text, i.e. “Opens a new window”, is made visible in through the Reader tool, exposed to AT devices, and is announced by the Player utility.

Having ensured that links are made accessible on webpages enabled with the AudioEye technology, links can be accessed using the Voice utility. When engaged, users may speak the “Go to” command followed by the Link description. For example, by speaking “Go to Digital Accessibility Platform”, the Voice utility will follow the link, taking the user to the Digital Accessiiblity Platform page, just as if the link were clicked on or selected via the keyboard.

Supporting Materials

Technique G165 - Using default focus indicator for the platform

Technique G201 – Giving users advanced warning when opening a new window

Technique C15 - Using CSS to change presentation on focus

Technique G91 – Link text that describes purpose of a link

Technique H2 – Combining adjacent image and text links

Technique H30 – Providing link text that describes the purpose of a link for anchor elements

H83: Using the target attribute to open a new window on user request and indicating this in link text

Read more posts by this author.

Subscribe to the AudioEye nClusion Newsletter

Get the latest industry news & insights delivered right to your inbox.

  or subscribe via RSS with Feedly!