[css-ui] - Consideration for outline-{{direction}}

[dashouse]

Background

I've recently been working on some :focus styles to try and meet AA standard for WCAG 2.1 Non-text contrast.

In respect to :focus this would mean our focus state should have both text contrast (4.5:1) and the focus indicator should have contrast with the page background (3:1).

The exception to this being, if the state is indicated in another way the non-text colour contrast does not need to be met.

Current focus style

Our current focus style for hyperlinks is a mixture of outline and background-color. We wish to use a consistant :focus colour throughout the website, regardless of element. Because of this we cannot meet this critereon with colour alone, there is not a colour in the spectrum with adequate contrast against both black or white backgrounds.

Current style

Therefore we have considered keeping the same colour and applying additional styles to it. A user who cannot see the colour change will have another way to differentiate the :focus state.

Ideas and execution

For this we have considered adding a bottom border to the current focus style, this will make the focus state more visible on light backgrounds, while the colour alone will have high enough contrast on dark backgrounds. An all-sides border, using outline felt too heavy but more significantly has problems when hyperlinks run over multiple lines.

Idea

Border bottom

While I initially applied this design with a border-bottom on text links, it became obvious that that will cause problems due to the border taking up space on block level elements and pushing the page content down as focus was applied.

Box-shadow

I then changed this to use box-shadow so the faux border did not take up any space.

Code to achieve this going into production is:

outline: $govuk-focus-width solid transparent;
color: $govuk-focus-text-colour;
background-color: $govuk-focus-colour;
box-shadow: -5px -1px 0 1px $govuk-focus-colour,
                         5px -1px 0 1px $govuk-focus-colour,
                         -3px 1px 0 3px $govuk-focus-text-colour,
                         3px 1px 0 3px $govuk-focus-text-colour;
text-decoration: none;

There is a significant rendering issue IE9-11 and Edge 18 retaining artefacts of the box-shadow when navigating with a keyboard, however that seems to be the case for styling :focus in those browsers generally.

Overriding colours

For users that override colours in their browser the box-shadow is not visible, because I also included a transparent outline in the CSS outline: 2px solid transparent; for this use case, the focused elements still have a visible style.

Box shadow version in Firefox with user specified colours

Wrapping

Hyperlinks wrapping over multiple lines was a reason we opted to test a design that only added a visible border to one edge.

The box shadow border wrapping if the stylesheet is used

However because of the transparent outline, those users that override colours will see an outline on all four sides of the focused element, which causes the content to clash with the top outline of the wrapped content.

The outline wrapping if the stylesheet is overridden

outline-{{direction}}

If the outline CSS property had direction values in same way as border, for example outline-bottom this would allow more potential styling options to meet the new WCAG 2.1 criterion, more translatable styles and fewer lines of CSS (for example users overriding colours would see the same design for :focus as users who are seeing the CSS as designed)

[dashouse]

This may be the wrong repo, let me know the best place to move it to if so.

[valtlai]

The correct spec is css-ui.