8.5 Video links do not inform the user of where the link will take them (H)

FIGURE 8.11: Play button for the video on the Undergraduate- accounting and finance page with NVDA speech viewer activated

FIGURE 8.12: play button highlighted on the video in the postgraduate page with NVDA screen reader activated

FIGURE 8.13: Discover lifechanging study at LJMU video on the High Traffic one page
8.5.1 WCAG 2.4.4 (A), 3.2.4 (AA), 4.1.2 (A) - Desktop, Mobile, iPad
When the user navigates to the play video link on the Undergraduate page, it is announced by screen reader as ‘accounting-and-finance link’. This does not provide the user with sufficient information to know that they are interacting with an element that activates a video.
This issue persists on the ‘Postgraduate course’ and ‘The Arch’ accommodation page. For a similar issue see Link text does not help users identify link purpose (H)
Furthermore, the play control looks and functions like a button then it should be coded as such. Buttons should be used 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. For a related see Buttons and links styled the same (H)
8.5.2 Recommendation
Consider recoding the play link as a button element and ensure that when focus lands on this element, the user knows what the button is for.
This can be achieved by implementing the following options:
Place descriptive information at the beginning of the element 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 element e.g. ‘Play Accounting and Finance video’.