[css-ui] Two different colours for a "double" style outline

[DavidMacDonald]

I'm on the WCAG team and we are discussing requirements for the next version 2.1 that would require focus contrast in interactive elements.

With different colours of buttons there is almost no one focus indicator colour that could be used across the site. However Apple addressed this issue with their VoiceOver screen reader, by providing two lines to indicate focus, one black and one white. So the indicator is always visible regardless of the colour of the button.

This could be done in CSS if there was the ability to make the outline style "double" where the inside line and outside lines were different colours. Then one CSS class with this two color double line on the focus indicator would be visible across the entire site, without a lot of CSS fuss and development time.

 *:focus{ outline: #000000[inside] #ffffff[outside] double 5px;}

[DavidMacDonald]

Thanks for the update @tabatkins ...

[LeaVerou]

Not just sick, I'm at the hospital :)

I really care about this feature and want to spec it soon, but I'm not going to do it from the hospital, so I'd say an optimistic ETA would be mid November. Of course if another editor wants to do it instead, I can't possibly hold the feature back.

[HerrBertling]

Get well soon :)

[tabatkins]

I actually wrote that comment before I found out that you were at the hospital; I just knew that you'd gotten something flu-like the week prior. ^_^

I'll try and take some time to write up a proposal and run it past you, if you don't get to it first.

[DavidMacDonald]

Thanks so much @tabatkins @LeaVerou for getting back to me on this.

@LeaVerou I'm really sorry you haven't been feeling well. I hope you bounce back and are feeling well soon.

[DavidMacDonald]

Hi @LeaVerou
How are you feeling...?

[DavidMacDonald]

@tabatkins What are your thoughts about this?

[DavidMacDonald]

Hi All @tabatkins @LeaVerou @frivoal Is there any movement on this? It seems like an agreement about what to add to CSS to allow two color outlines was reached with consensus, and it just needed to get written up.

[LeaVerou]

It seems like an agreement about what to add to CSS to allow two color outlines was reached with consensus, and it just needed to get written up.

That is correct. Sorry this is taking so long!

I looked into making the change a while ago. It's a fairly non-trivial edit. It requires these three changes:

1. We first need to define 1-dimensional images separately from everything else, in CSS Images 4.
2. Then the stripes() function (also in CSS Images 4) which produces a 1-dimensional image based on the syntax we resolved on.
3. Lastly, we need to allow 1-dimensional images in border-color and outline-color and provide some examples with stripes().

I'm up for doing 2 and 3 but I don't feel I'm experienced enough to do 1 properly, so I would feel more comfortable if @tabatkins or @fantasai did that one.

[JoshTumath]

Hello. @LeaVerou and @tabatkins, it was nice to meet you both at CSS Day in Amsterdam last week.

At the BBC, we would also like to express our interest in this feature for supporting multiple colour stripes in borders and outlines. I can see that a decision was reached in 2018 on the syntax for this feature, but I thought I would add our use-case for it as well, in case it's helpful.

We want to use the outline property to create a black and white focus ring. At the moment, we are doing that with the box-shadow property, like in the example below:

However, if we were to apply our box-shadow focus ring globally to all elements, that would clash with interactive elements that use box-shadows for stylistic purposes. Also, we observe the following issues:

• The shadow goes underneath adjacent content, such as in this example where the box-shadow around the link is underneath the grey text in the adjacent paragraph. The outline property wouldn't have that issue because it's always painted above content.
• If the focusable element is an inline box, but the content inside it is in a block box, the shadow gets rendered like in the example below. The outline property does not share that issue.

So in conclusion, having an outline-color property that supports the proposed new stripes() function (or any other possible syntax) would allow us to easily roll out an improved focus ring design across our website.

[SebastianZ]

The changes @LeaVerou described earlier were done in the meantime. I.e. outline-color now accepts the stripes() function. Therefore, I am going to close this issue.

Sebastian