A11y Code Sprint Berlin: Success Criterion 9.2.4.7 - style easily perceivable focus states for all interactive elements

[SarahEdding]

Feature Request

Description

For keyboard navigation, the position of keyboard focus must be visible and easily distinguishable on any interactive element.
Browsers make focus visible by default, but on dark background or linked images focus is not visible enough. Also, some elements have a costum style focus that does not meet minimum contrast requirements (form fields, buttons, button-stlye links, icon links in footer, etc.).

Solution

Provide one consistend styling for all focusable elements; a double border in black and white, 2px each, is useful, because its visible on all backgrounds.
Where necessary, make sure the focus border does not interfere with readability of link text.
In some cases, a gap is needed between the border and the element itself (see screenshots)
However, the border should not be obscured by other elements, as is currently the case with icon links in the footer.

context, links and screenshots

focus not visible enough

focus with extra padding

partially obscured focus box

[linawolf]

@alexakressmann Please assign me

[alexakressmann]

QA successful

[benjaminkott]

Imagelinks adjusted:

Focus not cut off anymore on social icons

[SarahEdding]

fixed for all instances except carousel slides. I've openes a seperate issue for that: #1383