时间戳

首页 > 解决方案 > WCAG：应用样式时，Firefox 和 Edge 不会在焦点输入元素上显示轮廓

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

问题描述

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

G165：使用平台的默认焦点指示器，以便高能见度的默认焦点指示器继承。

这条规则的总结是：

操作系统有一个本地的焦点指示，这在许多用户代理中都是可用的。焦点指示器的默认渲染并不总是很明显，甚至在某些背景下可能很难看到。但是，许多平台允许用户自定义此焦点指示器的呈现。辅助技术还可以改变原生焦点指示器的外观。如果您使用本机焦点指示器，则任何系统范围的可见性设置都将转移到网页。如果您绘制自己的焦点指示器，例如通过对页面的部分进行着色以响应用户操作，这些设置将不会保留，AT 通常无法找到您的焦点指示器。

（强调我的）

为了遵守这条规则，我想为表单元素保留操作系统的默认焦点指示器。

但是，我在这里面临不同的问题。

在 macOS 上的 Firefox 中：

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

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

在 Windows 上的 Firefox 和 Edge 中：

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

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

.b {
  border: 1px solid red;
}
<form>
    <input class="a" type="text">
    <input class="b" type="text">
</form>

作为旁注：如果label-elements 存在与否，则行为没有区别。

我的问题是：

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

1这是显示 macOS 上问题的屏幕截图：

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

标签： htmlcssfocusoutlinewcag

解决方案

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

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

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

因此，如果您想在“所有”浏览器中具有相同的外观，您必须明确设置它。

例如：

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

在这里阅读更多。

推荐阅读