1.6 Link text does not help users identify link purpose (H)

FIGURE 1.17: ‘I agree’ and ‘No thanks’ links highlighted on the homepage

FIGURE 1.18: links highlighted on the study page

FIGURE 1.19: Twitter link highlighted on the Undergraduate- accounting and finance page

FIGURE 1.20: Read more link on the postgraduate page

FIGURE 1.21: Lecturer link names highlighted on the postgraduate page

FIGURE 1.22: ‘here’ link on Intranet content page

1.6.1 WCAG 2.4.4 (A) - Desktop, Mobile, iPad

Throughout the website, there are several links with the link text which is not descriptive enough to help users understand where the link will take them.

For example:

• The ‘I agree’ and ‘no thanks’ links in the cookies banner do not provide enough context as to where the link will take the user
• The ‘Study’ landing page includes links like ‘courses’, ‘undergraduate’, ‘postgraduate’ which are not descriptive enough
• Twitter links throughout the website do not notify users that the link will take them to a Twitter page
• ‘Read more’ links on the postgraduate page provide no additional information on what the user is reading more about
• The ‘here’ link on the intranet content page does not inform the user what the link is for and where it will take them

Screen reader users who navigate between interactive elements only hear the text of each link. Therefore, link text should be meaningful and identify the purpose without visual cues.

This issue persists in multiple areas throughout the website. See:

• LJMU logo does not help users identify link destination (M)
• Links do not provide the user with additional information (H)
• Link URL is announced by screen reader (H)

1.6.2 Recommendation

Options include:

• Place descriptive information at the beginning of the link by adding the text and displaying it off-screen with CSS to remove content from visible display, but keep it available to screen readers.

• Use the aria-label attribute to add a descriptive text label to the link e.g. ‘Read more about the Undergraduate Architecture course’.

• Use the aria-describedby attribute to indicate the IDs of the elements that describe the object. For example this will establish a relationship between the ‘read more’ links and text that described them.

---