1.1 No visible focus indicator on interactive elements (H)

FIGURE 1.1: Search bar on Home page

FIGURE 1.2: Find a course search bar on Home page

FIGURE 1.3: Get in touch button on Generic page

FIGURE 1.4: Apply via UCAS button on the Undergraduate- Accounting and Finance page

FIGURE 1.5: Order your brochure’ and ‘Research’ links on the Postgraduate page

FIGURE 1.6: Quick links on Landing page

FIGURE 1.7: Registry Services links on the Intranet Content page

FIGURE 1.8: course type dropdown on the Search courses page

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

FIGURE 1.10: Discover lifechanging study at LJMU video

FIGURE 1.11: Video on the The Arch accommodation page highlighted

1.1.1 WCAG 2.4.7 (AA) - Desktop

On the Home page, the ‘search the full website’ and ‘find a course’ input fields do not have a visual focus indicator to help keyboard users know which element has keyboard focus.

Visible focus is required for keyboard users to navigate through the site, allowing them to know which form field and element they are interacting with.

This issue persists on all browsers in multiple areas of the site. See:

• The ‘Get in touch’ button on the ‘Generic’ page
• Apply via UCAS button on the Undergraduate- Accounting and Finance page
• The ‘Order your brochure’ and ‘Research’ links on the Postgraduate page
• All the links within the ‘Quick links’ section on the Intranet Landing page
• The Registry Services links on the Intranet Content page
• The checkboxes within the ‘Course type’, Study mode’ and ‘Entry year’ modals on the Search courses page
• The play button on the Postgraduate page
• The play button on The Arch accommodation pages

1.1.2 Recommendation

By default, web browsers indicate focus visually, but custom programming, styling, and scripting can disrupt it. The 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.

---