WCAG:应用样式时，Firefox和Edge不会在聚焦的输入元素上显示轮廓 [英] WCAG: Firefox and Edge don't show outline on focussed input elements when styles are applied

问题描述

我正在创建一个遵循WCAG准则的表单.其中之一是:

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

G165:将默认焦点指示器用于平台，这样高可见度的默认焦点指示器将保留 .

此规则的摘要是:

操作系统具有焦点的本机指示，许多用户代理中都可以使用.焦点指示符的默认呈现并不总是很明显，甚至在某些背景下也很难看清. 但是，许多平台允许用户自定义此焦点指示器的呈现.辅助技术还可以更改本机焦点指示器的外观.如果您使用本机焦点指示器，则其可见性的所有系统范围设置都将延续到网页上.如果您绘制自己的焦点指示器，例如通过响应用户的操作为页面的各个部分上色，这些设置将不会保留，并且AT通常将无法找到您的焦点指示器.

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.

^{(重点是我的)}

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

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.

在macOS上的Firefox中:

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

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

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

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

在Windows的Firefox和Edge中:

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

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>

作为旁注:无论是否存在label元素，其行为都没有区别.

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

我的问题是:

• 为什么Firefox和Edge会像在macOS和Widnows上那样反应?为什么他们使用边框而不是文档的轮廓?
• 即使应用自定义样式，如何强制这些浏览器显示操作系统的默认焦点指示器?
• 有人创建了自定义指标后，即使不再使用默认指标，它仍会显示在Firefox和Edge中吗?

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

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.

¹ 以下是显示macOS问题的屏幕截图:

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

² 以下是显示Windows问题的屏幕截图:

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

推荐答案

这不是程序性答案，而是如何遵守准则的方法.这里的关键是G165是一项技术"，而不是准则.

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.

相关准则实际上是WCAG 2.4.7(可见焦点).您可以使用几种不同的技术来满足该准则.在这种情况下，G149，G165和G195是与网页最相关的技术.

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:为平台使用默认的聚焦指示器高可见度默认焦点指示器将继续存在.

在适用性"下，有一个指向如何满足2.4.7"的链接，您会看到几种可以满足该准则的足够的技术"，您可以从中进行选择.在这种情况下，由于G165和G149在浏览器之间无法始终如一地工作，您可能想要"G195:使用作者提供的，高度可见的焦点指示器".

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

WCAG文档最初令人困惑，但是当您退后一步，看看它们的排列方式时，它会变得容易得多.他们进行了设置，以便您快速入门，并在需要阅读更多内容时链接到其他文档.

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.

WCAG 2文档

我整天都在看如何达到WCAG 2.1 -旨在作为可自定义的快速参考，因此您可以过滤显示的准则(例如，符合性级别A + AA或其他标准)，根据所使用的技术来显示哪些技术以及许多其他内容.打开侧边栏并切换到那里的过滤器选项卡，您将明白我的意思.对其进行自定义后，将其添加为书签.

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.

对于技巧，您可能会注意到它们都以一个字母或几个字母开头. G是一般"(在任何技术上使用)，其余部分与过滤器"部分中的技术"相对应.我关闭或忽略任何SL(Silverlight)，FLASH(Flash)，SMIL( Smil )和PDF技术，因为它们不相关.

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.

这篇关于WCAG:应用样式时，Firefox和Edge不会在聚焦的输入元素上显示轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！