[a11y] 9.2.4.7 Current position of the focus clearly

[tschiebel]

audit: https://infinite.owncloud.com/s/PnaAukHGGsLnrMM

https://bitvtest.de/pruefschritt/bitv-20-web/bitv-20-web-9-2-4-7-aktuelle-position-des-fokus-deutlich

Personal

• [ ] The keyboard focus on dark blue buttons is very difficult to recognize. This problem also affects slider elements and toggle buttons.

• [ ] With some drop-down menus and "select" elements, the list elements are are very difficult to recognize as focused. As the focus is only highlighted by a color change, the contrast ratio between the focused and unfocused state should be at least unfocused state should be at least 3:1.

Shares

• [ ] The buttons in the table columns "Shared by" and "Shared with" have no visible keyboard focus. have no visible keyboard focus.

• [ ] See comments on Personal

Spaces

• [ ] The checkboxes on dark backgrounds have a keyboard focus that is difficult to recognize. keyboard focus. The "Deactivated" button also has an unrecognizable keyboard focus. keyboard focus.

• [ ] See comments on Personal

Account

• [ ] The "Receive notification mails" checkbox does not have a visible keyboard focus.

[pascalwengerter]

@tbsbdr needs a concept/decision regarding "focus color" and "background color for currently selected element in OcSelect"

[tbsbdr]

I'd suggest a two-color indicator so that the contrast of the focus is always high regardless of its background. It must not look ultra-nice, it must be clearly recognisable while eg. tabbing https://www.w3.org/WAI/WCAG21/Techniques/css/C40#example-1-a-thick-two-color-indicator

*:focus {
	/* inner indicator */
	outline: 2px #F9F9F9 solid;
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 4px #193146;
}

Visual

1

2

3

4

5

6