1.8 Buttons and links styled the same (H)

FIGURE 1.28: ‘View your bookmarks’ link highlighted on the Course search page

FIGURE 1.29: ‘Full time’ link highlighted on the Course search page

FIGURE 1.30: ‘Search’ button highlighted on the Course search page

1.8.1 WCAG 3.2.4 (AA), 4.1.1 (A), 4.1.2 (A) - Desktop

On the Search courses page, the bookmark elements are coded as a link element and is announced as ‘link’ by screen readers. As this element looks and functions like a button then it should be coded as such.

A further example of this is the ‘search’ button which is coded as a button but is styled the same as the link elements on the page, this will cause confusion for users. This issue persists across the website with button and link elements styled the same.

Use buttons to signal clickable actions and links if you want a user to navigate to a new page or to a different target on the same page.

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.

1.8.2 Recommendation

Recode the bookmark link as a button element and ensure that when focus lands on this element user know what the button is for. This can be achieved by placing descriptive information at the beginning of the button by adding the text and displaying it off-screen with CSS to remove content from visible display, but keep it available to screen readers.

Another option is to use the aria-label attribute to add a descriptive text label to the button. For example, ‘Add bookmark for Fine Art undergraduate course, button’.

---