专注

CSS 播客 - 018：专注

在网页上 您点击某个链接后，用户会跳转到网站的主要内容。 这些链接通常称为跳转链接或锚链接。 当您通过键盘打开该链接时，可以按 Tab 和 Enter 键， 主内容容器周围有一个聚焦环。这是为什么？

这是因为 <main> 具有 tabindex="-1" 属性值， 这意味着可以通过编程方式聚焦。 定位 <main> 时 - 由于 #main-content 与 id 匹配 - 它会获得程序化焦点。 在这些情况下，很容易移除焦点样式， 但适当并细心地处理焦点有助于创造 打造无障碍体验 也可以用来增加互动的兴趣。

为什么专注力很重要？

作为一名 Web 开发者 您的职责就是打造一个人人都能访问、具有包容性的网站。 使用 CSS 创建可访问的焦点状态就是此职责的一部分。

焦点样式可为使用键盘或设备等设备的用户提供帮助 开关控制 来浏览网站并与之互动 如果某个元素获得焦点，但没有显示可见指示， 用户可能无法跟踪焦点内容。 在以下情况下，这可能会造成导航问题并导致不必要的行为： 例如，跟踪的链接有误。

元素如何获得焦点

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

此外，还有一个名为 tabindex 的 HTML 属性，可用于更改标签页导航索引，即 元素聚焦的顺序（每当用户按下 Tab 键时）， 或焦点随着网址中的哈希值变化或 JavaScript 事件而转移。 如果将 HTML 元素的 tabindex 设为 0， 它可以通过 Tab 键获得焦点，并且遵循全局 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 设置一个正值。
• 确保焦点状态与默认状态相比非常清晰。

检查您的理解情况

测试您对专注力的掌握情况