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

我正在创建一个表格,遵循一些WCAG指南.其中之一是:

G165:使用平台的默认焦点指示器,以便高可见性默认焦点指示器将继续.

该规则的摘要是:

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

^{(强调我的)}

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

但是,我在这里遇到了不同的问题.

在macOS上的Firefox中:

一旦我改变了元素的样式(例如通过更改边框设置),默认焦点就会丢失¹.

这很奇怪,border并且outline是不同的样式属性.

在Firefox和Edge on Windows上:

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

这是一个演示行为的片段(或者尝试这个小提琴):

.b {
  border: 1px solid red;
}