WCAG: Firefox and Edge don't show outline on focussed input elements when styles are applied

Question

I'm creating a form, that is following some WCAG guidelines. One of those is:

G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over.

The summary of this rule is:

Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds. However, many platforms allow the user to customize the rendering of this focus indicator. Assistive technology can also change the appearance of the native focus indicator. If you use the native focus indicator, any system-wide settings for its visibility will carry over to the Web page. If you draw your own focus indicator, for example by coloring sections of the page in response to user action, these settings will not carry over, and AT will not usually be able to find your focus indicator.

^{(emphasis mine)}

In order to comply with this rule, I want to keep the OS' default focus indicator for form elements.

---

However, I'm facing different problems here.

In Firefox on macOS:

As soon as the I change the style of the element (e.g. by changing the border settings), the default focus gets lost¹.

This is strange as border and outline are different style attributes.

In Firefox and Edge on Windows:

The browsers show a focus indicator that is only a differently colored border, when entering a form element – as long as it's unstyled. Chrome on the other hand does have an indicator as an outline – like on macOS².

---

Here's a snippet to demonstrate the behaviour (alternatively try this fiddle):

.b {
  border: 1px solid red;
}

<form>
    <input class="a" type="text">
    <input class="b" type="text">
</form>

As a sidenote: There is no difference in the behaviour if label-elements are present or not.

---

My questions are:

• Why does Firefox and Edge react like that on macOS and Widnows? Why do they use the border instead of the outline of the document?
• How can I force these browsers to show the OS's default focus indicators even when custom styles are applied?
• When somebody has created a customized indicator, will it still be shown in Firefox and Edge, even though the default one isn't anymore?

With these issues, I wonder whether this rule is even possible to achieve. In the end maybe I must manually set outline on focus to get the same behaviour in all browsers and skip this rule.

---

¹ Here's a screenshot showing the problem on macOS:

² Here's a screenshot showing the problem on Windows:

Duque

@TylerH The screenshot is from Firefox 61 on macOS 10.13. I re-checked this on Firefox on a PC with Windows 10 and it really does look differently. It seems that Firefox and Edge don't show an outline at all on Windows even with default styles. Maybe I need to rephrase my question to address that issue. – Duque

"Why are there no focus indicators in Firefox and Edge on Windows by default?" There are, even in the snippet you've provided. Firefox activates it only on keyboard focus, and Edge's is very subtle. – Coloring

If that resolves your issue, perhaps @Coloring could refund your bounty? It hasn't received any answers since you posted it, so seems like a fair candidate for that uncommon act. Or he should post his comment as an answer, and earn the bounty :-P – Laxative

@TylerH: I mean, there is more to this than just Firefox and Edge displaying default focus indicators... – Coloring

@Duque FYI modern versions of browsers relegate a lot of UI styles and effects on their Mac versions to the OS, opting for the OS styling to be applied instead of custom browser styles. That is probably why you are seeing that Mac-esque style on focus here. – Laxative

Answer 1

This is not a programmatic answer, but how to comply with the guidelines. The key here is that G165 is a "technique", not a guideline.

The relevant guideline is actually WCAG 2.4.7 (Focus Visible). There are several different techniques that you could use to meet this guideline. In this case G149, G165 and G195 are the most relevant techniques for a web page.

So where am I getting this information? Starting from the given link:

G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over.

Under "Applicability" there's a link to "How to Meet 2.4.7" and you can see several "Sufficient techniques" that you can choose from that will meet the guideline. In this case since G165 and G149 don't work consistently across browsers, you probably want "G195: Using an author-supplied, highly visible focus indicator".

---

The WCAG documents are confusing at first, but it gets a lot easier when you step back and look how they're arranged. They set it up so there's a quick reference you start on, and it links to the other documents when you need to read more.

Diagram from WCAG 2 Documents

I spend all day looking at How to Meet WCAG 2.1 - it is intended as a customizable quick-reference, so you can filter which guidelines it shows (e.g. compliance level A+AA or whatever), which techniques to show based on technologies you're using, and a lot of other stuff. Open the sidebar and switch to the filter tab there and you'll see what I mean. Bookmark it once you've got it customized.

From that document, I can look at the available techniques and click to read up on them, and there's a link to the relevant section of the "Understanding" document that I can read to get a better understanding of what the guideline is all about.

Also for techniques, you'll probably notice they all start with a letter or a few letters. G is "general" (use on any technology), and the rest correspond to the "Technologies" in the Filter section. I turn off or ignore any SL (Silverlight), FLASH (Flash), SMIL (Smil) and PDF techniques since they're not relevant.

Cody

Thank you very much for putting this together. – Duque

Answer 2

As you've notced already, appearance and behaviour of form elements are implementation-based and differs from browser to browser.

Every form element has its browser-default appearance -- a set of styles such as border, background etc.

When you're trying to change default styles, browser may override them rule-by-rule (as Chrome does) or discard the default appearance at all (as Firefox does).

So if you want to have the same appearance in "all" browsers you have to set it explicitly.

E.g.:

.b {
  border: 1px solid red;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.b:focus {
  outline: none;
  box-shadow: 0 0 2px 2px lime
}

<input class="a" type="text">
<input class="b" type="text">

Read more here.

Gluconeogenesis

You're right - it seems there's no rule, how the focus indicator should be rendered. I assumed it should be outline, because macOS does it that way and there're different warnings in CSSLint, like "Outlines should only be modified using :focus." or "Outlines shouldn't be hidden unless other visual changes are made." which is shown on outline: 0;. I start to wonder whether G165 is even possible to achieve. Maybe somebody comes up with an answer that says: No matter what styles are applied, if you have a custom focus, it will always be inherited to the browser. – Duque

Answer 3

The CSS outline property does exist and you can use it like this:

.b {
  border: 1px solid red;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input:focus {
  outline: 2px solid #2772DB;
}

<input class="a" type="text">
<input class="b" type="text">

If its not working or showing up, that may mean there is another style overlapping it so you can override it by adding !important

Gaudy

Thanks for your answer. This is basically the same as Kosh has written. The question is not about how CSS works or what outline and border properties are. The question is basically: How to keep the default focus indicator of the browser while styling an input element, so that a custom focus indicator of the OS can be inheritet. Maybe the answer is, that a custom focus indicator is inheritet no matter what or that it's not possible to achieve this cross OS and cross browser - but I'm still hoping. :) – Duque

Answer 4

Each browser has its own properties. As I searched you should code like below:

input.b {
  border: 1px solid #f00;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input.b:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #0a0;
}

If you wanna read more about this concept, See MDN Docs to understand.

Hope, my answer helps you.

Wilinski