Accessibility audit: Keyboard focus styles

[cbeer]

Main navigation: the entries of the submenus (e.g. "Show Zoom Controls", "Select workspace type", etc.) are only highlighted by a hardly noticeable grey background when the focus is maintained
Dialogs "Select workspace type" and "Change theme/Color scheme" (accessed via "Workspace settings/Color scheme menu"): the focus is only highlighted by a light gray background
Catalogue view: the button for selecting a digitised image is not highlighted when the focus is maintained
Comparison view: within an open digitised material, it is possible to navigate using the index view; the keyboard focus within the index is also only visible on a light grey background

[23jaredbarrett]

Additional Place and Recommendations

Place 1

Description: Resource dialog: The background of elements change from #FFFFFF (white) in the non-focus state to #f5f5f5 (whitesmoke) in the focused state. The contrast between the two states is 1.1.

Recommendation: Increase state change to at least 3:1, or add a simple outline around all elements. Can also change span to a button and let browsers do it for you.

Success Criteria: WCAG 1.4.11 Non-text Contrast

Place 2

Description: Thumbnail pane receives focus at the bottom lacks a keyboard focus indicator. Users must use up/down to navigate.

Example

[mferrarini]

From a conversation with @enriquediaz while looking at our custom instance of Mirador, but certainly applies here as well:

One possibility to achieve this level of contrast is to invert the color of the icons completely while on hover/focus, from dark lines to light, and to make the background color much darker. These would be manipulating values and properties in the CSS that is already in place — not a big lift — and we could draw from color values already available in Mirador's palette.