2.2 Dashboard elements not keyboard accessible (H)

GP dashboard elements highlighted with NVDA speech viewer activated on the Monitoring page

FIGURE 2.2: GP dashboard elements highlighted with NVDA speech viewer activated on the Monitoring page

2.2.1 WCAG 2.1.1 (A), 2.4.3 (A), 2.4.7 (AA) - Desktop

The GP dashboard includes interactive elements such as filter buttons for each column. The rows of this data table are also interactive; users can click on the row to access the individual patients’ data.

However, these elements are not part of the tab order: users cannot use the tab key to navigate to the elements. The user is able to navigate to these elements using the arrow key, however, there is no visible focus indicator to let the user know what element they are interacting with. A mouse is required to access this element.

This also affects the focus order of the page, with focus moving from the navigation elements to the search options and then out of the page: sighted users using a keyboard to navigate wouldn’t know that the table is interactive. This greatly impacts the functionality of the site.

2.2.2 Recommendation

Interactive elements need to be part of the tab order. Elements that are not focusable by default (such as div) can be brought into the tab order by adding <tabindex="0"> to them.

Ensure that all interactive elements on the page have a visible focus indicator. Best practice is to include :focus and :active CSS pseudo classes as well as :hover to make sure focus highlight effects work when tabbing to links (and other interactive elements) as well as 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

Test navigating the site using the keyboard by pressing the tab key to confirm that focus is visible on all interactive elements.

2.2.3 Spot check: December 2022

This issue is unresolved. Although these elements are now in the tab order the focus visible is very difficult to see. It is important to ensure that the visible focus indicator is clear for low vision keyboard users.