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.
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:
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
- 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.
<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.
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.