交互键盘_如何仅为键盘交互添加聚焦环

交互键盘

One thing that inevitably makes its way into our QA process on any project is the unexpected appearance of focus rings.

在任何项目中都不可避免地进入质量检查流程的一件事是聚焦环的意外出现。

We’ve had a lot of discussions about how to handle these. The project manager and designer often suggest removing them. While that would be the easy solution, it would be a web design anti-pattern. Default focus rings are provided by all browsers so that keyboard users can determine which element is currently in focus. In fact, focus rings are required to meet accessibility standards:

关于如何处理这些问题，我们进行了很多讨论。项目经理和设计师经常建议删除它们。尽管这将是一个简单的解决方案，但它将是一个网页设计反模式 。所有浏览器均提供默认的聚焦环，以便键盘用户可以确定当前处于焦点的元素。实际上， 需要聚焦环才能达到可访问性标准 ：

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

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

- W3 Web Content Accessibility Guidelines

-W3 Web内容可访问性指南

Even when we decide not to remove focus rings, designers are usually unhappy with the default styles. One question that came up recently is if focus ring styles are made for keyboard users to keep track of the focus on the page, why do they need to show up when I click on an element? Can we add focus rings for keyboard users only?

即使我们决定不移除对焦环，设计师通常也对默认样式不满意。最近出现的一个问题是，是否为键盘用户设计了焦点环样式以跟踪页面上的焦点，为什么单击元素时他们需要显示？我们可以仅为键盘用户添加对焦环吗？

The answer is yes! We can use the :focus-visible polyfill to add focus rings only when a user is navigating with a keyboard.

答案是肯定的！仅当用户使用键盘导航时，才可以使用:focus-visible polyfill添加聚焦环。

如何使用`:focus-visible` polyfill (How to use the `:focus-visible` polyfill)

Here’s how you can implement the :focus-visible in your projects right now.

这是您现在:focus-visible在项目中实现:focus-visible 。

If you are using ES6 modules, install the polyfill via npm:npm install --save focus-visible

如果使用ES6模块，请通过npm install --save focus-visible polyfill： npm install --save focus-visible

Import the module into your main JavaScript file:

将模块导入到您的主JavaScript文件中：

import 'focus-visible';

When your page loads, your <body> will get a class of .js-focus-visible so you can conditionally hide default focus rings only if the polyfill is loaded. Additionally, when you are navigating via keyboard, focused elements will get a class of .focus-visible.

当页面加载时，您的<body>将获得一类.js-focus-visible因此，只有在加载了polyfill时，您才可以有条件地隐藏默认的聚焦环。此外，当您通过键盘导航时，焦点元素将获得一类.focus-visible 。

Now we can add our css:

现在我们可以添加我们的css：

// override UA stylesheet, only when polyfill is loaded
.js-focus-visible :focus:not(.focus-visible) {outline-width: 0;
}// establish desired focus ring appearance for appropriate input modalities
.focus-visible {outline: 2px solid $bright-brand-color;
}

其他资源 (Other Resources)

:focus-visible polyfill on Github

:focus-visible Github上的:focus-visible polyfill
Focus-ring on A11y Casts

聚焦于A11y演员表
The CSS Working Group focus-visible pseudo-class spec

CSS工作组关注焦点的伪类规范

Want to dive deeper into building accessible websites? Join my free email course: ? Common accessibility mistakes and how to avoid them. 30 days, 10 lessons, 100% fun! ? Sign up here!

想更深入地建设可访问的网站吗？ 加入我的免费电子邮件课程： 常见的可访问性错误以及如何避免它们 。 30天，10节课，100％的乐趣！ ？ 在这里注册 ！

This post originally appeared on benrobertson.io.

该帖子最初出现在benrobertson.io上。

翻译自: https://www.freecodecamp.org/news/focus-rings-for-keyboard-interactions-only/

交互键盘