焦点

使用集合保持井井有条 根据你的偏好保存内容并进行分类。

CSS 播客 - 018：焦点

在你的网页上，你点击了一个链接，该链接将用户跳到网站的主要内容。这些链接通常被称为跳过链接或锚链接。当该链接通过键盘使用Tab和Enter键激活时，主内容容器周围会有一个焦点环。这是为什么呢？

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

为什么焦点很重要？

作为 Web 开发者，你的工作是让网站对所有人来说都无障碍且具有包容性。使用 CSS 创建无障碍的焦点状态是这项责任的一部分。

焦点样式可以帮助使用键盘或切换控制等设备的人员浏览网站并与之互动。如果某个元素获得焦点但没有视觉指示，用户可能会迷失焦点所在的位置。这可能会导致导航问题，并可能导致意外行为，例如，如果点击了错误的链接。

元素如何获得焦点

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

还有一个名为 tabindex 的 HTML 属性，它允许你更改制表符索引（即元素获得焦点的顺序），每次有人按下 Tab 键，或焦点因 URL 中的哈希值更改或 JavaScript 事件而转移时。如果 HTML 元素上的 tabindex 设置为 0，则它可以通过 Tab 键接收焦点，并且它将遵循全局制表符索引，该索引由文档源顺序定义。

如果你将 tabindex 设置为 -1，则它只能以编程方式接收焦点，这意味着仅当发生 JavaScript 事件或哈希值更改（与 URL 中元素的 id 匹配）时才会接收焦点。如果你将 tabindex 设置为高于 0 的任何值，它将从全局制表符索引中删除，全局制表符索引由文档源顺序定义。制表符顺序现在将由 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 设置正值。
• 确保焦点状态与默认状态相比非常清晰。

检查你的理解情况

测试你对焦点的知识