Spotlight 11:
Using Links
(WCAG 2.4.4 & 2.4.9)
In this spotlight, we’ll talk about using links.
What do the criteria say?
WCAG 2.4.4 Link Purpose: In Context - level A and 2.4.9 Link Purpose: Link only - level AAA both relate to making links meaningful to users. The difference is that with 2.4.4, the users should be able to work out where the link will take them from the context surrounding the link, while according to 2.4.9, they should be able to do that from the link text alone.
Links are usually visually different from standard text. Screen readers try to mimic that functionality and allow users to pull up a list of links and navigate through that list quickly. However, if the list has 3 "Click here" and 4 " Find out more" links, users have to investigate the surrounding content to find out what these specifically refer to. If they can work out the meaning from the context surrounding the link, the learning content complies with the level A standard. However, in general, it's considered best practice to comply with the level AAA guideline and make the purpose or the destination of the link clear from the link alone.
WCAG 2.4.4 vs 2.4.9 Image Transcript
Examples of WCAG 2.4.4 and WCAG 2.4.9.
WCAG 2.4.4 Link Purpose: In Context (A)
The example says “Find out more about how to use links”. This is then followed by a full link of 3 lines that includes www.lcaspotlight.com and the breadcrumbs that lead to the exact page location..
WCAG 2.4.9 Link Purpose: Link only (AAA)
The example says ”Find out more”. This is then followed by a shortened hyperlink that simply reads: “Spotlight 11: Using links”.
The image ends with the LCA Spotlight logo.
Other considerations
Although not specifically mentioned in the WCAG guidelines, here are some more considerations when using links:
Use hyperlinks instead of the actual URL link wherever possible. That is because screen readers read out the full chain of the URL and that can be time-consuming. Not to mention that a chain of random numbers and letters are meaningless.
Try to keep the hyperlink short and more or less the same or similar to the title of the destination page.
Because links opening in a new tab or window can be disorienting for some learners using assistive technology and it also breaks back-button history navigation, it's recommended that links are set to open in the same window. If users want to open links in a new window, they can do that by using their mouse or keyboard functions.
According to WCAG 1.4.11 Non-text Contrast (AA), the colour contrast between links and surrounding elements should be 3:1. (In most cases, the surrounding element refers to the surrounding text, but in addition, it may also refer to the background colour.)
Finally, "click" is uninclusive for users who do not use a mouse. Instead, using "select" or "follow" are better options.
Links Best Practices Image Transcript
A table with 2 columns of what to avoid and what to do instead.
Use hyperlink instead of the actual URL. The example shows a full link versus a hyperlink that only shows the title of the page.
Keep the link short and similar to the title of the destination page. The example shows a hyperlink that says “ Spotlight 11: How to use links and comply with WCAG standards” with a better and shortened version that simply reads: “Spotlight 11: Using links”.
Set links to open in the same window. The images shows a panel where the question is “How do you want to display this web object?” And the options are “Display in slide” and “Display in a new browser window”. The better option shows “Display in slide” selected.
Create colour contrast between the link and its surroundings. The examples shows the link underlined, but in the better column, the link is different colour than the surrounding text.
Use inclusive language. The examples shows the same text, except the standard example says” Click this link” while the better example says” Select this link”.
The image ends with the LCA Spotlight logo.
Resources:
Follow this link to read the full WCAG criteria of 2.4.4: 2.4.4: Link purpose in context (w3.org)
Follow this link to read the full WCAG criteria of 2.4.9: 2.4.9: Link purpose link only (w3.org)
Also, this article talks about some additional considerations related to using links: Links (UNC School of Medicine)
Discussion questions:
Get Involved: Come to the LCA Spotlight LinkedIn group and join the conversation.
How can we make links more accessible if the authoring tool doesn’t allow hyperlinking or when referencing links in printed format?
What other things should we consider when adding links to learning content?
According to the WCAG wording, 2.4.4 and 2.4.9 should be applied “except where the purpose of the link would be ambiguous to users in general”. What could we do to avoid ambiguity in general?
When you post in the community, use the hashtag #LCASpotlightLinks
Spotlight 10: No keyboard trap
Spotlight 12: Flashes