如何定义专注如何专注_专注于专注

最新推荐文章于 2024-09-15 09:47:04 发布

culuo8053

最新推荐文章于 2024-09-15 09:47:04 发布

阅读量374

点赞数

文章标签： java html python css js ViewUI

原文链接：https://davidwalsh.name/css-focus

版权

如何定义专注如何专注

What's up my a11y allies? Were you aware that the mouse and keyboard handle focus differently? Well it's true. Both handle them differently, and depending on what browser you are in also matters...a lot actually.

我的盟友怎么了？您是否知道鼠标和键盘的手柄聚焦不同？好吧，这是真的。两者的处理方式不同，实际上取决于您所使用的浏览器也很重要。

Focus is a crucial element to the usage and experience of the application we are interacting with. It is also the visual indicator of the element of an application we are focused on. There is a caveat to our focus pseudo class however, and that is our friend outline.

专注是与我们交互的应用程序的使用和体验的关键要素。它也是我们关注的应用程序元素的可视指示器。但是，我们要注意的伪类有一个警告，那就是我们的朋友outline 。

Before we get started, read this over and over until it is engrained in your mental space.

在我们开始之前，请一遍又一遍地阅读它，直到它根深蒂固在您的思维空间中。

:focus {
    outline: 0;
}

This leads us in to our problem.

这导致我们陷入问题。

问题 (The Problem )

There are times when a designer or art director could approach you and say that the outline that renders around certain elements of the page like links, or buttons, doesn’t look…good. It doesn’t match our branding and, well, can you please just remove it.

有时候，设计师或美术指导可能会接近您，并说在页面某些元素(如链接或按钮)周围呈现的轮廓看起来并不好看。它与我们的品牌不符，请删除即可。

And then being a developer, you follow up with, "sure I can remove it, but what alternative do you have to replace the outline?" If they look at you confused, then this is a great time to open up the communication of the importance of focus and what you can do collaboratively to make the experience accessible.

然后，作为一名开发人员，您将继续：“确保可以删除它，但是您必须用什么替代方法来替换大纲？” 如果他们对您感到困惑，那么这是个开放交流的好时机，重点关注焦点的重要性以及您可以通过协作进行的工作以使体验变得可访问。

重置并归一化 (Reset & Normalize)

If you have used Eric Meyer's reset, he removes the focus outline, but he explicitly says to define focus styles after the reset. What about normalize? If you go through the normalize css file and do a search for focus, you won’t find it. You will however find styles for :-moz-focusring. Currently, :-moz-focusring is not a thing so those styles that are being applied using the moz prefix might not work. If you go to the Mozilla Web Docs and search for :-moz-focusring there is a warning at the top that states this such thing.

如果您使用过Eric Meyer的reset ，他将删除焦点轮廓，但他明确表示要在重置后定义焦点样式。归一化呢？如果遍历normalization css文件并搜索焦点，则找不到它。但是，您将找到:-moz-focusring样式。当前， :-moz-focusring并不是问题，因此使用moz前缀应用的那些样式可能不起作用。如果您转到Mozilla Web文档并搜索:-moz-focusring ，则顶部会显示一条警告，指出该情况。

:focus-ring and :-moz-focusring seem to both be the same, neither are standards…yet. :focus-ring is currently in the CSS 4 spec and there is a polyfill which is the focus, no pun intended, of this post.

:focus-ring和:-moz-focusring看起来都一样，但都不是标准的……但是。 :focus-ring当前在CSS 4规范中，并且有一个polyfill，这是本文的重点，并非双关语。

重点的重要性 (Importance of Focus)

There needs to be a way for accessible and non-accessible users to be able to see where they are during interactions. A great example that I read about are login and password inputs. Focus indicates that you are on a password field after you input your login. It would suck if you went to start typing your password but had no visual indication of where you were actually typing your password.

需要为可访问和不可访问的用户提供一种在交互过程中查看其位置的方法。我读过的一个很好的例子是登录名和密码输入。焦点表示输入登录名后，您位于密码字段上。如果您要开始输入密码，但没有视觉指示您实际在哪里输入密码，那会很烂。

什么是焦点？ (What is Focus?)

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

任何键盘可操作的用户界面都具有键盘焦点指示器可见的操作模式。

- Web Content Accessibility Guidelines

-Web内容可访问性准则

According to the Web Content Accessibility Guidelines 2.0, it states that any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. Now that being said, it doesn’t say a blue ring, this is afforded by the browser, but is has to have some type of visual distinction.

根据Web Content Accessibility Guidelines 2.0，它指出，任何键盘可操作的用户界面都具有键盘焦点指示器可见的操作模式。话虽这么说，但并不是说蓝环，这是由浏览器提供的，但是必须具有某种视觉上的区别。

浏览器与焦点 (Browsers & Focus)

Browsers handle focus differently as far as visual presentation goes, as well as functionality. They also focus differently from mouse to keyboard. I gave a talk illustrating these differences that you can find here ==> Focusing on Focus.

浏览器在视觉呈现和功能上对焦点的处理方式不同。从鼠标到键盘，它们的重点也有所不同。我讲了这些差异，您可以在这里找到==> Focusing on Focus 。

问题继续 (The Problem Continued )

I touched briefly on :focus-ring earlier, it is currently in the CSS 4 spec, it landed on the 18th of May. It's not in any browsers yet, but there is a polyfill out there, one of which I am going to show you.

我在前面简短地谈到了:focus-ring ，它目前在CSS 4规范中，于5月18日登陆。它还没有在任何浏览器中使用，但是那里有一个polyfill，我将向您展示其中的一种。

When you remove the default focus by assigning it a value of zero or none, you remove that for everyone, both keyboard and mouse users. Even others who use some type of assistive technology if I had to bet on it.

通过为默认焦点分配零或无值来删除默认焦点时，将为键盘和鼠标用户均删除该焦点。如果我敢打赌，甚至其他使用某种辅助技术的人也是如此。

Some mouse users, on the other hand, don’t like having a focus-ring around custom elements, like custom buttons. This polyfill removes the focus-ring from these elements for mouse users, but adds it back in for keyboard users.

另一方面，某些鼠标用户不喜欢在自定义元素(如自定义按钮)周围设置聚焦环。该polyfill为鼠标用户从这些元素中删除了聚焦环，但为键盘用户又重新添加了聚焦环。

解析度 (The Resolution )

Focus-ring polyfill to the rescue! Essentially it is only these three lines of CSS, and using an already complete JS file. Pretty cool huh?

聚焦环polyfill进行救援！从本质上讲，只有这三行CSS，并且使用了已经完整的JS文件。太酷了吧？

:focus:not(.focus-ring) {
    outline: none;
}

Below is a snippet from the JS file. What it means is anything that is focused, that does not have a focus-ring, set the outline to none. This caters to the mouse users. It sets a focus-ring to all the things in the whitelist in the JS file for both mouse and keyboards, except buttons. It turns off the focus-ring for buttons on mouse clicks, but still allows the focus-ring for keyboard users.

以下是JS文件中的代码段。意思是任何没有聚焦环的聚焦对象，将轮廓设置为无。这迎合了鼠标用户。它为鼠标和键盘(按钮除外)的JS文件白名单中的所有事物设置了聚焦环。它关闭了鼠标单击按钮的聚焦环，但仍允许键盘用户使用聚焦环。