突出焦点

CSS 播客 - 第 18 集：专注

在网页上，您点击一个链接，该链接会将用户跳转到网站的主要内容。这些链接通常称为跳转链接或锚链接。 当用户使用键盘的 Tab 和 Enter 键激活该链接时，主要内容容器会出现聚焦环。这是为什么？

这是因为 <main> 具有 tabindex="-1" 属性值，这意味着它可以通过编程方式获得焦点。目标 <main> 时（因为浏览器网址栏中的 #main-content 与 id 匹配），它会获得程序化焦点。在这些情况下，很容易就想移除焦点样式，但谨慎妥善地处理焦点有助于打造良好且无障碍的用户体验。这也是为互动增添趣味的好地方。

为什么专注至关重要？

作为 Web 开发者，您的工作就是让网站对所有人开放且易于访问。使用 CSS 创建可访问的焦点状态就是此职责的一部分。

焦点样式可帮助使用键盘或开关控件等设备浏览和与网站互动的用户。如果某个元素获得焦点，但没有视觉提示，用户可能会失去对焦点的跟踪。这可能会导致导航问题，例如，如果用户点击了错误的链接，可能会导致不必要的行为。

元素如何获得焦点

某些元素会自动获得焦点；这些元素接受互动和输入，如 <a>、<button>、<input> 和 <select>。简而言之，所有表单元素、按钮和链接。 通常，您可以使用 Tab 键在网页上向前移动，使用 Shift + Tab 键向后移动，以浏览网站的可聚焦元素。

还有一个名为 tabindex 的 HTML 属性，可让您在用户每次按 Tab 键或通过网址中的哈希更改或 JavaScript 事件而使焦点发生转移时，更改 Tab 键顺序（即元素的聚焦顺序）。如果 HTML 元素上的 tabindex 设置为 0，则该元素可以通过 tab 键接收焦点，并且会遵循全局标签页索引（由文档源顺序定义）。

如果您将 tabindex 设置为 -1，则它只能通过程序化方式接收焦点，也就是说，只有在发生 JavaScript 事件或发生哈希更改（与网址中元素的 id 匹配）时，它才能接收焦点。如果您将 tabindex 设置为高于 0 的任何值，系统会将其从全局标签页索引（由文档来源顺序定义）中移除。现在，Tab 键顺序将由 tabindex 的值定义，例如，具有 tabindex="1" 的元素将在具有 tabindex="2" 的元素之前获得焦点。

设置焦点样式

当元素获得焦点时，默认的浏览器行为是显示焦点圈。此聚焦圈因浏览器和操作系统而异。

您可以使用 CSS 更改此行为，具体方法是使用您在“伪类”课程中学习的 :focus、:focus-within 和 :focus-visible 伪类。请务必设置与元素的默认样式形成对比的焦点样式。例如，常见的方法是使用 outline 属性。

a:focus {
  outline: 2px solid slateblue;
}

outline 属性可能会显示得过于靠近链接文本，但 outline-offset 属性可以帮助解决此问题，因为它会添加额外的视觉 padding，而不会影响元素填充的几何尺寸。outline-offset 的正数值会将轮廓向外推，负数值会将轮廓向内拉。

目前，在某些浏览器中，如果您为元素设置了 border-radius 并使用 outline，则不会匹配 - 轮廓将有尖角。因此，很容易使用模糊处理半径较小的 box-shadow，因为 box-shadow 会裁剪至形状以遵循 border-radius，但此样式不会在 Windows 高对比度模式下显示。这是因为 Windows 高对比度模式不会应用阴影，并且通常会忽略背景图片，以便支持用户的首选设置。

总结

创建与元素的默认状态形成对比的聚焦状态非常重要。默认的浏览器样式已为您执行此操作，但如果您想更改此行为，请注意以下事项：

• 避免对可接收键盘焦点的元素使用 outline: none。
• 避免将 outline 样式替换为 box-shadow。因为它们不会在 Windows 高对比度模式下显示
• 仅在绝对必要时，才应为 HTML 元素上的 tabindex 设置正值。
• 确保焦点状态与默认状态相比非常清晰。

检查您的理解情况

测试您对焦点的了解