1.4 Insufficient visible focus (H)

The 'Open Days' link receiving focus on the content page

FIGURE 1.15: The ‘Open Days’ link receiving focus on the content page

1.4.1 WCAG 1.4.11 (AA), 2.4.7 (AA) - Desktop

When the ‘Open Days’ link on the ‘Content’ page receives focus, there is a thin black underline beneath the image which is not clear and can easily be missed. This applies to all the links within the ‘Explore these areas’ section on this page and this issue persists across the website with most of the link images using this style of visible focus indicator.

1.4.2 Recommendation

By default, web browsers indicate focus visually, but custom programming, styling, and scripting can disrupt it. Best practice is to include a:focus and a:active in the CSS file as well as a:hover to make focus highlight effects work when tabbing to links as well and when using a mouse.

When implementing a custom visible focus indicator, ensure the colour contrast between adjacent colours meets the minimum colour contrast ratio of 3:1 against non-text elements.