[csswg-drafts] [css-outline] - Consideration for outline-{{direction}} (#3692)

dashouse has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-outline] - Consideration for outline-{{direction}} ==
## Background

I've recently been working on some `:focus` styles to try and meet AA standard for [WCAG 2.1 Non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html). 

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
![current focus state](https://user-images.githubusercontent.com/23356842/53565404-4e168800-3b51-11e9-8f78-4d603483f70a.png)

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
![focus state idea](https://user-images.githubusercontent.com/23356842/53565415-566ec300-3b51-11e9-966a-277bb34d1624.png)

### 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.

### 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
![overriding colours](https://user-images.githubusercontent.com/23356842/53565418-5969b380-3b51-11e9-89a1-0ced8a526b6a.png)

### 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
![wrapping box shadow](https://user-images.githubusercontent.com/23356842/53565514-9cc42200-3b51-11e9-9757-cca1e37a7cad.png)

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
![wrapping outline](https://user-images.githubusercontent.com/23356842/53565525-a057a900-3b51-11e9-84ee-ef0092018a10.png)

## outline-{{direction}}

If the `outline` [CSS property](https://www.w3.org/wiki/CSS/Properties/outline) 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)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3692 using your GitHub account

Received on Thursday, 28 February 2019 12:41:01 UTC