Observation Details
Focusable elements must have a visually distinct focus state. Moving keyboard focus to a focusable element must clearly identify the element as being focused. If this is not the case, sighted users of keyboard navigation will have difficulties navigating a page. Especially when multiple focusable elements do not show visible focus indicators, properly navigating the page may become impossible.
Focussing a product tile by keyboard navigation does not visually indicate the tile being focused. This makes it incredibly difficult to navigate the page with a keyboard.
Remediation Notes
Ensure product tiles (and all other focusable elements) have visual focus states that differ enough from the default states. Keep in mind to adhere to success criterion 1.4.1 and ensure, when only using color to indicate a focus state, that the color difference must be 3:1 or higher.
Ensure, all focusable elements have a visible focus indicator.
The focus indicator should ideally be clearly visible
The focus indicator should not solely rely on change of color (see 1.4.1 Use of Color)
The focus indicator should not create contrast issues of focused text content (see 1.4.3 Contrast (Minimum))
The browser's native focus indicator can be used if it itself passes contrast minimum requirements to the element's background (see 1.4.11 Non-text Contrast).