焦点指示器(通常用“对焦环”表示)可标识当前的 网页上的特定元素对于无法使用鼠标的用户, 指标极为重要,因为它可作为 鼠标指针。
如果浏览器的默认焦点指示器与您的设计冲突,您可以使用 来调整其样式切记要为键盘用户着想!
使用 :focus
始终显示焦点指示器
:focus
伪类会在某个元素获得焦点时应用,而不考虑输入源
设备(鼠标、键盘、触控笔等)或将其对焦的方法。例如:
下面的 <div>
具有使其可聚焦的 tabindex
。它还具有
:focus
状态的自定义样式:
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
无论您是使用鼠标点击点击,还是使用键盘按 Tab 键,
<div>
看起来始终相同。
遗憾的是,浏览器与其应用焦点的方式可能不一致。还是 不是某个元素获得焦点可能取决于浏览器和 系统。
例如,下面的 <button>
还具有其 :focus
的自定义样式
状态。
button:focus {
outline: 4px dashed orange;
}
在 macOS 上,如果您在 Chrome 中使用鼠标点击 <button>
,您应该会看到
自定义焦点样式但是,如果你将焦点移至某个
在 macOS 上,点击 Safari 中的 <button>
。这是因为
在 Safari 中,当您点击元素时,该元素没有获得焦点。
由于焦点的行为不一致,可能需要进行一些测试 以确保您的焦点样式能被用户接受
使用 :focus-visible
选择性地显示焦点指示器
新的
:focus-visible
伪类会在某个元素获得焦点并且
浏览器通过启发式算法确定显示焦点指示器
对用户有益。特别是,如果最近一次用户互动
是通过键盘进行的,并且按键操作不包含 Meta 键 ALT
/ OPTION
,
或 CONTROL
键,则 :focus-visible
将匹配。
下例中的按钮将有选择地显示焦点指示器。如果 那么结果会不同于第一次使用 按 Tab 键即可转到该窗格。
button:focus-visible {
outline: 4px dashed orange;
}
使用 :focus-within
为聚焦元素的父项设置样式
通过
:focus-within
伪类会在某个元素自身收到该元素时,
焦点,或者该元素内的其他元素获得焦点时。
它可用于突出显示网页的某个区域,以绘制 用户对该区域的关注度例如,下面的表单同时获得焦点 当表单本身被选中时,以及其任何单选按钮被选中时 已选择。
form:focus-within {
background: #ffecb3;
}
何时显示焦点指示器
一个好的做法是问自己: 使用移动设备,您认为它会显示键盘吗?”
如果答案是肯定的,则该控件可能应该始终显示焦点。
指示符,无论使用何种输入设备来聚焦它。一个很好的例子是
<input type="text">
元素。用户需要将输入发送到
元素,而不管输入元素最初是如何接收的,
因此始终显示焦点指示器很有帮助。
如果答案是否定的,那么控件便可选择性地显示焦点
指示器。<button>
元素就是一个很好的例子。如果用户使用
鼠标或触摸屏,则操作已完成,且焦点指示标志不得
。不过,如果用户使用键盘进行导航,则很有用。
显示焦点指示标志,以便用户决定是否要
使用 ENTER
或 SPACE
键点击控件。
避免使用 outline: none
坦率地说,浏览器决定何时绘制焦点指示器,
令人感到困惑使用 CSS 更改 <button>
元素的外观,或将
tabindex
元素会导致浏览器的默认焦点环行为
。
一种很常见的反模式是使用 CSS 移除焦点指示器,例如:
/* Don't do this!!! */
:focus {
outline: none;
}
若要解决此问题,更好的方法是结合使用 :focus
和
:focus-visible
polyfill。下面的第一个代码块演示了
该 polyfill 的运作方式,其下方的示例应用提供了一个使用
polyfill 来更改按钮上的焦点指示器。
/*
This will hide the focus indicator if the element receives focus via the
mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
/*
Optionally: Define a strong focus indicator for keyboard focus.
If you choose to skip this step, then the browser's default focus
indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
…
}