应用程序导航对于用户至关重要，无论使用什么设备。一个简单的示例是当鼠标用尽电池电量时，正在导航和与网站的内容进行交互。借助Focus指示器和键盘导航支持，将更容易理解您在网站中的位置或对任何交互式元素执行任何所需的操作。在这篇文章中，我们将探索对重点状态的不同CSS支持，以及如何使用它们使您的焦点状态可访问和漂亮。

，但首先，让我们了解什么是交互式HTML元素以及它们的行为方式。

表中的内容

• Table of Content
• Interactive HTML elements
• Understanding focus pseudo-classes
  • Using :focus
  • Using :focus-visible
• The scenarios for focus-visible
• Summary

交互式HTML元素

交互式元素将在用户交互时执行一些操作，例如输入，选择，复选框，按钮和链接。每个交互式的行为都不同，但通常会在用户的互动上改变其状态。您可以通过键入键盘导航到交互式元素，除非将其tabindex属性设置为-1。

下面是明确的焦点指示器如何帮助用户知道他的位置并仅使用键盘在页面中导航。

并为帮助用户提供了更好的视觉可访问性，尤其是在Focus State上，CSS为我们提供了几个焦点伪级。其中包括:focus和:focus-visible，我们将接下来探索。

了解焦点伪级

默认情况下，当元素处于用户交互触发的焦点模式时，浏览器提供了一个轮廓。但是，我们通常希望覆盖这种默认样式或添加其他样式，并为用户提供更好的UX。在这种情况下，我们可以使用以下CSS伪级：focus和focus-visible。

让我们探索它们之间的区别以及何时使用它们。

使用：焦点

:focus是CSS伪级，它指示交互式元素是否处于焦点模式。当用户单击选项卡以选择或更改元素的值（例如输入字段）或使用键盘的选项卡键导航到它时，焦点模式发生。

我们将查看包含输入字段和两个按钮的搜索框的以下示例：

<label>Search a title</label>
<input type="text" placeholder="Search" id="search-box" />
<div>
    <button class="clear-btn">Clear</button>
    <button class="search-btn">Search</button>
</div>

我们在input的:focus类和两个buttons：
上添加CSS样式

#searchbox:focus {
    outline: none;
    border-color: #665cf6;
}

.clear-btn:focus {
    outline: 2px solid #665cf6;
}

.search-btn:focus {
    outline: 2px solid #453ead;
}

通过使用选项卡键或单击元素本身，将重点关注这些元素之一的用户，将相应地将outline或border样式应用于这些元素，如下所示：

在不实际交互的情况下，要调试和测试:focus的CSS样式，在浏览器检查面板中，您可以检查目标元素，选择切换元件状态，然后检查选项:focus。然后，浏览器将显示零件的聚焦并显示相关的CSS样式，如以下屏幕截图：

就是:focus。接下来，我们将探索focus:visible及其与:focus的不同。

使用：焦点可见

:focus是表示焦点上元素的一般伪级，而:focus-visible仅表示满足以下两个条件的交互式元素：

• 元素是焦点（匹配:focus的条件）
• 需要对这些元素有可见的焦点指标。

要更好地理解它，让我们看一下我们以前的搜索框示例，然后在 #searchbox:focus之后添加以下样式：

/*...*/
#searchbox:focus-visible {
    outline: none;
    border-color: #f65ce9;
}

但是按钮和链接是否相同？让我们通过在 .clear-btn:focus之后向.clear-btn:focus-visible 添加以下样式来执行类似的检查：

.clear-btn:focus-visible {
    box-shadow: 0 0 0 3px #f65ce9;
    outline: none;
}

如果我们在 .clear-btn:focus之前将.clear-btn:focus-visible的顺序恢复为，则.clear-btn将在.clear-btn:focus中具有outline，而box-shadow将来自.clear-btn:focus-visible。在用户的鼠标点击上，只有outline样式，如下所示：