Links

Links

Requirements

• The purpose of a link can be determined from the link text alone.
• Image links and buttons have an alt text that describes their purpose.
• For long links, the purpose of the link can be determined in the first 70 characters.
• Links to non-HTML documents contain document file type and size information.
• All links are visible or become visible when they receive focus.
• Links that receive focus have a highlighting mechanism that makes the current link highly visible.

Example of how a clicked and unclicked link should appear.

Full explanation

Links must be concise and descriptive of their destination. They should not contain generic text such as “click here” or “more”, and lengthy URLs should be avoided.

Duplicate links should be avoided, especially where links with the same name lead to different destinations.

 The document type and file size must be identified when linking to non-HTML documents. This information needs to be included in the hyperlink so that it can be read in the screen reader’s link list.

Visually Hidden Text for Screen Reader Users

Adding extra visually hidden text can help Screen Reader Users give context to the information and elements they encounter.

By adding the following code to your CSS file, it can be used in many situations where it may be beneficial to Screen Reader Users and their understanding of the page content.

.visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Link Purpose In Context

2.4.3  Link Purpose (In Context) (A)

The purpose of every link must be obvious from its text alone, or the link text in conjunction with its contextual relationships as determined through structural markup to help people to understand the purpose of a link, so they can decide whether they want to follow it.

Exceptions

A link whose purpose would be ambiguous to all users, not just those with disabilities.

How to test

1. Open the web page to be tested.
2. Review each link on the page. Is the link’s purpose clear from the link’s text on its own? If it isn’t (e.g. “Read more” or “Click here” do not on their own clearly indicate the link’s purpose), can the link’s purpose be determined through the context provided by its surrounding structure and relationships? For instance, a link whose content does not on its own provide the link’s purpose would still be acceptable if:

• • The text that indicates the link’s purpose is within the same sentence, in the same paragraph (p) or list item (li) as the link, or
  • The link is in a table cell (td) whose other text and columns header cell (th) provides the link’s purpose, or
  • The link is in a section of content with a clear and descriptive heading (h1–h6) that serves to clarify the purpose of the link, or
  • The link has an aria-label or aria-labelledby attribute whose value provides the link’s purpose.

Potential access issues

• A link contains only non-text content and its purpose is not conveyed by a meaningful text alternative or caption.

New Window Links

Requirements

• Links that open in a new window can be identified by screen reader users from within the ‘links list’ dialogue of the screen reader.

Full explanation

Visually impaired users are sometimes disorientated when a link opens in a new window. For instance, they cannot use the ‘back’ button on the browser to get to the previous page. For pop-up windows, the focus should be sent to the window that has popped up.

It should be easy for users to identify if a link opens in a new window.

Example:

The Digital Accessibility Centre (link opens in a new browser window). The new window information can be hidden using CSS techniques if preferred, but {display:none} should not be used as the content may also be hidden from screen reader users. See W3C Techniques for WCAG 2.1 C7: Using CSS to hide a portion of the link text for more information.

HTML:

<a href="#" > Recruitment
	<span class="visuallyhidden"> (Opens in new window</span>
</a>

CSS:

.visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

WCAG 2.1 reference:

2.4  Provide ways to help users with disabilities navigate, find content and determine where they are

Disabling Links

It is not possible to add a "disabled" attribute to a link to disable it like you would a form field or button.

To disable a link, but keep its properties as a link, the following must be done:

• The href attribute must be removed,
• A role of link must be added,
• An aria-disabled attribute must be added and its value must be false.

Example:

<a href="https://digitalaccessibilitycentre.org">The Digital Accessibility Centre</a>

will be changed into

<a role="link" aria-disabled="true">The Digital Accessibility Centre</a>

This can be also be achieved by the follwing JavaScript function.

function toggleLinkDisable(el) {
/* ***********************************
   * Disable / Re-enable a link "el" *
   * Copyright DAC 2024              *
   *********************************** */

  var linkVerify = false; // Is this a link?
  var linkHref = ""; // The href value
  var dataHref = ""; // Disabled link href value
  
  // First, is this a link?
  if (el.tagName.toLowerCase() == "a") {
	linkHref = el.getAttribute("href");
	dataHref = el.getAttribute("data-href");
	if ((linkHref != "") ||
		(dataHref != "")) {
		linkVerify = true;
	}
  }
  
  // If it is a link masquerading as something else, then reject.
  if (el.getAttribute("role") != "link") && 
	  (el.getAttribute("role") != null)) {
	  linkVerify = false;
  }
  
  if (!linkVerify) {
	console.log("toggleLinkDisable: Is not a link!");
	return;
  }
  
  // So, is it being disabled, or re-enabled?
  if (linkHref != "") {
	// Need to be disabled
	el.setAttribute("data-href", linkHref);
	el.setAttribute("aria-disabled", "true");
	el.setAttribute("role", "link");
	el.removeAttribute("href");
  } else {
	// Needs to be re-enabled
	el.setAttribute("href", dataHref);
	el.removeAttribute("aria-disabled");
	el.removeAttribute("data-href");
	el.removeAttribute("role");
  }
}

This function can be invoked by passing a HTML node via its parameter.

For example:

toggleLinkDisable(document.getElementById("link-id"));

Where "link-id" is the id of the link you wish to disable/ re-enable.