WCAG：当应用样式时，Firefox 和 Edge 不会在焦点输入元素上显示轮廓

Question

我正在创建一个表单，它遵循一些 WCAG 准则。其中之一是：

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

这条规则的总结是：

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.

^{（强调我的）}

为了遵守此规则，我想保留 OS' 表单元素的默认焦点指示器。

但是，我在这里遇到了不同的问题。

Mac 上的 FirefoxOS:

一旦我更改元素的样式（例如通过更改边框设置），默认焦点就会丢失¹.

这很奇怪，因为 border 和 outline 是不同的样式属性。

在 Windows 上的 Firefox 和 Edge 中：

当输入表单元素时，浏览器会显示一个焦点指示器，它只是一个不同颜色的边框——只要它是无样式的。另一方面，Chrome 确实有一个指示器作为轮廓 – 就像在 macOS².

上一样

这是一个演示行为的片段（或者试试这个 fiddle）：

.b {
  border: 1px solid red;
}

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

作为旁注：如果 label 元素存在与否，行为没有区别。

我的问题是：

为什么 Firefox 和 Edge 在 macOS 和 Widnows 上的反应如此？为什么他们使用边框而不是文档的轮廓？
如何强制这些浏览器显示 OS 的默认焦点指示器，即使应用了自定义样式？
如果有人创建了自定义指示器，它是否仍会显示在 Firefox 和 Edge 中，即使默认指示器不再显示？

有了这些问题，我想知道这个规则是否有可能实现。最后，也许我必须在 focus 上手动设置 outline 才能在所有浏览器中获得相同的行为并跳过此规则。

¹ 这是显示 mac 上问题的屏幕截图OS:

² 这是显示 Windows 问题的屏幕截图：

Answer 1

您已经注意到，表单元素的外观和行为是基于实现的，并且因浏览器而异。

每个表单元素都有其浏览器默认外观 -- 一组样式，例如 border、background 等

当您尝试更改默认样式时，浏览器可能会逐条覆盖它们（如 Chrome 所做的那样）或完全放弃默认外观（如 Firefox 所做的那样）。

所以如果你想在 "all" 浏览器中有相同的外观，你必须明确地设置它。

例如：

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

阅读更多here。

Answer 2

CSS outline 属性确实存在，你可以这样使用它：

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

如果它不起作用或不显示，这可能意味着有另一种样式与其重叠，因此您可以通过添加 !important

来覆盖它

Answer 3

每个浏览器都有自己的属性。当我搜索时，您应该编写如下代码：

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

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

如果您想了解更多关于这个概念的信息，请参阅 MDN Docs 以了解。

希望我的回答对你有所帮助

Answer 4

这不是程序化的答案，而是如何遵守准则。这里的关键是G165是一个"technique"，不是一个指导方针

相关指南实际上是WCAG 2.4.7 (Focus Visible)。您可以使用多种不同的技术来满足此准则。在这种情况下，G149、G165 和 G195 是与网页最相关的技术。

那么我从哪里得到这些信息呢？从给定的 link:

开始

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

在"Applicability"下面有一个link到"How to Meet 2.4.7"，你可以看到几个"Sufficient techniques"，你可以从中选择符合指南的。在这种情况下，由于 G165 和 G149 不能跨浏览器一致地工作，您可能需要 "G195: Using an author-supplied, highly visible focus indicator".

WCAG 文档起初令人困惑，但当您回头看看它们的排列方式时，就会变得容易得多。他们设置了它，以便您可以快速参考，当您需要阅读更多内容时，它 link 可以指向其他文档。

图表来自 WCAG 2 Documents

我整天都在看 How to Meet WCAG 2.1 - 它旨在作为可定制的快速参考，因此您可以过滤它显示的指南（例如合规级别 A+AA 或其他），显示哪些技术基于你正在使用的技术，以及很多其他的东西。打开侧边栏并切换到那里的过滤器选项卡，您就会明白我的意思。自定义后将其加入书签。

从该文档中，我可以查看可用的技术并单击以阅读它们，link 到 "Understanding" 文档的相关部分，我可以阅读以获取更好地理解指南的全部内容。

对于技术，您可能会注意到它们都以一个或几个字母开头。 G是"general"（用在任意技术上），其余对应Filter部分的"Technologies"。我关闭或忽略任何 SL (Silverlight)、FLASH (Flash)、SMIL (Smil) 和 PDF 技术，因为它们不相关。

WCAG：当应用样式时，Firefox 和 Edge 不会在焦点输入元素上显示轮廓

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

html

css

focus

wcag

outline