WCAG:应用样式时,Firefox和Edge不会在焦点输入元素上显示轮廓
lam*_*ade 12 html css focus wcag outline
我正在创建一个表格,遵循一些WCAG指南.其中之一是:
G165:使用平台的默认焦点指示器,以便高可见性默认焦点指示器将继续.
该规则的摘要是:
操作系统具有焦点的本机指示,其在许多用户代理中可用.焦点指示器的默认渲染并不总是高度可见,甚至可能难以在某些背景下看到.但是,许多平台允许用户自定义此焦点指示符的渲染.辅助技术还可以改变原生焦点指示器的外观.如果使用本机焦点指示器,则其可见性的任何系统范围设置都将转移到Web页面.如果您绘制自己的焦点指示器,例如通过对页面的部分进行着色以响应用户操作,这些设置将不会延续,并且AT通常无法找到您的焦点指示器.
(强调我的)
为了遵守这条规则,我想保留操作系统表单元素的默认焦点指示符.
但是,我在这里遇到了不同的问题.
在macOS上的Firefox中:
一旦我改变了元素的样式(例如通过更改边框设置),默认焦点就会丢失1.
这很奇怪,border并且outline是不同的样式属性.
在Firefox和Edge on Windows上:
浏览器在输入表单元素时显示一个焦点指示符,它只是一个不同颜色的边框 - 只要它没有样式.另一方面,Chrome确实有一个指标作为轮廓 - 就像在macOS 2上一样.
这是一个演示行为的片段(或者尝试这个小提琴):
.b {
border: 1px solid red;
}<form>
<input class="a" type="text">
<input class="b" type="text">
</form>作为旁注:如果 - label元素存在与否,则行为没有区别.
我的问题是:
- 为什么Firefox和Edge在macOS和Widnows上的反应如此？为什么他们使用边框而不是文档的轮廓？
- 即使应用自定义样式,如何强制这些浏览器显示操作系统的默认焦点指示符？
- 当有人创建了一个自定义指标时,它是否仍会显示在Firefox和Edge中,即使默认值不再存在？
有了这些问题,我想知道这个规则是否有可能实现.最终,也许我必须手动设置outline上focus,以获得在所有浏览器相同的行为,并跳过此规则.
1这是一个显示macOS问题的屏幕截图:
2这是在Windows上显示问题的屏幕截图:
这不是一个程序性的答案，而是如何遵守准则。这里的关键是G165是一种“技术”，而不是指南。
相关指南实际上是WCAG 2.4.7（焦点可见）。您可以使用多种不同的技术来满足此准则。在这种情况下，G149、G165 和 G195 是与网页最相关的技术。
那么我从哪里得到这些信息呢？从给定的链接开始：
在“适用性”下有一个指向“如何满足 2.4.7”的链接，您可以看到几种“足够的技术”，您可以从中选择符合指南的技术。在这种情况下，由于 G165 和 G149 在不同浏览器中的工作方式不一致，您可能需要“G195：使用作者提供的、高度可见的焦点指示器”。
WCAG 文档一开始会让人感到困惑，但是当您退后一步看看它们的排列方式时，事情就会变得容易多了。他们对其进行了设置，以便您可以开始快速参考，并在您需要阅读更多内容时链接到其他文档。
WCAG 2 文档中的图表
我花了一整天的时间研究如何满足 WCAG 2.1 - 它旨在作为可定制的快速参考，因此您可以过滤它显示的指南（例如合规性级别 A+AA 或其他），根据您的技术显示哪些技术重新使用，以及很多其他东西。打开侧边栏并切换到那里的过滤器选项卡，您就会明白我的意思。定制后将其添加为书签。
从该文档中，我可以查看可用的技术并单击以阅读它们，并且有一个指向“理解”文档的相关部分的链接，我可以阅读该链接以更好地理解该指南的全部内容。
另外，对于技术，您可能会注意到它们都以一个字母或几个字母开头。G 是“通用”（用于任何技术），其余对应于过滤器部分中的“技术”。我关闭或忽略任何 SL (Silverlight)、FLASH (Flash)、SMIL ( Smil ) 和 PDF 技术，因为它们不相关。